在設計網頁時，我們必須以優雅的方式排列網頁元素。它們應該易於用戶導航且簡單。它提供了一種以結構良好的方式排列這些元素的方法。 HTML 佈局為網頁提供了非常漂亮的外觀，並提供了一種簡單的設計方法。這是一種使用簡單的標準 HTML 標籤來設計 Web 元素的簡單方法。 HTML 提供了各種佈局元素，我們可以使用它們來設計網頁的各個部分。
HTML 版面元素
在本文中，我們將看到不同的佈局元素及其範例。使用這些元素，我們將設計一個類似報紙的簡單結構。
1.
此元素用於定義網頁的標題。它包含頁面標題或一些徽標或可能是介紹性內容。
代碼 ：
<!DOCTYPE html>
<html>
<head>
<title> EduCba </title>
</head>
<body>
<header style = "height: 100px; width: 100%; background-color: #607D8B;" >
<h1 style=" color: #fff; text-align: center; padding-top: 25px; font-size: 30px;" > Header Section</h1>
</header>
</body>
</html>
輸出 :
2.
該元素將包含選單清單的連結。該元素就像不同導航連結的容器。連結將位於不同頁面或同一頁面。
代碼 ：
讓我們在上一個範例的標題下方新增一個導覽元素。新增部分進入
元素和
標題部分正下方的部分。
<head>
<style>
li{
display: inline-flex;
padding: 25px
}
ul{
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
輸出 :
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>
<body>
<div class = "main" >
<section>
<h2> Section Part </h2>
<p> Some Text </p>
</section>
<article>
<h2> Article Part </h2>
<p> Some Detailed Text </p>
</article>
<aside>
<h2> Sidebar Part </h2>
<p> This will contain static part or anything like advertisement etc. </p>
</aside>
</div>
</body>
輸出 :
6.
此元素向使用者顯示有關網頁的額外詳細資訊。這可能包含用戶可選的附加資訊。預設情況下，此元素提供單擊時顯示或隱藏詳細資訊的功能。
7.
此元素與 一起使用元素。要隱藏並點擊後顯示的資訊將在此標籤中。該元素將位於詳細資訊元素內。
代碼 ：
讓我們在現有範例中加入詳細資訊元素和摘要元素。在
中的旁白部分和文章元素部分之後加入以下程式碼標籤。
<body>
<details>
<summary> Summary: click here to show details</summary>
<p> Details: Upon clicking summary element, details will be shown to the user </p>
</details>
</body>
<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 style = " color: #fff; text-align: center; padding-top: 10px; font-size: 30px; " >Footer Section</h3>
<p> © Copyright ( Year ) </p>
</footer>
輸出 :
所以我們的最終程式碼及其輸出將如下所示，
代碼：
EduCba
Article Part
Some Detailed Text
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 style = " color: #fff; text-align: center; padding-top: 10px; font-size: 30px; " >Footer Section</h3>
<p> © Copyright ( Year ) </p>
</footer>
輸出 :
結論
因此 HTML 版面配置元素在設計網頁時非常有用。它們幫助開發人員設計結構良好的網頁。正確使用這些佈局元素可以提高網頁的閱讀體驗。我們已經詳細了解了大多數主要 HTML 佈局元素。
以上是HTML佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
