HTML 网页布局
网站通常在多栏中显示内容,HTML 网页布局搞定网页显示的大体框架。
网站通常在多栏中显示内容,HTML 网页布局搞定网页显示的大体框架。
常见的网页布局
- 上中下布局:整个网页分为页头、内容、页脚三部分
- 无导航的上中下布局
- 带左侧导航的上中下布局
- 带右侧导航的上中下布局
- 侧边布局:整个网页主体分为左右两列,一般左侧为导航区,左侧为内容区。内容区根据实际情况也会采用上中下布局。
网页布局发展经历了很多,比如使用表格 table 布局,使用 div 元素布局等,但是随着 html5 语义元素的出现,使用语义元素的布局更容易阅读和理解,更具有通用型。
无导航的上中下网页布局
上中下是很常见的网页布局,整个网页分为页头、内容、页脚三部分,常用于各种 CMS 网站和博客网站的内容页面,页头通常是网站 logo 和顶部导航,内容区是文章,页脚则是版权声明等信息。
代码如下:
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<title>上中下网页布局</title>
<style>
* {
color: #fff;
text-align: center;
margin: 0;
padding: 0;
}
header,
footer {
height: 64px;
background-color: #7dbcea;
line-height: 64px;
}
section {
height: 320px;
background-color: rgba(16, 142, 233, 1);
line-height: 320px;
}
</style>
</head>
<body>
<header>
<h2>页头</h2>
</header>
<section>
<h2>内容</h2>
</section>
<footer>
<h2>页脚</h2>
</footer>
</body>
</html>
带左侧导航的上中下网页布局
同样是上中下布局,只是内容区左侧增加左侧导航。如果留有边距,则应用于展示类网站,比如商品展示页面;如果两边不留边距,则应用于应用型网站,比如管理后台。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<title>带左侧导航的上中下布局</title>
<style>
* {
color: #fff;
text-align: center;
margin: 0;
padding: 0;
}
header,
footer {
height: 64px;
background-color: #7dbcea;
line-height: 64px;
}
section {
height: 320px;
background-color: rgba(16, 142, 233, 1);
line-height: 320px;
display: flex;
}
section>aside {
width: 320px;
background-color: #3ba0e9;
}
section>article {
flex: 1;
}
</style>
</head>
<body>
<header>
<h2>页头</h2>
</header>
<section>
<aside>
<h2>左侧导航</h2>
</aside>
<article>
<h2>内容</h2>
</article>
</section>
<footer>
<h2>页脚</h2>
</footer>
</body>
</html>
带右侧导航的上中下网页布局
这个和带左侧导航的上中下网页布局相同,只是导航区域从左边到了右边。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<title>带右侧导航的上中下布局</title>
<style>
* {
color: #fff;
text-align: center;
margin: 0;
padding: 0;
}
header,
footer {
height: 64px;
background-color: #7dbcea;
line-height: 64px;
}
section {
height: 320px;
background-color: rgba(16, 142, 233, 1);
line-height: 320px;
display: flex;
flex-direction: row-reverse;
}
section>aside {
width: 320px;
background-color: #3ba0e9;
}
section>article {
flex: 1;
}
</style>
</head>
<body>
<header>
<h2>页头</h2>
</header>
<section>
<aside>
<h2>右侧导航</h2>
</aside>
<article>
<h2>内容</h2>
</article>
</section>
<footer>
<h2>页脚</h2>
</footer>
</body>
</html>
注意上面的代码,导航显示在左边和右边,并没有调整 html 代码,而是完全通过 CSS 控制,所有 CSS 是很强大的,完全可能在一套 html 代码的情况下,实现不同的布局。 在 CSS 教程中可以了解更多 CSS 的知识。
侧边布局
在侧边布局中,整个网页主体分为左右两列,一般左侧为导航区,左侧为内容区。内容区根据实际情况也会采用上中下布局。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<title>侧边布局</title>
<style>
* {
color: #fff;
text-align: center;
margin: 0;
padding: 0;
}
body {
display: flex;
}
body>aside {
width: 320px;
background-color: #3ba0e9;
line-height: 448px;
}
body>section {
flex: 1;
}
header,
footer {
height: 64px;
background-color: #7dbcea;
line-height: 64px;
}
article {
height: 320px;
background-color: rgba(16, 142, 233, 1);
line-height: 320px;
}
</style>
</head>
<body>
<aside>
<h2>左侧导航</h2>
</aside>
<section>
<header>
<h2>页头</h2>
</header>
<article>
<h2>内容</h2>
</article>
<footer>
<h2>页脚</h2>
</footer>
</section>
</body>
</html>
总结
网页布局提供了一个网页的基础框架,我们可以根据自己的实际情况调整。真实的网页布局不是这么简单,但是基本上有基本的框架衍生而来。采用一个基本框架,然后在局部中可能会套用另外的框架布局,从而形成一个自己的框架。