1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 一款功能综合的CSS滑动门特效

一款功能综合的CSS滑动门特效

时间:2020-08-05 16:43:00

相关推荐

一款功能综合的CSS滑动门特效

一个功能综合的CSS滑动门特效代码,在滑动门里包含列表、包含图文混排、包含文字滚动,其中任意一个都是我们常用的,综合运用这些功能才能做出更炫丽、符合标准的网页来。

注:本特效的代码没有经过优化,仅为了表现功能,如果要用到你的网页话,可以摘录需要的部分。

<html><head><title>一款功能综合的CSS滑动门特效丨河北塑胶地板|石家庄阳光棚</title><style>.tabBox {display: none;}.kind {height:270px;}.kindTabs {width:238px;height:30px;background:url("") repeat-x;border-right:#99CEEE 1px solid;overflow:auto;}.kindTabs ul {margin:0;padding:0;list-style:none;}.kindTabs li {float:left;line-height:30px;text-align:center;}.kindTabs li a {float:left;width:79px;height:30px;font:12px/1.2em Tahoma;color:#333;line-height:30px;background:url("/html/txdm_2/images/0917/playbill_tab_current.jpg");text-decoration:none;}.kindTabs li a:hover,.kindTabs li a.current {font:bold 12px/1.2em Tahoma;color:#069;line-height:30px;background:url("/html/txdm_2/images/0917/playbill_tab_select.jpg");text-decoration:none;}.kindTabs .title {width:66px;height:21px;background:url("") no-repeat center;}.kind .tabBody {width:238px;height:249px;border-left:#99CEEE 1px solid;border-right:#99CEEE 1px solid;border-bottom:#99CEEE 1px solid;overflow:auto;}/*tab kind content*/.playbillHot {width:218px;height:23px;color:#069;line-height:23px;text-indent:10px;background:#F1FCFE;border:#99CEEE 1px solid;}.playbillList {padding:5px 0;width:220px;height:199px;color:#666;line-height:22px;text-align:left;overflow:hidden;}.playbillList span.BC90 {color:#C90;}.playbillList span.BF09 {color:#F09;}.playbillList span.B990 {color:#990;}.playbillList span.BF60 {color:#F60;}.playbillList span.B069 {color:#069;}.newsMarket {margin:0 auto;width:220px;}.newsMarket a {font-size:12px;width:220px;height:24px;color:#666;line-height:24px;text-indent:10px;text-align:left;background:url("/jscss/demoimg/07/dot_arrow_1.jpg") 0 8px no-repeat;border-bottom:#CCC 1px dotted;text-decoration:none;overflow:hidden;display:block;}.newsMarket a:hover {color:#069;background:url("/jscss/demoimg/07/dot_arrow_2.jpg") 0 8px no-repeat;border-bottom:#069 1px dotted;text-decoration:none;}.newsTopicPic th,.newsTopicPic td {padding:5px 0;vertical-align:top;}.newsTopicPic th a img {padding:3px;width:60px;height:60px;border:#CCC 1px solid;}.newsTopicPic th a:hover img {padding:3px;width:60px;height:60px;border:#F90 1px solid;}.newsTopicPic td {color:#999;line-height:18px;text-align:left;}.newsTopicPic td span a {font:12px Tahoma;color:#069;line-height:18px;text-decoration:none;}.newsTopicPic td span a:hover {color:#069;text-decoration:underline;}.newsTopicPic td a {color:#333;text-decoration:underline;}.newsTopicPic td a:hover {color:#F00;text-decoration:underline;}.newsTopicTxt {margin:0 auto;width:220px;}.newsTopicTxt a {width:220px;height:24px;color:#666;line-height:24px;text-indent:10px;text-align:left;background:url("/jscss/demoimg/07/dot_arrow_1.jpg") 0 8px no-repeat;border-bottom:#CCC 1px dotted;text-decoration:none;overflow:hidden;display:block;}.newsTopicTxt a:hover {color:#069;background:url("/jscss/demoimg/07/dot_arrow_2.jpg") 0 8px no-repeat;border-bottom:#069 1px dotted;text-decoration:none;}.vsList {margin-top:10px;}.vsList td {width:120px;color:#666;text-align:center;}.vsList td a img {padding:4px;width:110px;height:80px;border:#AECFE3 1px solid;}.vsList td a:hover img {width:110px;height:80px;border:#FC0 1px solid;}.vsList td a {color:#666;line-height:20px;}.vsList td a:hover {color:#069;}</style></head><body><script language="javascript">/*** 切换TabSheet*/function switchCell(tab, n) {tab=document.getElementsByName(tab);for(i=0;i<tab.length;i++) tab.item(i).className="tabBox";tab.item(n).className="";}</script><div class="kind"><div id="tabs1" class="kindTabs"><ul><li><a href="" onMouseMove="switchCell('tab1',0)">tabsheet1</a></li><li><a href="#" onMouseMove="switchCell('tab1',1)">tabsheet2</a></li><li><a href="#" onMouseMove="switchCell('tab1',2)">中文Sheet</a></li></ul></div><div class="tabBody"><div name="tab1" id="tab1"><table width="220" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td height="5"></td></tr><tr><td valign="top" height="234"><div class="newsMarket"><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li><li><a title="title" href="#">中文标题</a></li></div></td></tr></table></div><div name="tab1" id="tab1" class="tabBox"><table width="220" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td><table width="220" border="0" cellpadding="0" cellspacing="0" class="newsTopicPic"><tr><th width="80"><a href="#"><img src="/images/m09.jpg" width="346" height="191" /></a></th><td><span><a href="#">我和我的祖国:猪倌变状元</a></span><br />中国成立以来,政府部门顺应民心出台一系列政策…… <a href="/">[全文]</a></td></tr></table></td></tr><tr><td><div class="newsTopicTxt"><li><a title="Title" href="#">通信大跨越</a></li><li><a title="title" href="#">粮食产量翻5倍</a></li><li><a title="title" href="#">农机改变人民</a></li><li><a title="title" href="#">魏会信的自述</a></li></div></td></tr></table></div><div name="tab1" id="tab1" class="tabBox"><table width="220" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td height="5"></td></tr><tr><td height="25"><div class="playbillHot"><li><a title="#" href="#">电视剧《狙击手》专题</a></li></div></td></tr><tr><td valign="top"><div class="playbillList"><marquee direction="up" scrollAmount="2" onmouseover=this.stop() onmouseout=this.start() >滚动<br />滚动<br />滚动<br />滚动<br />滚动<br />滚动<br /></marquee></div></td></tr></table></div></div></div></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。