一、网页布局
网页布局有很很多种方法，一般可分为下列一些一部分：头部区域、菜单栏导航栏区域、內容区域、底端区域。
1. 头部区域
头部区域坐落于全部网页的顶端，一般用以设定网页的文章标题或是网页的 logo：
例
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>CSS 新项目(runoob.com)</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<style>
body {
margin: 0;
}
/* 头部款式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class=\"header\">
<h1>头部区域</h1>
</div>
</body>
</html>
2. 菜单栏导航栏区域
菜单栏导航菜单包括了一些连接，可以帮助客户访问别的网页页面：
例
/* 导航菜单 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航栏连接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 改动色调 */
.topnav a:hover {
background-color: #ddd;
color: black;
}3. 內容区域
内容区域一般有三种方式:
- 1 列：一般用以手机端。
- 2 列：一般用以平板电脑机器设备。
- 3 列：一般用以 PC 桌面上机器设备。
不相同的列
不相等的列一般是在正中间部位设定內容区域，这方面也是较大最首要的，上下2次侧可以当作一些导航栏等相关内容，这三列加上去的总宽是 100％。
例：
.column {
float: left;
}
/* 两侧栏的总宽 */
.column.side {
width: 25%;
}
/* 正中间列总宽 */
.column.middle {
width: 50%;
}
/* 响应式网站 - 总宽低于600px时设定左右合理布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
4. 底端区域
底部区域在网页的最下边，一般包括版权信息和联系电话等。
例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
二、响应式网站网页布局
根据以上等学习培训大家来构建一个响应式网站等网页页面，页面的格局会依据显示屏的多少来调节：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>新项目</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 头部文章标题 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 导航菜单 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航条连接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接色调改动 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 建立多列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右边栏 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 图象一部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章内容信用卡实际效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后边清除浮动 */
.row:after {
content: \"\";
display: table;
clear: both;
}
/* 底端 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 响应式网站 - 显示屏尺寸低于 800px 时，多列合理布局改成左右合理布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式网站 -显示屏尺寸低于 400px 时，导航栏等合理布局改成左右合理布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class=\"header\">
<h1>我的网页</h1>
<p>重置浏览器尺寸查询实际效果。</p>
</div>
<div class=\"topnav\">
<a href=\"#\">连接</a>
<a href=\"#\">链接</a>
<a href=\"#\">连接</a>
<a href=\"#\" style=\"float:right\">链接</a>
</div>
<div class=\"row\">
<div class=\"leftcolumn\">
<div class=\"card\">
<h2>标题</h2>
<h5>xx 年xx月 xx日</h5>
<div class=\"fakeimg\" style=\"height:200px;\"><img src=\"img/bird.png\"></div>
<p>文字...</p>
<p>当热忱变为习惯性，害怕和焦虑即无处容身。缺乏热忱的人都没有明确的目标。热忱使想像的车轮子旋转。一个人缺乏热忱就象汽车沒有车用汽油。
擅于分配玩耍和工作中，二者维持热忱，便是最开心的人。热忱使普通的话题讨论越来越栩栩如生。！</p>
</div>
<div class=\"card\">
<h2>标题</h2>
<h5>xx 年 xx 月xx日</h5>
<div class=\"fakeimg\" style=\"height:200px;\"><img src=\"img/border.png\"></div>
<p>文字...</p>
<p>一切事没法注重细节，只有追求完美量力而行。那样心无工作压力，出去的結果反倒会更好！</p>
</div>
</div>
<div class=\"rightcolumn\">
<div class=\"card\">
<h2>关于我们</h2>
<div class=\"fakeimg\" style=\"height:100px;\"></div>
<p>6666</p>
</div>
<div class=\"card\">
<h3>热文</h3>
<div class=\"fakeimg\"><img src=\"img/fy2_wp.png\"></div>
</div>
<div class=\"card\">
<h3>关注我</h3>
<p>本网站公布的体系与手机软件仅为本人学习培训检测应用，请在免费下载后24钟头内删掉，
不可用以一切商业行为，不然后果很严重，请适用选购授权软件！如侵害到您的利益,请立即通告大家,我们会妥善处理。
申明：为非赢利型网站 不接收一切冠名赞助和广告宣传。</p>
</div>
</div>
</div>
<div class=\"footer\">
<h2>底端地区</h2>
</div>
</body>
</html>三、汇总
文中主要是讲解了Html的网页界面设计构造，如何去掌握互联网的合理布局，详细介绍了普遍的移动设备的三种网页页面方式，最终根据一个好项目，汇总以前解读的內容。
编码非常简单，期待可以幫助你学习培训。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
