jquery电脑屏幕焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery电脑屏幕焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery电脑屏幕焦点图</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
</head>
<body class="bhome">
<div id="wrapper">
<div id="header_home">
<div class="wrap">

<div class="navigation">

</div><!-- end nav -->

<div id="scroller">
<div class="snav">
<a href="#"><span id="prev">Prev</span></a> 
<a href="#"><span id="next">Next</span></a>
</div>
<div id="slideshow" class="pics">

<p>
<a href="#"><img src="images/facebook-advertising.gif" alt="facebook advertising" /></a>
<span class="overtext">
<span class="otitle">Put your business on facebook.</span>
<span class="odes">Target your audience and make lasting connections.</span>
</span>
</p>

<p>
<a href="#"><img src="images/conversion-rate-optimization.gif" alt="Conversion Rate Optimization" /></a>
<span class="overtext">
<span class="otitle">Radium delivers serious results.</span>
<span class="odes">Boost sales and increase conversions.</span>
</span>
</p>

<p>
<a href="#"><img src="images/austin-seo-jobs.jpg" alt="Austin SEO jobs" /></a>
<span class="overtext">
<span class="otitle">Radium is looking to hire more experts.</span>
<span class="odes">View our current job openings.</span>
</span>
</p>

</div>
<ul id="nav"></ul>
<span class="bunson">gallery</span>
</div>
</div>
</div>
</body>
</html>

JS代码(scroll.js):

$(function(){
	$('#slideshow').cycle({
	fx:'scrollHorz',timeout:4000,speed:500,prev:'#prev',next:'#next',pager:'#nav',pagerAnchorBuilder:pagerFactory}
);
	function pagerFactory(idx,slide){
	var s = idx > 2 ? ' style="display:none"':'';
	return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
}
;
}
);

CSS代码(style.css):

