HTML - 使用 CSS 进行布局

上一页
下一页

使用 CSS 进行 HTML 布局包括为网页创建结构化内容，然后使用 CSS 属性对其进行样式设置，从而为页面创建视觉上吸引人的设计。

为了正确理解本章内容，您必须对 CSS 有基本的了解。请查看我们免费的CSS 教程。

使用 CSS 属性进行 HTML 布局

以下 CSS 属性用于设计 HTML 布局

  • CSS float: 指定元素是否应该向左、向右等浮动
  • CSS display: 指定 HTML 元素的显示行为，它具有以下值。
    • Flex: display 属性的 flex 值指定了一种布局模型，用于轻松对齐和分配容器中的空间。
    • Grid: display 属性的 grid 值指定了一种二维布局模型，用于对齐元素。

使用 CSS float 属性进行 HTML 布局

CSS 的 float 属性允许控制网页组件的位置。当元素浮动时，它将从文档的正常流程中移除，并移至指定的位置，例如左或右。

在下面的示例中，<nav> 和 <article> 标签已使用 CSS 的 float: left 属性向左浮动。

<!DOCTYPE html>
<html>
<head>
   <title>The float Property</title>
   <style>
   * {
      box-sizing: border-box;
   }
   header {
      font-size: 25px;
      color: whitesmoke;
      padding: 1px;
      text-align: center;
      background-color: lightslategray;
   }
   nav {
      float: left;
      width: 20%;
      height: 250px;
      background: lightgray;
      padding: 20px;
   }
   nav ul {
      padding: 1px;
   }
   article {
      float: left;
      padding: 20px;
      width: 80%;
      background-color: lightyellow;
      height: 250px;
   }
   footer {
      background-color: lightslategray;
      padding: 10px;
      text-align: center;
      color: white;
      padding-top: 20px;
      padding-bottom: 10px;
   }
   footer a {
      margin: 10px;
   }
   footer p {
      margin-top: 30px;
   }
</style>
</head>
<body>
   <!--header segment-->
   <header>
      <div>
        <p>Tutorialspoint</p>
      </div>
   </header>
   <section>
   <!--Menu Navigation segment-->
   <nav>
         <ul>
            <li>
               <a href="#">Home</a>
            </li>
            <li>
               <a href="#">Jobs</a>
            </li>
            <li>
               <a href="#">Library</a>
            </li>
            <li>
               <a href="#">Articles</a>
            </li>
            <li>
               <a href="#">Certification</a>
            </li>
         </ul>
      </nav>
      <!--Content segment-->
      <article>
         <h1>Welcome to Tutorials point</h1>
         <p> 
            Tutorialspoint.com is a dedicated website 
            to provide quality online education in 
            domains of Computer Science, Information 
            Technology, Programming Languages, 
            and other Engineering as well as Management 
            subjects. 
         </p>
      </article>
   </section>
   <!--Footer segment-->
   <footer>
      <div>
         <p>
            Copyrights © TUTORIALS POINT (INDIA) 
            PRIVATE LIMITED. All rights reserved.
         </p>
      </div>
   </footer>
</body>
</html>

使用 CSS flexbox 属性进行 HTML 布局

CSS flexbox（也称为弹性盒布局）是设计布局的更有效方法。它允许开发人员排列和分配网页多个组件之间的空间。要使用 Flexbox 的功能，我们需要将display 属性 设置为 flex 或 inline-flex。

注意：我们在网站上有一个专门的Flexbox 教程。请参考该教程以更好地理解。

下面的示例说明了如何使用 CSS 的 display: flex 属性来设计网页布局。

<!DOCTYPE html>
<html>
<head>
   <style>
      header {
         text-align: center;
         background-color: lightslategray;
         font-size: 50px;
         color: whitesmoke;
      }
      .contain {
         display: flex;
         background: lightgray;
         height: 250px;
         width: 100%;
      }
      .flex-item1 {
         flex-basis: 25%;
         background-color: lightslategray;
         color: whitesmoke;
         margin: 10px;
         padding: 5px;
         letter-spacing: 1px;
      }
      .flex-item2 {
         flex-basis: 75%;
         background-color: lightslategray;
         margin: 10px;
         padding: 5px;
         letter-spacing: 1px;
      }
      footer {
         background-color: lightslategray;
         text-align: center;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <header>
      <div>Tutorialspoint</div>
   </header>
   <div class = "contain">
      <div class = "flex-item1">
         <ul>
            <li>
               <a href="#">Home</a>
            </li>
            <li>
               <a href="#">Jobs</a>
            </li>
            <li>
               <a href="#">Library</a>
            </li>
            <li>
               <a href="#">Articles</a>
            </li>
            <li>
               <a href="#">Certification</a>
            </li>
         </ul>
      </div>
      <div class = "flex-item2">
         <h2>Welcome to Tutorials point</h2>
         <p>
            Tutorialspoint.com is a dedicated website 
            to provide quality online education in 
            the domains of Computer Science, 
            Information Technology, Programming 
            Languages, and other Engineering as 
            well as Management subjects. 
         </p>
      </div>
   </div>
   <footer>
      <div>
         Copyrights © TUTORIALS POINT (INDIA) 
         PRIVATE LIMITED. All rights reserved.
      </div>
   </footer>
</body>
</html>

使用 CSS Grid 属性进行 HTML 布局

CSS grid 布局是 HTML 布局设计技术的另一个补充，它定义了一个由行和列组成的网格。它还提供控制网页内容大小和位置的功能。

在这个示例中，我们将使用 CSS 的 display: grid 属性来设计相同的网页布局。

<!DOCTYPE html>
<html>
<head>
   <style>
      header {
         text-align: center;
         background-color: lightslategray;
         font-size: 50px;
         color: whitesmoke;
      }
      .contain {
         display: grid;
         background-color: lightgray;
         grid-template-columns: auto auto;
         padding: 5px;
         grid-gap: 5px;
         height: 250px;
      }
      .item1 {
         background-color: lightslategray;
         margin: 5px;
         padding: 5px;
         letter-spacing: 1px;
      }
      .item2 {
         background-color: lightslategray;
         margin: 5px;
         padding: 5px;
         letter-spacing: 1px;
      }
      footer {
         background-color: lightslategray;
         text-align: center;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <header>
      <div>Tutorialspoint</div>
   </header>
   <div class="contain">
      <div class="item1">
         <ul>
            <li>
               <a href="#">Home</a>
            </li>
            <li>
               <a href="#">Jobs</a>
            </li>
            <li>
               <a href="#">Library</a>
            </li>
            <li>
               <a href="#">Articles</a>
            </li>
            <li>
               <a href="#">Certification</a>
            </li>
         </ul>
      </div>
      <div class="item2">
         <h2>Welcome to Tutorials point</h2>
         <p>
            Tutorialspoint.com is a dedicated website 
            to provide quality online education in 
            the domains of Computer Science, Information 
            Technology, Programming Languages, and other 
            Engineering as well as Management subjects. 
         </p>
      </div>
   </div>
   <footer>
      <div>
         Copyrights © TUTORIALS POINT (INDIA) 
         PRIVATE LIMITED. All rights reserved.
      </div>
   </footer>
</body>
</html>
打印页面
上一页
下一页
广告