大家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS网页布局。
一、网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
1. 头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
例
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>CSS 项目(runoob.com)</title> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7<style> 8body { 9 margin: 0; 10} 11 12/* 头部样式 */ 13.header { 14 background-color: #f1f1f1; 15 padding: 20px; 16 text-align: center; 17} 18</style> 19</head> 20<body> 21 22<div class="header"> 23 <h1>头部区域</h1> 24</div> 25 26</body> 27</html>
2. 菜单导航区域
菜单导航条包含了一些链接，可以引导用户浏览其他页面：
例
1/* 导航条 */ 2.topnav { 3 overflow: hidden; 4 background-color: #333; 5} 6 7/* 导航链接 */ 8.topnav a { 9 float: left; 10 display: block; 11 color: #f2f2f2; 12 text-align: center; 13 padding: 14px 16px; 14 text-decoration: none; 15} 16 17/* 链接 - 修改颜色 */ 18.topnav a:hover { 19 background-color: #ddd; 20 color: black; 21}
3. 内容区域
内容区域一般有三种形式:
-
1 列：一般用于移动端。
-
2 列：一般用于平板设备。
-
3 列：一般用于 PC 桌面设备。
不相等的列
不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。
例：
1.column { 2 float: left; 3} 4 5/* 左右侧栏的宽度 */ 6.column.side { 7 width: 25%; 8} 9 10/* 中间列宽度 */ 11.column.middle { 12 width: 50%; 13} 14 15/* 响应式布局 - 宽度小于600px时设置上下布局 */ 16@media screen and (max-width: 600px) { 17 .column.side, .column.middle { 18 width: 100%; 19 } 20} 21
4. 底部区域
底部区域在网页的最下方，一般包含版权信息和联系方式等。
例
1.footer { 2 background-color: #F1F1F1; 3 text-align: center; 4 padding: 10px; 5}
二、响应式网页布局
通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：
案例
1 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="utf-8"> 6<title>项目</title> 7<style> 8* { 9 box-sizing: border-box; 10} 11 12body { 13 font-family: Arial; 14 padding: 10px; 15 background: #f1f1f1; 16} 17 18/* 头部标题 */ 19.header { 20 padding: 30px; 21 text-align: center; 22 background: white; 23} 24 25.header h1 { 26 font-size: 50px; 27} 28 29/* 导航条 */ 30.topnav { 31 overflow: hidden; 32 background-color: #333; 33} 34 35/* 导航条链接 */ 36.topnav a { 37 float: left; 38 display: block; 39 color: #f2f2f2; 40 text-align: center; 41 padding: 14px 16px; 42 text-decoration: none; 43} 44 45/* 链接颜色修改 */ 46.topnav a:hover { 47 background-color: #ddd; 48 color: black; 49} 50 51/* 创建两列 */ 52/* Left column */ 53.leftcolumn { 54 float: left; 55 width: 75%; 56} 57 58/* 右侧栏 */ 59.rightcolumn { 60 float: left; 61 width: 25%; 62 background-color: #f1f1f1; 63 padding-left: 20px; 64} 65 66/* 图像部分 */ 67.fakeimg { 68 background-color: #aaa; 69 width: 100%; 70 padding: 20px; 71} 72 73/* 文章卡片效果 */ 74.card { 75 background-color: white; 76 padding: 20px; 77 margin-top: 20px; 78} 79 80/* 列后面清除浮动 */ 81.row:after { 82 content: ""; 83 display: table; 84 clear: both; 85} 86 87/* 底部 */ 88.footer { 89 padding: 20px; 90 text-align: center; 91 background: #ddd; 92 margin-top: 20px; 93} 94 95/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */ 96@media screen and (max-width: 800px) { 97 .leftcolumn, .rightcolumn { 98 width: 100%; 99 padding: 0; 100 } 101} 102 103/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */ 104@media screen and (max-width: 400px) { 105 .topnav a { 106 float: none; 107 width: 100%; 108 } 109} 110</style> 111</head> 112<body> 113 114<div class="header"> 115 <h1>我的网页</h1> 116 <p>重置浏览器大小查看效果。</p> 117</div> 118 119<div class="topnav"> 120 <a href="#">链接</a> 121 <a href="#">链接</a> 122 <a href="#">链接</a> 123 <a href="#" style="float:right">链接</a> 124</div> 125 126<div class="row"> 127 <div class="leftcolumn"> 128 <div class="card"> 129 <h2>文章标题</h2> 130 <h5>xx 年xx月 xx日</h5> 131 <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div> 132 <p>文本...</p> 133 <p>当热诚变成习惯，恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。 134 善于安排玩乐和工作，两者保持热诚，就是最快乐的人。热诚使平凡的话题变得生动。！</p> 135 </div> 136 <div class="card"> 137 <h2>文章标题</h2> 138 <h5>xx 年 xx 月xx日</h5> 139 <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div> 140 <p>文本...</p> 141 <p>一切事无法追求完美，唯有追求尽力而为。这样心无压力，出来的结果反而会更好！</p> 142 </div> 143 </div> 144 <div class="rightcolumn"> 145 <div class="card"> 146 <h2>关于我</h2> 147 <div class="fakeimg" style="height:100px;"></div> 148 <p>6666</p> 149 </div> 150 <div class="card"> 151 <h3>热门文章</h3> 152 <div class="fakeimg"><img src="img/fy2_wp.png">\</div> 153 154 </div> 155 <div class="card"> 156 <h3>关注我</h3> 157 <p>本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除， 158 不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。 159 160声明：为非赢利性网站 不接受任何赞助和广告。</p> 161 </div> 162 </div> 163</div> 164 165<div class="footer"> 166 <h2>底部区域</h2> 167</div> 168 169</body> 170</html>
三、总结
本文主要介绍了Html的网页布局结构，如何去了解网络的布局，介绍了常见的移动设备的三种网页模式，最后通过一个小项目，总结之前讲解的内容。
代码很简单，希望可以帮助你学习。