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

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

/* 图片轮播 开始 */ img,a img{ border:none; } a{

text-decoration:none; color:#fff; }

a:hover{

text-decoration:underline; color:#fff; }

.main{

width:550px; float:left;

height:350px; padding:0 6px; } .fcnt{

display:block; height:342px; width:600px;

margin:10px auto; border:4px solid #222; position:relative; overflow:hidden; }

.fcnt .mimg{ float:left; width:446px; height:340px; overflow:hidden; }

.fcnt .mimg div{ display:none; }

.mimg img{ width:446px; height:340px; }

.fcnt ul{ float:right; width:152px; height:340px; }

*html .fcnt ul{ position:absolute; right:1px; top:2px;

width:152px; height:340px; }

.fcnt li{

display:block; height:82px; width:150px;

margin-bottom:5px; cursor:pointer; http://www.paopaocha.com 泡泡茶网 www.htydj.com 16

overflow:hidden; }

.fcnt li img{ width:150px; height:82px;

filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; }

.fcnt li.cur img{ width:142px; height:75px;

margin:4px 0 0 4px;

filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #tri{

position:absolute; top:5px; right:2px; z-index:1000; width:155px; height:82px;

background:url(../images/point.png) no-repeat; cursor:pointer; }

*html #tri {

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=\background:none; }

.fcnt dl{

position:absolute; bottom:1px; left:0px;

width:446px; height:80px;

background:url(../images/shadow.png) no-repeat; display:none; }

.fcnt dt{ line-height:38px; text-align:center; font-size:22px; font-family:\黑体\ font-weight:900; }

.fcnt dd{

line-height:24px; text-align:center; font-size:14px; color:#999999; }

*html .fcnt dl{

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=\background:none; } /*

sizingMethod=image,

sizingMethod=image,

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

与上面html文档JQuery代码： $(document).ready(function(){ //幻灯片 var j=1;

var MyTime=false;

var fot=200;//当前图片消失时间 var fin=300;//新图片呈现时间 var amt=300;//三角标志滑动时间 var speed=3000;//自动播放间隔 var maxpic=4;//切换图片个数 $(\ $(\ var cur=$(\ if(i!==cur){ j=i; $(\ $(\ $(\ $(\ $(\ } }) })

//标记当前

function current(ele,tag){ $(ele).addClass(\ }

//自动播放 不需要的话可以删除这一段 $('#imgnav').hover(function(){ if(MyTime){ clearInterval(MyTime); } },function(){ MyTime = setInterval(function(){ $(\ j++; if(j==maxpic){j=0;} } , speed); }); //自动开始 var MyTime = setInterval(function(){ $(\ j++; if(j==maxpic){j=0;} } , speed); })

图片轮播效果图4-9：

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

图 4-9 图片轮播效果

4.4.4 中部新闻模块制作

首页中部又分为综合体育、中国足球两大模块，两个模块布局相似都分为左、中、右三个部分。每个部分新闻标题用

和< /a>标签布局P标签作为标题前的图标，a标签为模块的标题。新闻列表我用、布局，下面是利用

标签< /a>和、做的“网球”这一部分的源码： Html文档部分代码：

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

与佩娃争冠 与上面html文档匹配的部分外部CSS代码： #md{ width:370px; height:720px; float:left;

margin-top:10px;

border-right:#3366CC 1px dashed; }

#box_md{ width:370px; height:290px; float:left; }

#box_md p {//标题图标样式 width:13px; float:left; height:14px; margin-left:5px; margin-right:5px; display:block;

background-image:url(../images/qq.png); }

#box_md a {/标题字体等样式 width:70px; height:15px; float:left;

font-size:12px; color:#000000; font-weight:bold; display:block; }

#box_md a.gd { float:none; width:30px;

margin-left:330px; font-weight:100; }

#box_md a:hover {//设置li鼠标移动后的样式 color:#FF3300; }

#box_md ul { width:350px; display:block; float:left;

margin-top:5px;

border-top:#3366CC 1px solid; margin-left:10px; height:286px; }

#box_md ul li { list-style:none;

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