HTML佈局

在設計網頁時，我們必須以優雅的方式排列網頁元素。它們應該易於用戶導航且簡單。它提供了一種以結構良好的方式排列這些元素的方法。 HTML 佈局為網頁提供了非常漂亮的外觀，並提供了一種簡單的設計方法。這是一種使用簡單的標準 HTML 標籤來設計 Web 元素的簡單方法。 HTML 提供了各種佈局元素，我們可以使用它們來設計網頁的各個部分。

HTML 版面元素

在本文中，我們將看到不同的佈局元素及其範例。使用這些元素，我們將設計一個類似報紙的簡單結構。

1.

此元素用於定義網頁的標題。它包含頁面標題或一些徽標或可能是介紹性內容。

代碼：

<title> EduCba </title>


<header style="height: 100px; width: 100%; background-color: #607D8B;">
<h1 id="Header-Section"> Header Section</h1>
</header>

輸出:

2.

該元素將包含選單清單的連結。該元素就像不同導航連結的容器。連結將位於不同頁面或同一頁面。

代碼：

讓我們在上一個範例的標題下方新增一個導覽元素。新增部分進入

元素和

標題部分正下方的部分。

<style>
li{
display: inline-flex;
padding: 25px
}
ul{
text-align: center;
}
</style>


<nav style="background-color: #607d8b70;">
<ul>
<li> <a href="#"> Navigation Link1 </a> </li>
<li> <a href="#"> Navigation Link2 </a> </li>
<li> <a href="#"> Navigation Link3 </a> </li>
</ul>
</nav>

輸出:

3.

這個元素就像網頁的主要部分。它可以包含任何類型的信息。它可以包含文字、圖像等

4.

顧名思義，該元素將包含諸如段落、某事物的任何詳細描述或任何類型的信息之類的內容。一般來說，這將是包含網頁資訊的主要部分。

5.

此元素將定義主要內容旁邊的內容，例如章節或文章。此資訊元素是可選的，一般包含附加資訊或廣告內容。

代碼：

讓我們將這三個元素加入到導覽列下方。

<style>
li { display: inline-flex;
padding: 25px
}
section{
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
}
article{
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
}
aside{
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
}
h2 , p {
text-align: center;
color: #9c27b0;
}
ul{
text-align: center;
}
</style>

<div class="main">
<section>
<h2 id="Section-Part"> Section Part </h2>
<p> Some Text </p>
</section>
<article>
<h2 id="Article-Part"> Article Part </h2>
<p> Some Detailed Text </p>
</article>
<aside>
<h2 id="Sidebar-Part"> Sidebar Part </h2>
<p> This will contain static part or anything like advertisement etc. </p>
</aside>
</div>

輸出:

6.

此元素向使用者顯示有關網頁的額外詳細資訊。這可能包含用戶可選的附加資訊。預設情況下，此元素提供單擊時顯示或隱藏詳細資訊的功能。

7.

此元素與

一起使用元素。要隱藏並點擊後顯示的資訊將在此標籤中。該元素將位於詳細資訊元素內。

代碼：

讓我們在現有範例中加入詳細資訊元素和摘要元素。在

中的旁白部分和文章元素部分之後加入以下程式碼標籤。

<details>
<summary> Summary: click here to show details</summary>
<p> Details: Upon clicking summary element, details will be shown to the user </p>
</details>

<style>
details {
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
}
details p {
font-size: 18px;
}
summary {
color: white;
font-size: 22px;
}
</style>

輸出 1：無需按一下詳細資料元素。

輸出 2：點選詳細資料元素後。

8.

每個網頁的底部都會有一個部分，稱為頁腳。這個元素定義網頁底部的頁尾部分。頁尾部分通常會包含版權、年份、聯絡資訊等。在網頁中加入頁腳是一種標準做法，它位於網頁的底部。

代碼：

讓我們在網頁底部加入頁腳。

<footer style=" height: 100px; background-color:#607D8B; width: 100%; text-align: center;">
<h3 id="Footer-Section">Footer Section</h3>
<p> © Copyright ( Year ) </p>
</footer>

輸出:

所以我們的最終程式碼及其輸出將如下所示，

代碼：

 Header Section 



  Navigation Link1  
  Navigation Link2  
  Navigation Link3  




 Section Part 
 Some Text 


 Article Part
 Some Detailed Text 


 Sidebar Part 
 This will contain static part or anything like advertisement etc. 



 Summary: click here to show details 
 Details: Upon clicking summary element, details will be shown to the user 

<footer style=" height: 100px; background-color:#607D8B; width: 100%; text-align: center;">
<h3 id="Footer-Section">Footer Section</h3>
<p> © Copyright ( Year ) </p>
</footer>

輸出:

結論

因此 HTML 版面配置元素在設計網頁時非常有用。它們幫助開發人員設計結構良好的網頁。正確使用這些佈局元素可以提高網頁的閱讀體驗。我們已經詳細了解了大多數主要 HTML 佈局元素。

以上是HTML佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！