1、主体要分为三块，我们就需要制作三个div，<html><head><link href="m锾攒揉敫ain.css" type="text/css" rel="stylesheet"><title></title></head><body><div id="baidu"> <div id="baidu1"> <div id="baidu1_1"><img src="QQ图片20141212170400.jpg"></div> <div id="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div> <div id="baidu1_3"> <div class="daohang"><a href="http://tieba.baidu.com/">导航</a></div> <div class="daohang"><a href="新建 文本文档.txt">新闻</a></div> <div class="daohang"><a href="">购物</a></div> <div class="daohang"><a href="">图片</a></div> </div> </div> <div id="baidu2"> <div id="zhuti1"></div> <div id="zhuti2"></div> <div id="zhuti3"></div> </div> <div id="baidu3"></div></div></body></html>我们看看效果，这个时候我们是什么也看不出来的，我们需要给它定义属性
![静态网页制作教材：[6]主体怎么进行布局](https://exp-picture.cdn.bcebos.com/c99358fe474ec2835d3f315cbe4f50b8b53e1cd7.jpg)
2、打开css样式表，我们给它定义样式*{background:#FF3399}#baidu{background:#6633CC; height:700px; width:1000px; margin-left:auto; margin-right:auto}#baidu1{background:#FF6666; height:100px; width:1000px;}#baidu2{background:#FFCCFF; height:400px; width:1000px}#baidu3{background:#66FFCC; height:200px; width:1000px}#baidu1_1{background:#0033FF; height:80; width:80px; float:left}#baidu1_2{background:#FF33CC; height:80px; width:920px; float:left; font-size:36px; line-height:80px}#baidu1_3{background:#6600FF; height:20px; width:1000px; float:left}.daohang{background:#FF0000; height:20px; width:249px; float:left; margin-left:1px; text-align:center; font-size:14px; line-height:20px}.daohang a{color:#FFFFFF; text-decoration:none}.daohang a:hover{font-weight:bold; background:#00FF66}#zhuti1{background:#00CCFF; height:400px; width:200px;}#zhuti2{background:#6666CC; height:400px; width:500px;}#zhuti3{background:#CC00FF; height:400px; width:300px;}我给它定义了长宽高，我们看看效果，不对啊，怎么是这个样子的啊
![静态网页制作教材：[6]主体怎么进行布局](https://exp-picture.cdn.bcebos.com/32fe25ef354f50b8c6bea268dc4afa32929c18d7.jpg)
3、我们继续给它定义，因为系统默认的是从上到下排列的*{background:#FF3399}#baidu{background:#6633CC; height:700px; width:1000px; margin-left:auto; margin-right:auto}#baidu1{background:#FF6666; height:100px; width:1000px;}#baidu2{background:#FFCCFF; height:400px; width:1000px}#baidu3{background:#66FFCC; height:200px; width:1000px}#baidu1_1{background:#0033FF; height:80; width:80px; float:left}#baidu1_2{background:#FF33CC; height:80px; width:920px; float:left; font-size:36px; line-height:80px}#baidu1_3{background:#6600FF; height:20px; width:1000px; float:left}.daohang{background:#FF0000; height:20px; width:249px; float:left; margin-left:1px; text-align:center; font-size:14px; line-height:20px}.daohang a{color:#FFFFFF; text-decoration:none}.daohang a:hover{font-weight:bold; background:#00FF66}#zhuti1{background:#00CCFF; height:400px; width:200px; float:left}#zhuti2{background:#6666CC; height:400px; width:500px; float:left}#zhuti3{background:#CC00FF; height:400px; width:300px; float:left}我给它定义了都向左边对齐。一个挨着一个不就可以了啊，我们看看效果，现在就是分为左中右三块了
![静态网页制作教材：[6]主体怎么进行布局](https://exp-picture.cdn.bcebos.com/51f9aa3ea8db574a8fb2992fa7f7dfb2dd1917d7.jpg)
4、我们所鼙艘疯zhuti2这里想要放4个一样大的图片，我们继续给它划分，这个时候我们继续用class来调用，因为他们长的都一样嘛。<html><稆糨孝汶;head><link href="main.css" type="text/css" rel="stylesheet"><title></title></head><body><div id="baidu"> <div id="baidu1"> <div id="baidu1_1"><img src="QQ图片20141212170400.jpg"></div> <div id="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div> <div id="baidu1_3"> <div class="daohang"><a href="http://tieba.baidu.com/">导航</a></div> <div class="daohang"><a href="新建 文本文档.txt">新闻</a></div> <div class="daohang"><a href="">购物</a></div> <div class="daohang"><a href="">图片</a></div> </div> </div> <div id="baidu2"> <div id="zhuti1"></div> <div id="zhuti2"> <div class="zhuti2_zhong"></div> <div class="zhuti2_zhong"></div> <div class="zhuti2_zhong"></div> <div class="zhuti2_zhong"></div> </div> <div id="zhuti3"></div> </div> <div id="baidu3"></div></div></body></html>因为我们需要分为4块，我们用4个<div class="zhuti2_zhong"></div>来调用。看看效果，还是没反应，原来这里我们也要定义属性
![静态网页制作教材：[6]主体怎么进行布局](https://exp-picture.cdn.bcebos.com/fb738d9c2cf7dfb2a599c49fd01b1edef5dc13d7.jpg)
5、下面我们继续定义它的属性，这个时候我想不让它们挨在一起，我想都留点空隙怎么办*{background:#FF3399}#baidu{background:#6633CC; height:700px; width:1000px; margin-left:auto; margin-right:auto}#baidu1{background:#FF6666; height:100px; width:1000px;}#baidu2{background:#FFCCFF; height:400px; width:1000px}#baidu3{background:#66FFCC; height:200px; width:1000px}#baidu1_1{background:#0033FF; height:80; width:80px; float:left}#baidu1_2{background:#FF33CC; height:80px; width:920px; float:left; font-size:36px; line-height:80px}#baidu1_3{background:#6600FF; height:20px; width:1000px; float:left}.daohang{background:#FF0000; height:20px; width:249px; float:left; margin-left:1px; text-align:center; font-size:14px; line-height:20px}.daohang a{color:#FFFFFF; text-decoration:none}.daohang a:hover{font-weight:bold; background:#00FF66}#zhuti1{background:#00CCFF; height:400px; width:200px; float:left}#zhuti2{background:#6666CC; height:400px; width:500px; float:left}#zhuti3{background:#CC00FF; height:400px; width:300px; float:left}.zhuti2_zhong{background:#66FF00; height:180px; width:230px; float:left; margin-bottom:10px; margin-left:10px; margin-right:10px; margin-top:10px;}我给它定义了上下左右都留出了10像素的空隙，我们看看效果
![静态网页制作教材：[6]主体怎么进行布局](https://exp-picture.cdn.bcebos.com/dd58d02c5b1b1ede895caa8a981fceecd2d90fd7.jpg)
6、这个中间不是空隙太大了吗，不好看，那么怎么来把它变小呢？这个大家可以自己试试。这个只要熟悉排列规则，其实就很好做，现在它不是从左到右排列了吗，我们是不是把左边和上面的空隙留出来，右边和下面不管它，我们看看效果，只要计算好像素，这样就简单了啊
![静态网页制作教材：[6]主体怎么进行布局](https://exp-picture.cdn.bcebos.com/f59dbe39131fceec525963c679c4ec9958430bd7.jpg)
