静态网页制作教材：[10]怎么修改网页

时间：2024-10-23 20:35:26

1、如果是我们不需要的，我们就可以把div锂淅铄旰直接删除，但是删除div不能影响整体布局，，现在我们把底部的删除<html><he锾攒揉敫ad><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 id="zhutizuo1"><div class="zhutizuo11">一号</div><div class="zhutizuo11">二号</div><div class="zhutizuo11">三号</div><div class="zhutizuo11">四号</div><div class="zhutizuo11">五号</div><div class="zhutizuo11">六号</div><div class="zhutizuo11">七号</div><div class="zhutizuo11">八号</div><div class="zhutizuo11">九号</div><div class="zhutizuo11">十号</div></div><div id="zhutizuo2"><div class="zhutizuo12">爱情</div><div class="zhutizuo12">音乐</div><div class="zhutizuo12">八卦</div><div class="zhutizuo12">知道</div><div class="zhutizuo12">百度</div><div class="zhutizuo12">教育</div><div class="zhutizuo12">生活</div><div class="zhutizuo12">百科</div><div class="zhutizuo12">梦想</div><div class="zhutizuo12">流血</div></div></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 class="zhutiyou"><div class="wenzhangbiaoti">经验技术</div><div class="wenzhangneiron">百度经验是怎么写的回复对方大家看法给大家快递费快快快建发股份飞哥飞哥飞哥飞哥飞哥家规范开滦股份看看发给发给快乐规范看看老公</div></div><div class="zhutiyou"><div class="wenzhangbiaoti">知道技术</div><div class="wenzhangneiron">百度知道怎么回答就军阀割据开发工具广发聚丰国际控股发给更丰富军阀割据开滦股份发给法律法规家里带来了更加的解放军的房间开了多久</div></div><div class="zhutiyou"><div class="wenzhangbiaoti"><a href="#">电脑技术</a></div><div class="wenzhangneiron"><a href="#">电脑怎么使用防静电服科技股份发给就看见开滦股份大家快乐的过来的灵感就来科技股份健康的健康防静电服健康健康的接口规范健康空间</a></div></div><div class="zhutiyou"><div class="wenzhangbiaoti"><a href="#">贴吧技术</a></div><div class="wenzhangneiron"><a href="#">贴吧怎么使用到付款坚决反对积极的反馈极度疯狂激发大家的反馈卡发动机发动机看空间的方法健康的艰苦奋斗快递费空间打开风口浪</a></div></div></div></div><div id="baidu3"><div class="dibu"><div class="dibuyouqing"><a href="#">百度经验</a></div><div class="dibuyouqing"><a href="#">百度知道</a></div><div class="dibuyouqing"><a href="#">百度贴吧</a></div><div class="dibuyouqing"><a href="#">百度管家</a></div></div></div></div></body></html>我把底部的div删除了，我们看看

2、我觉得，还是不好看，友情链接太大了，我想小点，我们就去修改它的属性*{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:20px; width:1000px; margin-top:2px;}.dibuyouqing{background:#FF66CC; height:20px; width:248px; float:left; margin-left:2px; font-size:12px; line-height:20px}.dibuyouqing a{color:#FFFFFF; text-decoration:none}.dibuyouqing a:hover{font-weight:bold; background:#00FF66}我把它的属性修改了，要改，就要把整个div都改了，因为dibuyouqing是在dibu里面的，所以两个都要改，我们看看效果

3、现在底部还有一大截空出来，还是不好看，我们继续把它剪掉*{background:#FF3399}#baidu{background:#6633CC; height:520px; 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:20px; 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:20px; width:1000px; margin-top:2px;}.dibuyouqing{background:#FF66CC; height:20px; width:248px; float:left; margin-left:2px; font-size:12px; line-height:20px}.dibuyouqing a{color:#FFFFFF; text-decoration:none}.dibuyouqing a:hover{font-weight:bold; background:#00FF66}

4、因为底部多出来的是整体和baidu3里面的，所以就要在这里修改

5、要添加新的div也是一样的，我们也需要在你想要的地方添加，我就在导航下面添加了一个<html><head>&造婷用痃lt;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="xin">1</div><div id="baidu2"><div id="zhuti1"><div id="zhutizuo1"><div class="zhutizuo11">一号</div><div class="zhutizuo11">二号</div><div class="zhutizuo11">三号</div><div class="zhutizuo11">四号</div><div class="zhutizuo11">五号</div><div class="zhutizuo11">六号</div><div class="zhutizuo11">七号</div><div class="zhutizuo11">八号</div><div class="zhutizuo11">九号</div><div class="zhutizuo11">十号</div></div><div id="zhutizuo2"><div class="zhutizuo12">爱情</div><div class="zhutizuo12">音乐</div><div class="zhutizuo12">八卦</div><div class="zhutizuo12">知道</div><div class="zhutizuo12">百度</div><div class="zhutizuo12">教育</div><div class="zhutizuo12">生活</div><div class="zhutizuo12">百科</div><div class="zhutizuo12">梦想</div><div class="zhutizuo12">流血</div></div></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 class="zhutiyou"><div class="wenzhangbiaoti">经验技术</div><div class="wenzhangneiron">百度经验是怎么写的回复对方大家看法给大家快递费快快快建发股份飞哥飞哥飞哥飞哥飞哥家规范开滦股份看看发给发给快乐规范看看老公</div></div><div class="zhutiyou"><div class="wenzhangbiaoti">知道技术</div><div class="wenzhangneiron">百度知道怎么回答就军阀割据开发工具广发聚丰国际控股发给更丰富军阀割据开滦股份发给法律法规家里带来了更加的解放军的房间开了多久</div></div><div class="zhutiyou"><div class="wenzhangbiaoti"><a href="#">电脑技术</a></div><div class="wenzhangneiron"><a href="#">电脑怎么使用防静电服科技股份发给就看见开滦股份大家快乐的过来的灵感就来科技股份健康的健康防静电服健康健康的接口规范健康空间</a></div></div><div class="zhutiyou"><div class="wenzhangbiaoti"><a href="#">贴吧技术</a></div><div class="wenzhangneiron"><a href="#">贴吧怎么使用到付款坚决反对积极的反馈极度疯狂激发大家的反馈卡发动机发动机看空间的方法健康的艰苦奋斗快递费空间打开风口浪</a></div></div></div></div><div id="baidu3"><div class="dibu"><div class="dibuyouqing"><a href="#">百度经验</a></div><div class="dibuyouqing"><a href="#">百度知道</a></div><div class="dibuyouqing"><a href="#">百度贴吧</a></div><div class="dibuyouqing"><a href="#">百度管家</a></div></div></div></div></body></html>定义属性后看看，已经出现了一个灰色的框框

6、大家只要知道布局，怎么定义，一个网页就可以做出来了