静态网页制作教材：[9]网页底部制作

布局

电脑

我定义了一下属性，*{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-left:13px;  margin-top:13px;}#zhutizuo1{background:#999966; height:400px; width:90px; float:left}#zhutizuo2{background:#9900FF; height:400px; width:110px; float:left}.zhutizuo11{background:#33FF66; height:39px; width:90px; margin-top:1px; font-size:18px; text-align:center; line-height:39px}.zhutizuo12{background:#333333; height:39px; width:110px; margin-top:1px; font-size:24px; text-align:center; line-height:39px}.zhutiyou{background:#CCCCCC; height:185; width:135px; float:left; margin-left:10px; margin-top:10px}.wenzhangbiaoti{background:#FF0000; height:30px; width:135px; text-align:center; font-size:16px; line-height:30px}.wenzhangneiron{background:#CC9933; height:155px; width:135px; text-indent:2em}.dibu{background:#666666; height:65px; width:1000px; margin-top:2px;}

不好看我们继续添加属性*{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-left:13px;  margin-top:13px;}#zhutizuo1{background:#999966; height:400px; width:90px; float:left}#zhutizuo2{background:#9900FF; height:400px; width:110px; float:left}.zhutizuo11{background:#33FF66; height:39px; width:90px; margin-top:1px; font-size:18px; text-align:center; line-height:39px}.zhutizuo12{background:#333333; height:39px; width:110px; margin-top:1px; font-size:24px; text-align:center; line-height:39px}.zhutiyou{background:#CCCCCC; height:185; width:135px; float:left; margin-left:10px; margin-top:10px}.wenzhangbiaoti{background:#FF0000; height:30px; width:135px; text-align:center; font-size:16px; line-height:30px}.wenzhangneiron{background:#CC9933; height:155px; width:135px; text-indent:2em}.dibu{background:#666666; height:65px; width:1000px; margin-top:2px;}.dibuyouqing{background:#FF66CC; height:65px; width:248px; float:left; margin-left:2px; font-size:36px; line-height:65px}.dibuyouqing a{color:#FFFFFF; text-decoration:none}.dibuyouqing a:hover{font-weight:bold; background:#00FF66}看看效果，字体变大了，鼠标滑过会变色了

下面的我们就大家自己完成吧。其实只要会div布局加css制定样式，网页就是这样做出来的。