页面布局是图形设计的一部分, 用于处理页面上视觉元素的排列。页面布局用于使网页看起来更好。它建立了整体外观, 相对重要性以及图形元素之间的关系, 以实现信息和眼睛运动的顺畅流动, 从而获得最大的效果或影响。
页面布局信息：
- 标头：页面顶部使用的前端部分。 <header>标记用于在网页中添加标题部分。
- 导航栏：导航栏与菜单列表相同。它用于使用超链接显示内容信息。
- 索引/边栏：它包含其他信息或广告, 并不一定总是需要添加到页面中。
- 内容部分：内容部分是显示内容的主要部分。
- 页脚：页脚部分包含联系信息和与网页相关的其他查询。页脚部分始终放在网页的底部。 <footer>标记用于在网页中设置页脚。
例子：
<!DOCTYPE html>
< html >
< head >
< title >Page Layout</ title >
< style >
.head1 {
font-size:40px;
color:#009900;
font-weight:bold;
}
.head2 {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
body {
margin: 0 auto;
background-position:center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding:10px 0px 10px 0px;
color:white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.body_sec {
margin-left:20px;
}
</ style >
</ head >
< body >
<!-- Header Section -->
< header >
< div class = "head1" >lsbin</ div >
< div class = "head2" >A computer science portal for geeks</ div >
</ header >
<!-- Menu Navigation Bar -->
< div class = "menu" >
< a href = "#home" >HOME</ a >
< a href = "#news" >NEWS</ a >
< a href = "#notification" >NOTIFICATIONS</ a >
< div class = "menu-log" >
< a href = "#login" >LOGIN</ a >
</ div >
</ div >
<!-- Body section -->
< div class = "body_sec" >
< section id = "Content" >
< h3 >Content section</ h3 >
</ section >
</ div >
<!-- Footer Section -->
< footer >Footer Section</ footer >
</ body >
</ html >输出如下：
