div + css布局
1.引入
我们之前学习了两种排版，分别是表格布局和流式布局，那么我们发现这俩中排版都有自己的局限性，那么下面呢，我们就一起来学习一个比较重要的布局css+div布局。这一种布局方式是基于盒子模型的一种布局方式，在实际的开发中使用的比较多。
2.div+css布局
css+div布局是一种重要的布局方式，可以按照不同的排版方式实现不同效果的页面布局。
3.div+css布局
(1).简单的上中下结构布局
<style type="text/css">body{font-size: 25px;font-family: "宋体";color: #0000ff;text-align: center;}.containner{margin: 0 auto;height: 900px;width: 1200px;padding: 10px;background-color: #bfbfbf;}.containner .head{height: 180px;background-color: #00AA00;margin-bottom: 10px;}.containner .content{height: 600px;background-color: #b90000;margin-bottom: 10px;}.containner .foot{height: 100px;background-color: #55ff00;margin-bottom: 10px;}</style><div class="containner"><div class="head">这是头部</div><div class="content">这是内容</div><div class="foot">这是底部</div></div>
(2).简单的上左中(窄)右宽(宽)下结构布局
<style type="text/css">body{font-size: 25px;font-family: "宋体";color: #0000ff;text-align: center;}.containner{margin: 0 auto;height: 900px;width: 1200px;padding: 10px;background-color: #bfbfbf;}.containner .head{height: 180px;background-color: #00AA00;margin-bottom: 10px;}.containner .content{height: 600px;margin-bottom: 10px;}.content-left{float: left;height: 600px;width: 300px;background-color: #b90000;margin-bottom: 10px;}.containner .content .content-right{float: right;height: 600px;width: 890px;background-color: #ff5500;margin-bottom: 10px;}.containner .foot{height: 100px;background-color: #55ff00;margin-bottom: 10px;}</style><body><div class="containner"><div class="head">这是头部</div><div class="content"><div class="content-left">导航</div><div class="content-right">详细内容</div></div><div class="foot">这是底部</div></div></body>
(3).简单的上中(左中右)下结构布局
<style type="text/css">body{font-size: 25px;font-family: "宋体";color: #0000ff;text-align: center;}.containner{margin: 0 auto;height: 900px;width: 1200px;padding: 10px;background-color: #bfbfbf;}.containner .head{height: 180px;background-color: #00AA00;margin-bottom: 10px;}.containner .content{height: 600px;margin-bottom: 10px;}.content-left{float: left;height: 600px;width: 300px;background-color: #b90000;margin-bottom: 10px;}.content-center{float: left;height: 600px;width: 590px;background-color: #4c7300;margin-bottom: 10px;margin-left: 10px;}.content-right{float: right;height: 600px;width: 290px;background-color: #ff5500;margin-bottom: 10px;margin-left: 10px;}.containner .foot{height: 100px;background-color: #55ff00;margin-bottom: 10px;}</style><body><div class="containner"><div class="head">这是头部</div><div class="content"><div class="content-left">内容左</div><div class="content-center">内容中</div><div class="content-right">内容右</div></div><div class="foot">这是底部</div></div></body>
上述给出的是几种常见的div布局，我们还可以根据客户的需求设计出更多的按照实际要求的内容，但是无论如何设计，我们只要抓住一点就是使用块级结构div产生的盒子进行页面内容的布局即可完成。
