HTML布局-html教程-PHP中文网

首页

web前端

html教程

HTML布局

王林

Sep 04, 2024 pm 04:15 PM

htmlhtml5HTML TutorialHTML PropertiesHTML tags

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

输出:

HTML布局

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>

输出:

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>

<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>

输出:

HTML布局

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

HTML布局

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

HTML布局

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>

输出:

HTML布局

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

代码：



 EduCba 




 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>