搜索

首页 >web前端 >html教程 >HTML布局

HTML布局

王林
王林原创
2024-09-04 16:15:39514浏览

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

输出:

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>

输出:

HTML布局

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>

输出:

HTML布局

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：无需单击详细信息元素。

HTML布局

输出 2：单击详细信息元素后。

HTML布局

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>

输出:

HTML布局

所以我们的最终代码及其输出将如下所示，

代码：




 EduCba 






 Header Section 









 Section Part 


 Some Text 






 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 布局元素。

以上是HTML布局的详细内容。更多信息请关注PHP中文网其他相关文章！

html define for while using default this kind
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：HTML Frames下一篇：Dataset in HTML

相关文章

查看更多