首页 > 代码库 > 较好的视觉效果的网页选项卡

较好的视觉效果的网页选项卡

2024-07-28 03:38:19   211人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>选项卡-潜水曝气机</title><style type="text/css"><!--/* 初始化 */body {font: 12px/1 "宋体", SimSun, serif;background:#fff;color:#000;}ul,li,dl,dt,dd {margin:0;padding:0; /* 清除浏览器默认的margin和padding值 */}ul,li {list-style:none outside; /* 清除浏览器中列表项默认的占位 */}a {text-decoration:none;}img {border:0;}/* 选项卡整体外观定义 */.tabList {width:400px;height:160px;overflow:hidden;}.tabList .tabBox {height:100%;position:relative;background:#09c;}.tabList .tabBox li {float:left;width:25%;text-align:center;}.tabList h4 {margin:0;height:26px;font-size:1em;line-height:22px;}.tabList h4 a {color:#039;font-weight:normal;display:block;background:#bfeafd url(/UploadFiles/2014-07/2/2014727164235178.png) no-repeat;padding-left:5px;}.tabList h4 a span {display:block;background:url(/UploadFiles/2014-07/2/2014727164235178.png) no-repeat top right;padding-right:5px;}.tabList h4 a:hover,.tabList .tabOn h4 a{background-position:0 -50px;}.tabList h4 a:hover span,.tabList .tabOn h4 a span {background-position:right -50px;}.tabList .tabContentBox li{width:auto;margin-top:0;}.tabList .tabContentBox {width:390px;height:130px;border:1px solid #069;text-align:left;overflow:hidden;background:#fff;position:absolute;top:22px;left:0;display:none;margin:4px;}.tabList li:hover .tabContentBox,.tabList .tabOn .tabContentBox {display:block;}/* 以下是对各项内容的CSS定义 */.tabList .tabContentBox .blog,.tabList .tabContentBox .group {color:#999;line-height:2em;margin:5px;}.tabList .tabContentBox .blog dt,.tabList .tabContentBox .group dt,.tabList .tabContentBox .blog dd,.tabList .tabContentBox .group dd{float:left;border-bottom: 1px dotted #9cf;}.tabList .tabContentBox .blog dt,.tabList .tabContentBox .group dt {width:60%;white-space:nowrap;overflow:hidden;clear:left;font-size:1.1em;}.tabList .tabContentBox .blog dt a,.tabList .tabContentBox .group dt a {color:#039;display:block;margin-left:5px;padding-left:12px;background: url(/UploadFiles/2014-07/2/201472716498794.png) no-repeat 5px 11px;}.tabList .tabContentBox .blog dt a:hover,.tabList .tabContentBox .group dt a:hover {color:#f90;background-position:5px -19px;}.tabList .tabContentBox .blog dd,.tabList .tabContentBox .group dd {color:#0cf;width:20%;float:left;white-space:nowrap;overflow:hidden;}.tabList .tabContentBox .blog dd a,.tabList .tabContentBox .group dd a {color:#069;}.tabList .tabContentBox .blog dd a:hover,.tabList .tabContentBox .group dd a:hover {color:#f90;}.tabList .tabContentBox .album li,.tabList .tabContentBox .share li{width:24.9%;float:left;padding-top:15px;text-align:center;}--></style><script type="text/javascript" language="javascript"><!--window.onload = tabEffect;function tabEffect(){var allElements = document.getElementsByTagName(‘*‘);for (var i=0; i<allElements.length; i++){if (allElements[i].className.indexOf(‘tabOption‘) >= 0){allElements[i].onmouseover = mouseOver;}}}function mouseOver(){tabList = this.parentNode;tabOptions = tabList.getElementsByTagName("li");for (var i=0; i<tabOptions.length; i++){if (tabOptions[i].className.indexOf(‘tabOption‘) >= 0){tabOptions[i].className = "tabOption";}}this.className += " tabOn";}--></script></head><body><div class="tabList" id="tabList1"><ul class="tabBox"><li class="tabOption tabOn"><h4><a href="http://www.0311zqjd.com" title="单击，跳转到所有[日志]列表"><span>日志</span></a></h4><div class="tabContentBox"><dl class="tabContent blog"><dt><a href="http://www.0311zqjd.com" title="手工杀毒的一些心得！">手工杀毒的一些心得！</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="">QUESTER</a></dd><dd>2009-01-10</dd><dt><a href="http://www.mamicode.com/2" title="日志标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="作者：snl">snl</a></dd><dd>2009-01-10</dd><dt><a href="http://www.0311zqjd.com" title="日志标题：网站内容结构化探讨">网站内容结构化探讨</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="作者：豆猫">豆猫</a></dd><dd>2009-01-10</dd><dt><a href="http://www.0311zqjd.com" title="Photoshop制作一张旧的黑桃A扑克牌">Photoshop制作一张旧的黑桃A扑克牌</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="作者：greengnn">greengnn</a></dd><dd>2009-01-10</dd><dt><a href="http://www.0311zqjd.com" title="日志标题：Photoshop CS3教程">Photoshop CS3教程</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="作者：amethyst01">amethyst01</a></dd><dd>2009-01-10</dd></dl></div></li><li class="tabOption"><h4><a href="http://www.0311zqjd.com" title="单击，跳转到所有[相册]列表"><span>相册</span></a></h4><div class="tabContentBox"><ul class="tabContent album"><li><a href="http://www.0311zqjd.com" title="查看相册内容"><img src="http://www.mamicode.com/UploadFiles/2014-07/2/2014727162200553.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li><li><a href="http://www.0311zqjd.com" title="查看相册内容"><img src="http://www.mamicode.com/UploadFiles/2014-07/2/2014727162200553.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li><li><a href="http://www.0311zqjd.com" title="查看相册内容"><img src="http://www.mamicode.com/UploadFiles/2014-07/2/2014727162200553.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li><li><a href="http://www.0311zqjd.com" title="查看相册内容"><img src="http://www.mamicode.com/UploadFiles/2014-07/2/2014727162200553.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> </ul></div></li><li class="tabOption"><h4><a href="http://www.0311zqjd.com" title="单击，跳转到所有[分享]列表"><span>分享</span></a></h4><div class="tabContentBox"><ul class="tabContent share"><li><a href="http://www.0311zqjd.com" title="查看内容"><img src="http://www.mamicode.com/UploadFiles/2014-07/2/2014727164159069.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li><li><a href="http://www.0311zqjd.com" title="查看内容"><img src="http://www.mamicode.com/UploadFiles/2014-07/2/2014727164159069.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li><li><a href="http://www.0311zqjd.com" title="查看内容"><img src="http://www.mamicode.com/UploadFiles/2014-07/2/2014727164159069.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li><li><a href="http://www.0311zqjd.com" title="查看内容"><img src="http://www.mamicode.com/UploadFiles/2014-07/2/2014727164159069.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li></ul></div></li><li class="tabOption"><h4><a href="http://www.0311zqjd.com" title="单击，跳转到所有[群组]列表"><span>群组</span></a></h4><div class="tabContentBox"><dl class="tabContent group"><dt><a href="http://www.0311zqjd.com" title="标题：优秀广告设计，不服不行！">优秀广告设计，不服不行！</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="群组：设计视觉">设计视觉</a></dd><dd>2009-01-10</dd><dt><a href="http://www.0311zqjd.com" title="标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="群组：手绘爱好者">手绘爱好者</a></dd><dd>2009-01-10</dd><dt><a href="http://www.0311zqjd.com" title="标题：网站内容结构化探讨">网站内容结构化探讨</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="群组：WEB标准化">WEB标准化</a></dd><dd>2009-01-10</dd><dt><a href="http://www.0311zqjd.com" title="标题：CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="群组：WEB标准化">WEB标准化</a></dd><dd>2009-01-10</dd><dt><a href="http://www.0311zqjd.com" title="标题：某些人眼中的色彩">某些人眼中的色彩</a></dt><dd class="name"><a href="http://www.0311zqjd.com" title="群组：设计视觉">设计视觉</a></dd><dd>2009-01-10</dd></dl></div></li></ul></div></body></html>

　　

较好的视觉效果的网页选项卡


联系
我们