首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容 知识问答

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

2025-11-05 16:34:17

1、底部我们一般分为3块，我们开始布局，在定义属性

<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 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>

<div class="dibu"></div>

<div class="dibu"></div>

</div>

</div>

</body>

</html>

我这里就写成一样的了，免的麻烦，大家可以根据需要用id写

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

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:65px; width:1000px; margin-top:2px;}

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

3、下面我们需要添加下友情链接

<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 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 class="dibu"></div>

<div class="dibu"></div>

</div>

</div>

</body>

</html>

没放链接就用#代替，看看效果是不是连接按钮了

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

4、不好看我们继续添加属性

*{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}

看看效果，字体变大了，鼠标滑过会变色了

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

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

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

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
相关推荐
  • 如何去掉下划线
    阅读量：28
  • Dreamweaver如何设置Web可用的字体
    阅读量：179
  • 怎样在web page maker中插入导航条？
    阅读量：155
  • 如何在HTML中插入图片
    阅读量：175
  • css里面的背景样式有哪些
    阅读量：63
    • 猜你喜欢
    猜你喜欢
    © 2025 小度生活
    粤ICP备2022083104号