网页设计 - 静态网站毕业论文 - 图文(5)

2020-02-22 14:13

width:330px; height:13px; float:left;

margin-top:10px; }

#box_md ul li a {//设置li鼠标移动前的样式 list-style:none; width:310px; font-size:14px; height:13px; float:left;

color:#333333; font-weight:100; }

#box_md ul li i { width:10px; height:13px; display:block; float:left;

margin-left:10px; margin-top:3px;

background:url(../images/bg_n.gif) 0 -272px no-repeat; //无序列表前的点用图片来代替 }

以上html文档代码与css完成的效果如下图4-9所示：

图 4-9 网球模块

4.4.5 中部选项卡效果制作

首页的“中国足球”中部的选项卡是用JavaScript+div+css制作。过程如下，在html

页面中用用来制作四个选项部分，

与上面html文档匹配的部分外部CSS代码：

/*国足选项卡开始*/ .page{ width:360px; height:430px; float:left; margin-left:10px; text-align:left; border-right:#3366CC 1px dashed; }

h2{ margin:10px; background:#eee;} /*----------------------- 内容模块 */ .tab_mo{ border-top:1px solid #ccc; padding:10px; width:330px; height:251px; clear:both; }

.tab_mo #tab_mo_1,#tab_mo_2,#tab_mo_3,#tab_mo_4{ margin-top:-5px; }

/*----------------------- 菜单模块 */ .tab{

http://www.paopaocha.com 泡泡茶网 www.htydj.com 22

/* 菜单模块的底部边框，也就是内容模块的上边框 */ list-style:none; padding:4px 5px 3px 5px; }

.tab li{ display:inline; /* 让li横向排列。即使不浮动也会横向排列。可以删除看看效果 */ font-size:12px; }

.tab li a{ padding:3px 4px; /* 因为没有固定高度，所以用填充来调整显示效果。 */ border:1px solid #ccc; /* 菜单项的边框 */ color:#333333; width:50px; float:left; text-align:center; display:block; border-bottom:none; /* 底部无边框 */ text-decoration:none; background:#f7f7f7 }

/*----------------------- 鼠标经过时候的菜单样式 */ .tab li a:hover{ background:#fff; text-decoration:underline; }

/*----------------------- 选中时候的样式 */ .tab li.no a{ background:#fff; border-bottom:none; /* 隐藏菜单项的底部边框 */ position:relative; /*菜单项里面的连接使用了相对定位 */ top:1px;/*相对于外层顶部为1像素，正好是底部边框的像素。所以就遮住了ul的底部边框 */ color:#CC0000; font-weight:bold ; }

.tab_mo ul li{ list-style:none; }

.tab_mo ul li i{ width:10px; height:13px; display:block; float:left; margin-top:4px; background:url(../images/bg_n.gif) 0 -272px no-repeat; }

.tab_mo ul li a{ list-style:none; display:block; font-size:14px; width:320px; margin-top:10px; color:#333333;

http://www.paopaocha.com 泡泡茶网 www.htydj.com 23

text-decoration:none; } .tab_mo ul li a:hover{ text-decoration:underline; color:#CC3300; } /*----------------------- 模块色彩样式调用 */ .sy1,.sy1 li a{ border-color:#6699CC;} .sy1 li a{ background:#DBF5FD;} .sy2,.sy2 li a{ border-color:#FF6600;} .sy2 li a{ background:#FFCC00;} 与上面html文档JQuery代码： function tab(a,b,c) { for(i=1;i<=b;i++){ if(c==i){ // 判断选择模块 document.getElementById(a+\显示模块内容 document.getElementById(a+\改变菜单为选中样式 } else{ // 没有选择的模块 document.getElementById(a+\隐藏没有选择的模块 document.getElementById(a+\清空没有选择的菜单样式 } } } 选项卡制作效果如图4-10：

图 4-10 选项卡效果图

以同样的布局方式完成了综合体育、中国足球与之相同的模块。效果图4-10：

http://www.paopaocha.com 泡泡茶网 www.htydj.com 24

图 4-10 综合体育

4.4.5首页页脚制作

中部完成后，剩下一个网页的页脚foot部分。foot部分很简单，先设置一个，分别利用

共7页:

网页设计 - 静态网站毕业论文 - 图文(5).doc 将本文的Word文档下载到电脑下载失败或者文档不完整，请联系客服人员解决！

下载这篇word文档