设为首页 | 热门标签 | RSS 订阅 | 加入收藏
游客可以选择 菜鸟导航 | 成为会员 | 马上登陆

返回首页
当前位置: 主页 > 资料馆 > 正文

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

时间:2009-08-19 21:32 作者:飞雪鸿云 来源:未知 点击: 次
较好的视觉效果的网页选项卡
　　

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>选项卡</title> 
  6. <style type="text/css"> 
  7. <!--  
  8. /* 初始化 */  
  9. body {  
  10. font: 12px/1 "宋体", SimSun, serif;  
  11. background:#fff;  
  12. color:#000;  
  13. }  
  14. ul,  
  15. li,  
  16. dl,  
  17. dt,  
  18. dd {  
  19. margin:0;  
  20. padding:0;  /* 清除浏览器默认的margin和padding值 */  
  21. }  
  22. ul,  
  23. li {  
  24. list-style:none outside;  /* 清除浏览器中列表项默认的占位 */  
  25. }  
  26. a {  
  27. text-decoration:none;  
  28. }  
  29. img {  
  30. border:0;  
  31. }  
  32. /* 选项卡整体外观定义 */  
  33. .tabList {  
  34. width:400px;  
  35. height:160px;  
  36. overflow:hidden;  
  37. }  
  38. .tabList .tabBox {  
  39. height:100%;  
  40. position:relative;  
  41. background:#09c;  
  42. }  
  43. .tabList .tabBox li {  
  44. float:left;  
  45. width:25%;  
  46. text-align:center;  
  47. }  
  48. .tabList h4 {  
  49. margin:0;  
  50. height:26px;  
  51. font-size:1em;  
  52. line-height:22px;  
  53. }  
  54. .tabList h4 a {  
  55. color:#039;  
  56. font-weight:normal;  
  57. display:block;  
  58. background:#bfeafd url(/teixiao/UploadFiles_4612/200902/20090226095425984.png) no-repeat;  
  59. padding-left:5px;  
  60. }  
  61. .tabList h4 a span {  
  62. display:block;  
  63. background:url(/teixiao/UploadFiles_4612/200902/20090226095425984.png) no-repeat top right;  
  64. padding-right:5px;  
  65. }  
  66. .tabList h4 a:hover,  
  67. .tabList .tabOn h4 a{  
  68. background-position:0 -50px;  
  69. }  
  70. .tabList h4 a:hover span,  
  71. .tabList .tabOn h4 a span {  
  72. background-position:right -50px;  
  73. }  
  74. .tabList .tabContentBox li{  
  75. width:auto;  
  76. margin-top:0;  
  77. }  
  78. .tabList .tabContentBox {  
  79. width:390px;  
  80. height:130px;  
  81. border:1px solid #069;  
  82. text-align:left;  
  83. overflow:hidden;  
  84. background:#fff;  
  85. position:absolute;  
  86. top:22px;  
  87. left:0;  
  88. display:none;  
  89. margin:4px;  
  90. }  
  91. .tabList li:hover .tabContentBox,  
  92. .tabList .tabOn .tabContentBox {  
  93. display:block;  
  94. }  
  95. /* 以下是对各项内容的CSS定义 */  
  96. .tabList .tabContentBox .blog,  
  97. .tabList .tabContentBox .group {  
  98. color:#999;  
  99. line-height:2em;  
  100. margin:5px;  
  101. }  
  102. .tabList .tabContentBox .blog dt,  
  103. .tabList .tabContentBox .group dt,  
  104. .tabList .tabContentBox .blog dd,  
  105. .tabList .tabContentBox .group dd{  
  106. float:left;  
  107. border-bottom: 1px dotted #9cf;  
  108. }  
  109. .tabList .tabContentBox .blog dt,  
  110. .tabList .tabContentBox .group dt {  
  111. width:60%;  
  112. white-space:nowrap;  
  113. overflow:hidden;  
  114. clear:left;  
  115. font-size:1.1em;  
  116. }  
  117. .tabList .tabContentBox .blog dt a,  
  118. .tabList .tabContentBox .group dt a {  
  119. color:#039;  
  120. display:block;  
  121. margin-left:5px;  
  122. padding-left:12px;  
  123. background: url(/teixiao/UploadFiles_4612/200902/20090226095425402.png) no-repeat 5px 11px;  
  124. }  
  125. .tabList .tabContentBox .blog dt a:hover,  
  126. .tabList .tabContentBox .group dt a:hover {  
  127. color:#f90;  
  128. background-position:5px -19px;  
  129. }  
  130. .tabList .tabContentBox .blog dd,  
  131. .tabList .tabContentBox .group dd {  
  132. color:#0cf;  
  133. width:20%;  
  134. float:left;  
  135. white-space:nowrap;  
  136. overflow:hidden;  
  137. }  
  138. .tabList .tabContentBox .blog dd a,  
  139. .tabList .tabContentBox .group dd a {  
  140. color:#069;  
  141. }  
  142. .tabList .tabContentBox .blog dd a:hover,  
  143. .tabList .tabContentBox .group dd a:hover {  
  144. color:#f90;  
  145. }  
  146. .tabList .tabContentBox .album li,  
  147. .tabList .tabContentBox .share li{  
  148. width:24.9%;  
  149. float:left;  
  150. padding-top:15px;  
  151. text-align:center;  
  152. }  
  153. --> 
  154. </style> 
  155. <script type="text/javascript" language="javascript"> 
  156. <!--  
  157. window.onload = tabEffect;  
  158. function tabEffect()  
  159. {  
  160. var allElements = document.getElementsByTagName('*');  
  161. for (var i=0; i<allElements.length; i++)  
  162. {  
  163. if (allElements[i].className.indexOf('tabOption') >= 0)  
  164. {  
  165. allElements[i].onmouseover = mouseOver;  
  166. }  
  167. }  
  168. }  
  169. function mouseOver()  
  170. {  
  171. tabList = this.parentNode;  
  172. tabOptions = tabList.getElementsByTagName("li");  
  173. for (var i=0; i<tabOptions.length; i++)  
  174. {  
  175. if (tabOptions[i].className.indexOf('tabOption') >= 0)  
  176. {  
  177. tabOptions[i].className = "tabOption";  
  178. }  
  179. }  
  180. this.className += " tabOn";  
  181. }  
  182. --> 
  183. </script> 
  184. </head> 
  185. <body> 
  186. <div class="tabList" id="tabList1"> 
  187. <ul class="tabBox"> 
  188. <li class="tabOption tabOn"><h4><a href="/blog/" title="单击，跳转到所有[日志]列表"><span>日志</span></a></h4> 
  189. <div class="tabContentBox"> 
  190. <dl class="tabContent blog"> 
  191. <dt><a href="http://www.wangyeba.com/security/basexsrm-9739.html" title="手工杀毒的一些心得！">手工杀毒的一些心得！</a></dt> 
  192. <dd class="name"><a href="#11" title="">QUESTER</a></dd> 
  193. <dd>2009-01-10</dd> 
  194. <dt><a href="/2" title="日志标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt> 
  195. <dd class="name"><a href="#11" title="作者：snl">snl</a></dd> 
  196. <dd>2009-01-10</dd> 
  197. <dt><a href="/3" title="日志标题：网站内容结构化探讨">网站内容结构化探讨</a></dt> 
  198. <dd class="name"><a href="#11" title="作者：豆猫">豆猫</a></dd> 
  199. <dd>2009-01-10</dd> 
  200. <dt><a href="http://www.wangyeba.com/photoshop/psmouse-9733.html" title="Photoshop制作一张旧的黑桃A扑克牌">Photoshop制作一张旧的黑桃A扑克牌</a></dt> 
  201. <dd class="name"><a href="#11" title="作者：greengnn">greengnn</a></dd> 
  202. <dd>2009-01-10</dd> 
  203. <dt><a href="http://www.wangyeba.com/photoshop/" title="日志标题：Photoshop CS3教程">Photoshop CS3教程</a></dt> 
  204. <dd class="name"><a href="#11" title="作者：amethyst01">amethyst01</a></dd> 
  205. <dd>2009-01-10</dd> 
  206. </dl> 
  207. </div> 
  208. </li> 
  209. <li class="tabOption"><h4><a href="/album/" title="单击，跳转到所有[相册]列表"><span>相册</span></a></h4> 
  210. <div class="tabContentBox"> 
  211. <ul class="tabContent album"> 
  212. <li><a href="/img1" title="查看相册内容"><img src="/teixiao/UploadFiles_4612/200902/20090226095425992.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> 
  213. <li><a href="/img1" title="查看相册内容"><img src="/teixiao/UploadFiles_4612/200902/20090226095425992.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> 
  214. <li><a href="/img1" title="查看相册内容"><img src="/teixiao/UploadFiles_4612/200902/20090226095425992.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> 
  215. <li><a href="/img1" title="查看相册内容"><img src="/teixiao/UploadFiles_4612/200902/20090226095425992.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>      </ul> 
  216. </div> 
  217. </li> 
  218. <li class="tabOption"><h4><a href="/share/" title="单击，跳转到所有[分享]列表"><span>分享</span></a></h4> 
  219. <div class="tabContentBox"> 
  220. <ul class="tabContent share"> 
  221. <li><a href="/img2" title="查看内容"><img src="/teixiao/UploadFiles_4612/200902/20090226095425503.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> 
  222. <li><a href="/img2" title="查看内容"><img src="/teixiao/UploadFiles_4612/200902/20090226095425503.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> 
  223. <li><a href="/img2" title="查看内容"><img src="/teixiao/UploadFiles_4612/200902/20090226095425503.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> 
  224. <li><a href="/img2" title="查看内容"><img src="/teixiao/UploadFiles_4612/200902/20090226095425503.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> 
  225. </ul> 
  226. </div> 
  227. </li> 
  228. <li class="tabOption"><h4><a href="/group/" title="单击，跳转到所有[群组]列表"><span>群组</span></a></h4> 
  229. <div class="tabContentBox"> 
  230. <dl class="tabContent group"> 
  231. <dt><a href="/1" title="标题：优秀广告设计，不服不行！">优秀广告设计，不服不行！</a></dt> 
  232. <dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd> 
  233. <dd>2009-01-10</dd> 
  234. <dt><a href="/2" title="标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt> 
  235. <dd class="name"><a href="#11" title="群组：手绘爱好者">手绘爱好者</a></dd> 
  236. <dd>2009-01-10</dd> 
  237. <dt><a href="/3" title="标题：网站内容结构化探讨">网站内容结构化探讨</a></dt> 
  238. <dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd> 
  239. <dd>2009-01-10</dd> 
  240. <dt><a href="/4" title="标题：CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt> 
  241. <dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd> 
  242. <dd>2009-01-10</dd> 
  243. <dt><a href="/5" title="标题：某些人眼中的色彩">某些人眼中的色彩</a></dt> 
  244. <dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd> 
  245. <dd>2009-01-10</dd> 
  246. </dl> 
  247. </div> 
  248. </li> 
  249. </ul> 
  250. </div> 
  251. </body> 
  252. </html> 

 

顶一下
(0)
0%
踩一下
(0)
0%
本站声明：本站文章，如无特别说明，均为转载或者节选自其他网站。
如本文内容侵犯了您的合法权益，请与责任编辑联系。谢谢合作！
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
发布者资料
飞雪鸿云 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:1970-01-01 08:01 最后登录:2009-09-06 14:09
热点文章
相关教程

关于我们 | 站点地图 | 广告服务 | 友情链接 | 论坛 |

沪ICP备05017900号

Copyright © 2009-2010 菜鸟阵地