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>
列印頁面
上一頁
下一頁
廣告