阅读目录
- 示例 1
- 示例 2
- 头部区域
- 菜单导航区域
- 内容区域
- 不相等的列
- 底部区域
- 响应式网页布局
参考文档：https://www.runoob.com/css3/css3-user-interface.html
示例 1
DOCTYPE html>
CSS 网页布局
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* 头部样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* 导航条 */
.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;
}
/* 创建三个相等的列 */
.column {
float: left;
width: 33.33%;
}
/* 列后清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
头部区域
重置浏览器大小查看效果。
链接
链接
链接
第一列
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
第二列
现在更高级的方式是使用 CSS Flexbox 来创建列的布局，但 Internet Explorer 10 及更早的版本不支持该方式， IE6-10 可以使用浮动方式。
第三列
不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。
不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两侧可以作为一些导航等相关内容，这三列加起来的宽度是 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%;
}
}
DOCTYPE html>
CSS 网页布局 - 菜鸟教程(runoob.com)
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* 头部样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* 导航条 */
.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;
}
/* 创建三个不相等的列 */
.column {
float: left;
padding: 10px;
}
/* 左右两侧宽度 */
.column.side {
width: 25%;
}
/* 中间区域宽度 */
.column.middle {
width: 50%;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
.column.side,
.column.middle {
width: 100%;
}
}
头部区域
重置浏览器大小查看效果。
链接
链接
链接
左侧栏
钓鱼、遛鸟，那是别人的退休生活。
来北京三年多，老霍和老伴还是没能适应这里的气候。
湖南人爱吃辣，可是到了北京却总是便秘，怎么都找不到原因。
老霍坚持认为这不是自己老了身体机能跟不上，而是因为“北京的水土不好”。电话里听到老家谁谁因为便秘脑溢血没抢救过来，老霍又气又怕。
女儿2019年春节前检查出怀孕，为了保胎就没回家过年。4月份开春，老霍就“举家”北上，过起了“老漂”的生活。
主区域内容
其实老伴早就提出要帮女儿带孩子，可是真到了这个节骨眼上，两个人话里话外都打着退堂鼓。
老霍退休前在单位是个小领导，身边人多少也前呼后拥的招呼着，日子久了还有点领导架子。当时单位突然决定“减员”，老霍也正好到了青黄不接的年纪，便狠了狠心交了退休申请。
之后有两三年的光景，老霍都适应不了突然失去了“领导光环”的日子，和老伴别别扭扭的好不容易才找到了相处的新平衡。
而这岌岌可危的平衡，很可能就被北京之行打破了。
右侧栏
纵然是舍不得那些老邻居和家里的一切，但是想想女儿一再强调“孩子上了幼儿园之后就把你们送回去”，况且还能天天见到自己的大外孙，一切也都不是什么难熬的事情了。
女婿是做什么工作的，老霍到现在也没弄明白，只知道他早出晚归披星戴月，自己也不好意思过问太多。
底部区域在网页的最下方，一般包含版权信息和联系方式等。
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
DOCTYPE html>
CSS 网页布局 - 菜鸟教程(runoob.com)
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* 头部样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* 导航条 */
.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;
}
/* 创建三个相等的列 */
.column {
float: left;
padding: 10px;
}
/* 左右两侧宽度 */
.column.side {
width: 25%;
}
/* 中间区域宽度 */
.column.middle {
width: 50%;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
/* 底部样式 */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
头部区域
重置浏览器大小查看效果。
链接
链接
链接
左侧栏
钓鱼、遛鸟，那是别人的退休生活。
来北京三年多，老霍和老伴还是没能适应这里的气候。
湖南人爱吃辣，可是到了北京却总是便秘，怎么都找不到原因。
老霍坚持认为这不是自己老了身体机能跟不上，而是因为“北京的水土不好”。电话里听到老家谁谁因为便秘脑溢血没抢救过来，老霍又气又怕。
女儿2019年春节前检查出怀孕，为了保胎就没回家过年。4月份开春，老霍就“举家”北上，过起了“老漂”的生活。
主区域内容
其实老伴早就提出要帮女儿带孩子，可是真到了这个节骨眼上，两个人话里话外都打着退堂鼓。
老霍退休前在单位是个小领导，身边人多少也前呼后拥的招呼着，日子久了还有点领导架子。当时单位突然决定“减员”，老霍也正好到了青黄不接的年纪，便狠了狠心交了退休申请。
之后有两三年的光景，老霍都适应不了突然失去了“领导光环”的日子，和老伴别别扭扭的好不容易才找到了相处的新平衡。
而这岌岌可危的平衡，很可能就被北京之行打破了。
右侧栏
纵然是舍不得那些老邻居和家里的一切，但是想想女儿一再强调“孩子上了幼儿园之后就把你们送回去”，况且还能天天见到自己的大外孙，一切也都不是什么难熬的事情了。
女婿是做什么工作的，老霍到现在也没弄明白，只知道他早出晚归披星戴月，自己也不好意思过问太多。
底部区域
通过以上学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：
* {
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%;
}
}
DOCTYPE html>
CSS 网页布局
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 0px;
margin: 0 auto;
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%;
}
}
头部区域
重置浏览器大小查看效果。
链接
链接
链接
链接
文章标题
2019 年 4 月 17日
图片
一些文本...
菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！
文章标题
2019 年 4 月 17日
图片
一些文本...
菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！
关于我
图片
关于我的一些信息..
热门文章
图片
图片
图片
关注我
一些文本...
底部区域