*{padding:0;margin:0;}
body{font-family:Arial;font-size:12px;color:#444226;}
a{color:#4187a0;text-decoration:none;}
body.bhome{background:url(images/homebg.jpg) repeat-x;margin:0;padding:0;}
body.bpage{background:url(images/pagebg.jpg) repeat-x;}
body.bblog{background:url(images/blogbg.jpg) repeat-x;}
img{border-style:none;}
.wrap{width:1010px;margin:0 auto;display:block;}
#wrapper{margin:0 auto;width:100%;}
#header.ppage{width:100%;padding:20px 0 0;height:259px;margin:0;background:url(images/pageheader.jpg) no-repeat center top;}
#header.pblog{width:100%;padding:20px 0 0;height:259px;margin:0;background:url(images/headerblog.jpg) no-repeat center top;}
#header{width:100%;padding:20px 0 0;height:259px;margin:0;background:url(images/headerblog.jpg) no-repeat center top;}
.alignleft{float:left;margin-right:14px;margin-bottom:3px;margin-top:5px;}
.alignright{float:right;margin-bottom:3px;margin-left:14px;margin-top:5px;}
/* @group Home Headline */
 #header_home{width:100%;padding:20px 0 0;height:711px;margin:0;background:url(images/home_header.jpg) no-repeat center top;}
.logo{float:left;overflow:hidden;padding-top:29px;padding-left:16px;width:462px;height:173px;}
.logo h1{float:left;width:200px;height:100px;text-indent:-5000px;margin:0;}
.logo h1 a{float:left;width:200px;height:100px;}
.navigation{width:532px;float:right;height:202px;}
.search{width:532px;height:30px;margin-bottom:55px;}
.search form p{float:left;}
.search form{float:right;width:253px;height:30px;background:url(images/searchbg.jpg) no-repeat;}
.search form input#search{background-color:#1c191a;border-style:none;color:#776d6f;padding:5px;text-align:left;font-size:12px;margin-left:10px;margin-top:3px;width:212px;}
.search form input#submit{margin-top:2px;}
.navigation ul{width:532px;height:34px;overflow:hidden;}
.navigation ul li{float:left;height:34px;list-style-type:none;}
.navigation ul li a{background:url(images/pagenav.jpg) no-repeat;float:left;height:34px;text-indent:-5000px;}
.navigation ul li.services a{width:104px;background-position:0 0;}
.navigation ul li.services a:hover,.navigation ul li.services.current_page_item a{background-position:0 -34px;}
.navigation ul li.we a{width:160px;background-position:-104px 0;}
.navigation ul li.we a:hover,.navigation ul li.we.current_page_item a{background-position:-104px -34px;}
.navigation ul li.blog a{width:75px;background-position:-264px 0;}
.navigation ul li.blog a:hover,.navigation ul li.blog.current_page_item a{background-position:-264px -34px;}
.navigation ul li.about a{width:87px;background-position:-339px 0;}
.navigation ul li.about a:hover,.navigation ul li.about.current_page_item a{background-position:-339px -34px;}
.navigation ul li.contact a{width:105px;background-position:-426px 0;margin:0;padding:0;}
.navigation ul li.contact a:hover,.navigation ul li.contact.current_page_item a{background-position:-426px -34px;}
#scroller{width:527px;height:411px;float:right;margin-top:2px;}
/* @end */
/* @group Homepage */
#headline{padding:0;margin:0;width:100%;height:274px;background:url(images/headlinep.jpg) no-repeat center bottom;}
#headline .wrap.headline{padding-left:15px;width:995px;}
.wrap.content{padding-left:15px;width:995px;}
#headline .singleb{width:300px;height:274px;text-align:center;float:left;margin-right:42px;}
#headline .singleb.last{margin-right:0;}
#headline .singleb h3{color:#70cfee;text-transform:uppercase;font:bold 20px "Trebuchet MS";margin-bottom:45px;margin-top:6px;}
#headline .singleb h3 a{color:#70cfee;text-decoration:none;}
#headline .singleb h4{font-size:18px;color:#f6f7e6;line-height:23px;}
#headline .singleb p{font-size:15px;color:#f6f7e6;line-height:23px;}
#headline .singleb p{}
#content_home{background:#fffff8 url(images/content_home_bg.gif) repeat-x;width:100%;margin:0;padding:0;}
#content_home .from_blog{padding-bottom:10px;}
#content_home .from_blog h4.title{background:url(images/home_blog.gif) no-repeat;width:204px;height:33px;text-align:center;color:#282616;font:bold 20px Arial;text-transform:uppercase;position:relative;bottom:19px;padding-top:12px;padding-bottom:25px;}
#content_home .blog_home{overflow:hidden;padding-bottom:20px;}
#content_home .blogsingle{float:left;width:447px;padding-bottom:20px;padding-top:9px;padding-right:30px;margin-left:10px;}
#content_home .blogsingle img{float:left;background:url(images/homeimg.gif) no-repeat;padding:4px 4px 8px;margin-right:15px;}
#content_home .blogsingle .hcomm{float:right;position:relative;font-size:21px;color:#444226;font-weight:bold;width:48px;height:38px;background:url(images/bubble.gif) no-repeat;text-align:center;padding-top:7px;bottom:8px;}
#content_home .blogsingle .hcomm a{color:#444226;text-decoration:none;}
#content_home .blogsingle h2{font-size:18px;color:#444226;font-weight:bold;margin-bottom:2px;}
#content_home .blogsingle h2 a{color:#444226;text-decoration:none;}
#content_home .blogsingle h2 a:hover{color:#155369;}
#content_home .blogsingle p{color:#8c8961;font:italic 15px/22px Georgia;}
#content_home .blogsingle p a{font-family:Arial;color:#b8b69d;text-decoration:none;font-weight:normal;font-style:normal;}
/* @end */
#title{padding:53px 0 0;margin:0;width:100%;height:120px;background-position:center bottom;background-repeat:no-repeat;}
#title h2{font-size:57px;color:#242122;text-transform:uppercase;float:left;margin-left:15px;}
#title .quote{float:right;text-align:right;margin-right:15px;margin-top:7px;}
#title .quote p{text-align:left;color:#302c2d;font-size:26px;font-weight:bold;line-height:28px;}
#title .quote p.ind{text-align:right;color:#302c2d;font:italic bold 21px/28px Georgia;}
#title.tpage{background-image:url(images/title_page.jpg);}
.tblog{background-image:url(images/titleblog.jpg);}
.author_box{width:566px;float:left;background:url(images/authorbg.gif) no-repeat;height:120px;margin:15px 5px 20px 4px;padding-left:15px;padding-right:15px;padding-top:15px;}
.author_box h3{font-weight:bold;color:#00413e;font-size:18px;margin-bottom:5px;text-transform:uppercase;}
.author_box img{border:3px solid #00e6d7;float:left;margin-right:9px;}
.author_box p{font-size:13px;line-height:18px;color:#00413e;font-weight:bold;font-style:italic;}
.postnav{width:596px;float:left;padding:0;color:#444226;font-size:14px;font-weight:bold;text-transform:uppercase;height:38px;margin-top:0;margin-left:4px;margin-right:5px;}
.postnav a{color:#444226;background:url(images/prevnext.gif) no-repeat;width:109px;float:left;text-align:center;padding-top:12px;height:26px;}
.postnav .pleft{float:left;width:109px;height:38px;}
.postnav .pright{float:right;width:109px;height:38px;}
#mainc .actionbox{width:566px;background:url(images/authorbg.gif) no-repeat;height:120px;padding-left:15px;padding-right:15px;padding-top:15px;margin:15px 0 5px;}
#mainc .actionbox h3{color:#00413e;font-size:25px;font-weight:bold;text-transform:uppercase;margin-bottom:2px;}
#mainc .post .entry.page .actionbox p{font-size:17px;color:#ffffff;font-weight:bold;}
#mainc .post .entry.page .actionbox p.big{font-size:50px;color:#2afff5;font-weight:bold;margin-top:23px;}
/* @group Content */
#content{background:#fdfdf1 url(images/contentbg.gif) repeat-x;overflow:hidden;width:100%;margin:0;padding:34px 0 0;}
#mainc{float:left;margin:0 0 0 15px;width:655px;display:inline;position:relative;padding:0;}
.wrap.back{background:url(images/conbottle.gif) no-repeat 0 bottom;padding-bottom:54px;overflow:hidden;padding-top:20px;}
#mainc ul{padding-left:10px;margin-left:10px;color:#444226;font-size:18px;line-height:20px;margin-bottom:13px;}
#mainc ul li{margin-bottom:2px;}
#mainc blockquote{padding-left:25px;padding-right:25px;margin-bottom:13px;font-style:italic;}
#mainc .post{background:url(images/entrybg.gif) repeat-y;float:left;width:655px;}
#mainc .post .topr{background:url(images/topr.gif) no-repeat;width:654px;height:9px;}
#mainc .post .botr,#mainc .post .botr{background:url(images/botr.gif) no-repeat;width:654px;height:9px;}
#mainc .entry{padding:15px 30px;}
#mainc .entry.page{padding-top:0;}
#mainc .entry.page .titletop{overflow:hidden;height:45px;position:relative;bottom:30px;right:12px;}
#mainc .entry.page h2{background:url(images/pagetitle_left.gif) no-repeat;height:33px;float:left;padding-left:13px;padding-top:12px;font-size:20px;color:#444226;text-transform:uppercase;}
#mainc .entry.page h2 span{background:url(images/pagetitle_right.gif) no-repeat;height:45px;float:right;width:13px;position:relative;bottom:12px;}
#mainc .entry.page p{color:#444226;font-size:18px;line-height:20px;margin-bottom:13px;}
#mainc .single{overflow:hidden;padding:25px 25px 20px;width:605px;}
#mainc .single.front{overflow:hidden;padding:25px 25px 0;margin-bottom:15px;}
#mainc .single .leftinfo{width:199px;float:left;}
#mainc .leftinfo .tophalf{border-bottom:1px solid #e9ead4;padding-bottom:8px;margin-bottom:10px;color:#444226;font-size:14px;}
#mainc .leftinfo .tophalf.border{padding-bottom:8px;margin-bottom:10px;color:#444226;font-size:14px;border-bottom-style:none;}
#mainc .singleblog{border-bottom:1px solid #e9ead4;margin-bottom:10px;padding-bottom:8px;padding-right:15px;}
#mainc .singleblog h2{font-size:29px;line-height:31px;margin-bottom:8px;}
#mainc .singleblog h2 a{color:#444226;text-decoration:none;}
#mainc .singleblog h2 a:hover{color:#155369;text-decoration:none;}
#mainc .singleblog p.date{font-size:13px;font-style:italic;color:#a4a685;text-align:right;}
#mainc .tophalf p{color:#444226;font-size:14px;padding-left:25px;margin-bottom:4px;padding-bottom:3px;line-height:17px;}
#mainc .tophalf p.by{background:url(images/post_author.gif) no-repeat;}
#mainc .tophalf p.cat{background:url(images/post_date.gif) no-repeat;}
#mainc .tophalf p.com{background:url(images/post_comment.gif) no-repeat;}
#mainc .social{width:163px;height:31px;background:url(images/socialbg.gif) no-repeat;margin-left:5px;padding-left:16px;padding-top:5px;}
#mainc .social img{margin-right:4px;}
#mainc .tophalf a{font-weight:bold;text-decoration:none;color:#444226;}
#mainc .tophalf a:hover{font-weight:bold;text-decoration:none;color:#242314;}
#mainc .single .entryr{width:390px;float:right;border-left:1px solid #e9ead4;padding-left:15px;overflow:hidden;}
#mainc .single .entryr .continue{margin:0;padding:0;text-align:right;}
#mainc .entryr h2{font-size:33px;line-height:35px;margin-bottom:15px;}
#mainc .entryr h2 a{color:#444226;text-decoration:none;}
#mainc .entryr h2 a:hover{color:#252415;text-decoration:none;}
#mainc .entryr p.date{font-size:14px;font-style:italic;color:#a4a685;margin-bottom:20px;}
#mainc .entryr p{font-size:14px;line-height:20px;margin-bottom:12px;}
/* @end */
/* @group Sidebar */
#sidebar{display:inline;margin:0 15px 10px 0;width:297px;float:right;padding:0;background:url(images/msidebg.gif) repeat-y;}
.nav{overflow:hidden;}
.nav .left{float:left;width:200px;}
.nav .right{float:right;width:200px;text-align:right;}
#sidebar .about{background:url(images/aboutside.gif) no-repeat;width:267px;padding:15px;border-bottom:1px solid #98996e;margin:0;}
#sidebar h3{color:#444226;font-size:20px;text-transform:uppercase;margin-bottom:15px;}
#sidebar h4{color:#444226;font-size:16px;text-transform:uppercase;margin-bottom:15px;}
#sidebar .about p{color:#444226;font:italic 16px/20px Georgia;margin-bottom:4px;}
#sidebar .sidecontact{border-top:1px solid #83d4f1;background:url(images/sidecontact.gif) repeat-y;padding:20px 20px 10px;color:#fff;}
#sidebar .sidecontact h3{font-size:22px;color:#154155;text-transform:uppercase;margin-bottom:5px;}
#sidebar .sidecontact p{font-size:13px;color:#fffff8;font-weight:bold;margin-bottom:14px;}
#sidebar .sidecontact form input#name,#sidebar .sidecontact form input#email,#sidebar .sidecontact form input#phone{width:236px;height:25px;border-style:none;background:url(images/input_normal.gif) no-repeat;color:#aaa88f;padding-top:10px;padding-left:10px;padding-right:10px;font:bold 14px Arial;}
#sidebar .sidecontact form textarea{width:236px;height:142px;border-style:none;background:url(images/input_text.gif) no-repeat;color:#aaa88f;padding-top:10px;padding-left:10px;padding-right:10px;font:bold 14px Arial;}
#sidebar .sidecontact p.button{text-align:right;}
#sidebar .conbot{background:url(images/conbot.gif) no-repeat;height:12px;}
#sidebar .siderss{width:263px;height:126px;background:url(images/rssbg.gif) no-repeat;padding-left:34px;padding-top:27px;}
#sidebar .siderss p.feed{font-size:16px;color:#ffa90a;font-weight:bold;margin-bottom:20px;line-height:16px;}
#sidebar .siderss p.feed a{color:#ffd07a;text-decoration:none;margin-left:14px;}
#sidebar .siderss p.email{color:#683400;font-size:16px;font-weight:bold;margin-bottom:16px;line-height:16px;}
#sidebar .siderss form{padding-top:3px;}
#sidebar .siderss form p{float:left;}
#sidebar .siderss form input#email{font-size:12px;color:#683400;font-weight:bold;border-style:none;margin-top:9px;margin-right:12px;width:162px;}
#sidebar .sidesocial{border-top:1px solid #83d4f1;background:url(images/sidecontact.gif) repeat-y;padding-top:10px;padding-bottom:10px;padding-left:13px;border-bottom:1px solid #155369;}
#sidebar .sidesocial h3{margin:0;padding:10px 0 0;font-size:20px;font-weight:bold;color:#154155;text-transform:uppercase;height:34px;}
#sidebar .twitter{width:278px;height:230px;background:url(images/twitter.gif) no-repeat;margin-bottom:10px;font-size:13px;line-height:14px;color:#9cccdd;font-weight:bold;position:relative;}
#sidebar .twitter a{color:#9cccdd;text-decoration:none;}
#sidebar .twitter .t_radium{padding-left:81px;height:75px;overflow:hidden;margin-bottom:39px;padding-right:10px;}
#sidebar .twitter .t_personal{padding-left:81px;height:75px;overflow:hidden;padding-right:10px;}
#sidebar .socialimg{height:29px;}
#sidebar .socialimg p{float:left;margin-right:7px;}
#sidebar .snormal{background:url(images/side_normal.gif) no-repeat 0 bottom;padding:14px;width:269px;}
#sidebar .sidesingle{width:269px;margin-bottom:20px;float:left;}
#sidebar .sidesingle img{float:left;background:url(images/side_thumb.gif) no-repeat;padding:3px 4px 5px;margin-right:6px;margin-bottom:0;}
#sidebar .sidesingle .hcomm{float:right;position:relative;font-size:16px;color:#444226;font-weight:bold;width:36px;height:28px;background:url(images/side_bubble.gif) no-repeat;text-align:center;padding-top:6px;bottom:8px;padding-left:1px;line-height:16px;}
#sidebar .sidesingle .hcomm a{color:#444226;text-decoration:none;}
#sidebar .sidesingle h2{font-size:13px;font-weight:bold;margin-bottom:4px;}
#sidebar .sidesingle h2 a{color:#34331d;text-decoration:none;}
#sidebar .sidesingle p{color:#68653d;font:italic 12px/15px Georgia;}
#sidebar .sidesingle p a{font-family:Arial;color:#848051;text-decoration:none;font-weight:normal;font-style:normal;}
#sidebar p.ad{text-align:center;margin:0;padding:0;}
/* @end */
/* @group Footer */
#footer{width:100%;clear:both;margin:0;background:url(images/page_footer.gif) repeat-x;padding:0;}
#footer_home{width:100%;clear:both;margin:0;padding:0;background:url(images/home_footer.gif) repeat-x;}
.bluefooter{height:446px;background:url(images/bluebottle.gif) no-repeat 0 bottom;width:980px;padding-left:30px;padding-top:40px;}
.bluefooter .fcontact{float:left;width:440px;color:#fff;}
.bluefooter .fcontact form{width:393px;}
.bluefooter .fcontact p{font-weight:bold;margin-bottom:5px;color:#fff;}
.fcontact input#name,.fcontact input#email,.fcontact input#phone{width:245px;height:24px;background:url(images/finput.gif) no-repeat;border-style:none;color:#aaa88f;font:bold 14px Arial;padding-top:11px;padding-left:11px;}
.fcontact textarea{background-image:url(images/ftext.gif);width:382px;height:141px;border-style:none;color:#aaa88f;font:bold 14px Arial;padding-top:11px;padding-left:11px;}
.fcontact p.button{text-align:right;}
.bluefooter h4{color:#0e4256;font-weight:bold;font-size:20px;text-transform:uppercase;margin-bottom:10px;}
.bluefooter .ftwitter{padding-left:10px;float:left;width:490px;height:440px;margin-right:35px;}
.bluefooter .twitterp{height:222px;margin-top:5px;background:url(images/home_twitter.gif) no-repeat;padding-top:44px;padding-left:80px;width:305px;font-weight:bold;color:#9cccdd;font-size:15px;line-height:18px;padding-right:20px;}
.bluefooter .twitterp p{height:72px;overflow:hidden;margin-bottom:30px;}
.bluefooter .twitterp a{color:#9cccdd;text-decoration:none;}
.grayfooter{height:157px;background:url(images/graybottle.gif) no-repeat;padding-left:30px;width:980px;padding-top:20px;}
.grayfooter.gpage{height:157px;background:url(images/pagebottle.gif) no-repeat;padding-left:30px;width:980px;padding-top:40px;}
.grayfooter .links{width:210px;float:left;margin-right:50px;}
.grayfooter .links h3{color:#82e0fe;font-weight:bold;font-size:14px;background:url(images/footerdiv.gif) no-repeat 0 bottom;margin-bottom:8px;padding-bottom:10px;text-transform:uppercase;}
.grayfooter .links ul{}
.grayfooter .links ul li{color:#918588;font-size:13px;margin-bottom:2px;font-weight:bold;list-style-type:none;}
.grayfooter .links ul li a{color:#918588;text-decoration:none;}
.grayfooter .links ul li a:hover{color:#6e6567;}
.grayfooter .offices{float:right;padding-top:17px;}
.grayfooter .offices .address{float:left;margin-right:34px;color:#675c5f;font-size:15px;line-height:15px;}
.grayfooter .offices .address p.location{font-weight:bold;font-size:18px;margin-bottom:10px;color:#857a7d;}
.grayfooter .offices .address p.phone{font-weight:bold;font-size:19px;margin-top:8px;}
.clear{clear:both;background:none;}
/* @end */
/* @group Scroller */
#scroller .bunson{position:relative;width:95px;height:132px;background:url(images/bunson.png) no-repeat;float:left;text-indent:-5000px;bottom:173px;z-index:50;left:427px;}
#scroller .overtext{z-index:10;position:relative;bottom:57px;width:480px;height:48px;background:url(images/trans.png) repeat;float:left;padding-top:7px;}
#scroller .overtext .otitle{color:#e8effe;font-size:18px;font-weight:bold;width:470px;padding-left:10px;float:left;margin-bottom:2px;}
#scroller .overtext .odes{color:#fff;font-size:12px;font-weight:bold;width:470px;padding-left:10px;line-height:17px;float:left;}
#slideshow{margin-left:24px;}
pre code{background-color:#eee}
.pics{height:299px;width:480px;padding:0;margin:0;overflow:hidden}
.pics img{height:299px;width:480px;background-color:#eee;top:0;left:0;border-style:none;}
#main{margin:20px}
.snav{height:24px;}
.snav a span#prev{width:14px;height:27px;float:left;position:relative;top:165px;background:url(images/arrows_left.gif) no-repeat;text-indent:-5000px;left:5px;}
.snav a:hover span#prev{background-position:0 -27px;}
.snav a span#next{width:14px;height:27px;float:right;position:relative;top:165px;background:url(images/arrows_right.gif) no-repeat;text-indent:-5000px;right:4px;}
.snav a:hover span#next{background-position:0 -27px;}
#nav{position:relative;height:25px;margin-top:10px;margin-left:333px;}
#nav li{float:left;list-style:none}
#nav a{padding:3px 5px;text-decoration:none;width:35px;float:left;margin-right:13px;height:33px;text-indent:-5000px;}
#nav a:focus{outline:none;}
/* @end */
/* @group Comments */
.comments{overflow:hidden;background:url(images/commentbg.gif) repeat-y;width:654px;padding-top:20px;border-top:1px solid #e2e2c6;}
.comments .comwrap{width:594px;padding-left:30px;padding-right:30px;}
.comments .comwrap h3{font-weight:bold;font-size:18px;color:#444226;text-transform:uppercase;margin-bottom:15px;}
.comments .commb{background:url(images/combbg.gif) no-repeat;width:654px;height:22px;}
.comments .comall{overflow:hidden;margin-bottom:15px;}
.comments .comleft{width:160px;text-align:right;float:left;padding-right:27px;}
.comments .comleft img{border:1px solid #e9ead4;padding:2px;}
.comments .comleft p{margin-bottom:6px;color:#73715b;font-weight:bold;font-size:12px;}
.comments .comleft p.author,.comments .comleft p a{color:#4187a0;}
.comments .maincomment{float:right;width:397px;background:url(images/bubblemid.gif) repeat-y;}
.comments .maincomment p.who{color:#444226;font-size:17px;font-weight:bold;margin-bottom:2px;background:url(images/bubbletop.gif) no-repeat;height:25px;padding-left:40px;padding-top:12px;}
.comments .maincomment p{font-size:14px;line-height:20px;color:#444226;padding-left:40px;padding-right:15px;margin-bottom:6px;}
.comments .maincomment .combubble{width:397px;height:12px;background:url(images/bubblebot.gif) no-repeat;}
.comments li{list-style-type:none;}
.comments ol{margin-bottom:15px;background:url(images/comdiv.gif) repeat-y;}
#respond{width:453px;}
#respond p{margin-bottom:8px;color:#444226;font-size:13px;font-style:italic;}
#respond input#author,#respond input#email,#respond input#url{background:url(images/inputbg.gif) no-repeat;width:280px;height:27px;border-style:none;margin-right:10px;font:14px Arial;color:#616161;padding-left:10px;padding-top:11px;}
#respond textarea{font:14px Arial;color:#616161;background-image:url(images/textarea.gif);width:443px;height:145px;border-style:none;padding-left:10px;padding-top:10px;padding-bottom:10px;}
#respond p.subbut{text-align:right;}
/* @end */

附件:下载该文件资源,减少时间成本(增值服务)