使用HTML和CSS创建浏览器窗口

浏览器窗口是Web浏览器的图形用户界面（GUI）元素，用于显示网页和Web应用程序。它通常由标题栏、菜单栏、地址栏、导航按钮和内容区域组成。

步骤

创建一个带有圆角、边框和隐藏溢出的容器div。
在容器内创建一个带有背景颜色、填充和导航栏的标题。
在导航栏中添加链接到各个页面。
在标题中添加一个搜索按钮和文本输入框。
在主段落中可以包含一个标题。
容器的右上角应该有最小化、最大化和关闭三个按钮。
使搜索栏和按钮位于标题的中间。
将主段落放置在容器的中间。
为每个元素应用CSS样式，如字体大小、颜色、边距和填充。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Tutorialspoint</title>
   <style>
      /* CSS styles */

      /* Style for the container */
      .container {
         width: 80%;
         margin: 0 auto;
         border: 1px solid #ccc;
         border-radius: 5px;
         overflow: hidden;
      }

      /* Style for the header */
      header {
         background-color: #f2f2f2;
         padding: 10px;
         display: flex;
         justify-content: space-around;
         flex-direction: column;
      }

      /* Style for the navigation bar */
      nav {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 10px;
      }

      /* Style for the navigation links */
      nav a {
         color: #333;
         text-decoration: none;
         font-weight: bold;
      }

      /* Style for the hover effect on navigation links */
      nav a:hover {
         text-decoration: underline;
      }

      /* Style for the buttons */
      .buttons {
         display: flex;
         align-items: center;
      }

      /* Styling buttons */
      .minimize, .maximize, .close {
         height: 10px;
         width: 10px;
         margin-right: 5px;
         border-radius: 50%;
      }

      /* Styling minimize button */
      .minimize {
         background-color: #ff9800;
         color: #ff9800;
      }

      /* Maximize button */
      .maximize {
         background-color: #4caf50;
      }

      /* Close button colour */
      .close {
         background-color: #f44336;
      }

      /* Form styles */
      form {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 10px;
      }

      /* Styling the search input */
      input[type="text"] {
         padding: 10px;
         border: none;
         border-radius: 5px;
         margin-right: 5px;
         width: 50%;
      }

      /* search button styles */
      button[type="submit"] {
         padding: 10px;
         border: none;
         border-radius: 5px;
         margin-right: 5px;
         cursor: pointer;
         background-color: #f2f2f2;
         color: #333;
      }

      /* Hover effect on buttons */
      button[type="submit"]:hover,
      button:not([type="submit"]):hover {
         background-color: #333;
         color: #fff;
      }

      /* Padding the main content */
      main {
         padding: 10px;
      }

      h1 {
         font-size: 36px;
         color: #333;
         margin-bottom: 10px;
      }

      /* Styling main paragraph */
      p {
         font-size: 18px;
         color: #666;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="buttons">
         <button class="minimize"></button> <!-- Minimize button -->
         <button class="maximize"></button> <!-- Maximize button -->
         <button class="close"></button> <!-- Close button -->
      </div>
      <header>
      <nav>
         <!-- Nav elements -->
         <a href="#">Gmail</a>
         <a href="#">Images</a>
         <a href="#">Apps</a>
         <a href="#">Notifications</a>
         <a href="#">Account</a>
      </nav>
      <!-- Search Bar -->
      <form>
         <input type="text" placeholder="https://www.tutorialspoint.com/">
         <button type="submit">Search</button>
      </form>
      </header>
      <main>
         <!-- Heading -->
         <h1>Welcome to Tutorialspoint</h1>
         <!-- Paragraph -->
         <p>Tutorialspoint is a free online learning platform where you can learn various programming and technology-related subjects. We aim to provide high-quality education to everyone, everywhere.</p>
      </main>
   </div>
</body>
</html>