如何在 HTML 中建立浮動佈局？

佈局使網頁看起來更好，並排列網頁上的視覺元素。它建立了網頁的整體外觀。

HTML 佈局指定了網頁上不同元件的排列方式。有很多 HTML 元素定義了網頁的不同部分。

以下是用於 HTML 佈局的 HTML 元素：

序號 屬性及描述
1

header

它指定網頁內容一部分的標題。
2

section

它表示網頁上的內容部分。
3

nav

它指定網頁上導航連結的容器。
4

index

它指定附加資訊，並不總是需要新增到網頁上。
5

aside

它指定網頁內容之外的內容。
6

footer

它指定網頁上某一部分的頁尾。

以下是用於 HTML 網頁佈局的 CSS 屬性：

  • CSS float 屬性

  • CSS flexbox

  • CSS 框架

  • CSS 網格

  • HTML 表格

我們使用 CSS 屬性 float 來在 HTML 中建立浮動佈局。float 屬性允許我們將元素浮動到網頁的左側或右側，並允許文字環繞物件（影像或框）。float 用於建立網頁佈局。

以下是 float 屬性的屬性

  • left - 元素浮動到網頁內容的左側。

  • right - 元素浮動到網頁內容的右側。

  • none - 元素不浮動。

語法

<style= “float:right”>

示例 1

下面是一個在網頁上浮動元素的示例。

我們可以在網頁上浮動影像、文字和其他內容。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <h1><span style= "color: red;float:right">Mr. Bean</span></h1>
   <p>
      Mr. Bean is a British sitcom created by Rowan Atkinson and Richard Curtis, produced by Tiger Aspect and starring Atkinson as the title character.
   </p>
   <p>
      <img src="" style="float:left;width:80px;height:80px;">
      Mr. Bean is a British sitcom created by Rowan Atkinson and Richard Curtis, produced by Tiger Aspect and starring Atkinson as the title character.
   </p>
</body>
</html>

以下是網頁的示例 HTML 佈局。

示例 2

下面是用於 HTML 佈局的所有不同元素的示例。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .head{
         font-size:17px;
         margin-left:10px;
         margin-bottom:15px;
      }
      body {
         margin: 0 auto;
         background-position:center;
         background-size: contain;
      }
      .menu {
         position:static;
         top: 0;
         background-color:skyblue;
         padding:10px 0px 10px 0px;
         color:white;
         margin: 0 auto;
         overflow: hidden;
      }
      .menu a {
         float: left;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 20px;
      }
      .menu-log {
         right: auto;
         float: right;
      }
      footer {
         width: 100%;
         bottom: 0px;
         background-color:slategrey;
         color: #fff;
         position: absolute;
         padding-top:20px;
         padding-bottom:50px;
         text-align:center;
      }
      .body{
         margin-left:10px;
      }
      .aside{
         right:inherit;
         float: right;
         width: 20%;
   }
</style>
</head>
<body>
   <header>
      <div class="head"><h1><span style="color: red">NPTEL</span></h1> Online Learning Initiatives by IITs and IISc funded by MoE, Govt. of India</div>
   </header>
   <div class="menu">
      <a href="#home">HOME</a>
      <a href="#course">COURSE</a>
      <a href="#help">HELP</a>
      <a href="#about">ABOUT</a>
      <a href="#settings">SETTINGS</a>
   <div class="menu-log">
      <a href="#login">LOGIN</a>
   </div>
   </div>
   <div class = "body">
      <section id="Content">
         <h3>1.6 crore+ enrollments<br>
         15 lakhs+ exam registrations<br>
         4500+ LC colleges<br>
         3500+ MOOCs completed<br>
         60+ Industry associates</h3>
      </section>
   </div>
   <div class="aside"><aside>1.3 Billion+ views<br>
      37 lakhs+ YouTube subscribers<br>
      2300+ unique courses available for self study</aside>
   </div>
   <footer style="font-size: 20px">Documents
      Careers
      Help Videos
      Live Sessions
      Information on NPTEL semesters
   </footer>
</body>
</html>

以下是上述示例程式的輸出。

示例 3

您可以嘗試執行以下程式碼以在 HTML 中建立上述浮動佈局。

<!DOCTYPE html>
<html>
<head>
   <style>
      div.mycontent {
         width: 100%;
         border: 1px solid green;
      }
      header, footer {
         padding: 1em;
         color: green;
         background-color: #FAFAFA;
         text-align: left;
      }
      nav {
         float: left;
         max-width: 150px;
         padding: 1em;
      }
      nav ul {
         list-style-type: none;
         padding: 0;
      }
      article {
         margin-left: 10px;
         border-left: 1px solid gray;
         padding: 1em;
         overflow: hidden;
      }
   </style>
</head>
<body>
   <div class="mycontent">
      <header>
         <h1>Tutorialspoint.com</h1>
         <h3>Simply Easy Learning</h3>
      </header>
      <nav>
         <ul>
            <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
            <li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
            <li><a href="/codingground.htm">Coding Ground</a></li>
            <li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
            <li><a href="/online_dev_tools.htm">Tools</a></li>
         </ul>
      </nav>
      <article>
         <h1>About Us</h1>
         <p>This is demo content.</p>
         <p>This is demo content.</p>
         <p>This is demo content.</p>
         <p>This is demo content.</p>
      </article>
      <footer>Add the footer content here</footer>
   </div>
</body>
</html>

更新於： 2022-10-19

3K+ 閱讀量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告