在设计网页时，我们必须以优雅的方式排列网页元素。它们应该易于用户导航且简单。它提供了一种以结构良好的方式排列这些元素的方法。 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中文网其他相关文章！
