慕课网《如何用CSS进行网页布局》视频学习笔记
[toc]
授课老师：江老实 。
Web前端工程师，资深前端攻城师，深受欢迎的前端领路人，多家大型网站的建造者，主攻前端技术开发、网页UI设计，影像技术达人，古典音乐发烧友，儒雅先生。
一、内容简介
网页可以自适应。
网页的长度理论上可以没有限制
常见的网页分为：头部、主体（主体可以再分栏）。
分栏又称为分列，常见的布局分为：一列布局、二列布局、三列布局。
二、一列布局
下面我们写一个固定宽度的一列布局。
div 水平居中的 css 样式设置：给 div 设置 margin:0 auto。
div 的宽度如果不定义，它就是一个通栏的 div。
示例代码：
<style>
body{ margin:; padding:; font-size:px}
div{
text-align:center;
font-weight:bold
}
.head, .main, .footer{
width:px;
margin: auto
}
.head{
height:px;
background:#ccc
}
.main{
height:px;
background:#FCC
}
.footer{
height:px;
background:#9CF
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)