静态网页制作教材：[6]主体怎么进行布局

时间：2024-10-01 05:39:22

今天来讲这么进行主体布局，主体我想分为左中右三大块

工具/原料

电脑

布局

方法/步骤

1、主体要分为三块，我们就需溴溢菏确要制作三个div，<html><head><linkhref="m锾攒揉敫ain.css"type="text/css"rel="stylesheet"><title></title></head><body><divid="baidu"> <divid="baidu1"> <divid="baidu1_1"><imgsrc="QQ图片20141212170400.jpg"></div> <divid="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div> <divid="baidu1_3"> <divclass="daohang"><ahref="http://tieba.baidu.com/">导航</a></div> <divclass="daohang"><ahref="新建文本文档.txt">新闻</a></div> <divclass="daohang"><ahref="">购物</a></div> <divclass="daohang"><ahref="">图片</a></div> </div> </div> <divid="baidu2"> <divid="zhuti1"></div> <divid="zhuti2"></div> <divid="zhuti3"></div> </div> <divid="baidu3"></div></div></body></html>我们看看效果，这个时候我们是什么也看不出来的，我们需要给它定义属性

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}.daohanga{color:#FFFFFF;text-decoration:none}.daohanga: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;}我给它定义了长宽高，我们看看效果，不对啊，怎么是这个样子的啊

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}.daohanga{color:#FFFFFF;text-decoration:none}.daohanga: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}我给它定义了都向左边对齐。一个挨着一个不就可以了啊，我们看看效果，现在就是分为左中右三块了

4、我们所鼙艘疯zhuti2这里想要放4个一样大的图片，我们继续给它划分，这个时候我们继续用class来调用，因为他们长的都一样嘛。<html><稆糨孝汶;head><linkhref="main.css"type="text/css"rel="stylesheet"><title></title></head><body><divid="baidu"> <divid="baidu1"> <divid="baidu1_1"><imgsrc="QQ图片20141212170400.jpg"></div> <divid="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div> <divid="baidu1_3"> <divclass="daohang"><ahref="http://tieba.baidu.com/">导航</a></div> <divclass="daohang"><ahref="新建文本文档.txt">新闻</a></div> <divclass="daohang"><ahref="">购物</a></div> <divclass="daohang"><ahref="">图片</a></div> </div> </div> <divid="baidu2"> <divid="zhuti1"></div> <divid="zhuti2"> <divclass="zhuti2_zhong"></div> <divclass="zhuti2_zhong"></div> <divclass="zhuti2_zhong"></div> <divclass="zhuti2_zhong"></div> </div> <divid="zhuti3"></div> </div> <divid="baidu3"></div></div></body></html>因为我们需要分为4块，我们用4个<divclass="zhuti2_zhong"></div>来调用。看看效果，还是没反应，原来这里我们也要定义属性

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}.daohanga{color:#FFFFFF;text-decoration:none}.daohanga: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、这个中间不是空隙太大了吗，不好看，那么怎么来把它变小呢？这个大家可以自己试试。这个只要熟悉排列规则，其实就很好做，现在它不是从左到右排列了吗，我们是不是把左边和上面的空隙留出来，右边和下面不管它，我们看看效果，只要计算好像素，这样就简单了啊