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

时间：2026-02-12 14:39:39

1、主体要分为三块，我们就需要制作三个div，

<html>

<head>

</head>

<body>

<div id="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div>

</div>

</div>

</div>

</body>

</html>

我们看看效果，这个时候我们是什么也看不出来的，我们需要给它定义属性

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

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]主体怎么进行布局

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]主体怎么进行布局

4、我们zhuti2这里想要放4个一样大的图片，我们继续给它划分，这个时候我们继续用class来调用，因为他们长的都一样嘛。

<html>

<head>

</head>

<body>

<div id="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div>

</div>

</div>

</div>

</div>

</body>

</html>

因为我们需要分为4块，我们用4个<div class="zhuti2_zhong"></div>来调用。看看效果，还是没反应，原来这里我们也要定义属性

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

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]主体怎么进行布局

6、这个中间不是空隙太大了吗，不好看，那么怎么来把它变小呢？这个大家可以自己试试。这个只要熟悉排列规则，其实就很好做，现在它不是从左到右排列了吗，我们是不是把左边和上面的空隙留出来，右边和下面不管它，我们看看效果，只要计算好像素，这样就简单了啊

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