Board logo

标题: CSS模拟制作的techweb网站导航特效代码 [打印本页]
作者: admin    时间: 2007-10-8 21:56     标题: CSS模拟制作的techweb网站导航特效代码

用CSS代码，模拟制作techweb网站导航，你需要吗？效果还和真的差不多呢！

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <style type="text/css">
  7. <!--
  8. #siteNav {
  9. clear: both;
  10. float:left;
  11. width:750px;
  12. padding-left: 1px;
  13. background: #fff;
  14. font-size:12px;
  15. font-weight: bold;
  16. line-height:normal;
  17. border-bottom:2px solid #84B0C7;
  18. voice-family: "\"}\"";
  19. voice-family: inherit;
  20. width: 749px;
  21. }
  22. #siteNav ul {
  23. margin:0;
  24. padding:0;
  25. list-style:none;
  26. }
  27. #siteNav li {
  28. display:inline;
  29. margin:0;
  30. padding:0;
  31. }
  32. #siteNav a {
  33. float:left;
  34. background:url(http://webclub.net.cn/data/071008/cssbg1.gif) no-repeat left top;
  35. margin:0;
  36. padding:0 0 0 4px;
  37. text-decoration:none;
  38. }
  39. #siteNav a span {
  40. float:left;
  41. display:block;
  42. background:url(http://webclub.net.cn/data/071008/cssbg2.gif) no-repeat right top;
  43. padding:5px 11px 4px 5px;
  44. color:#036;
  45. }
  46. /* Commented Backslash Hack hides rule from IE5-Mac \*/
  47. #siteNav a span {
  48. float:none
  49. }
  50. /* End IE5-Mac hack */
  51. #siteNav a:hover span {
  52. color:#036;
  53. }
  54. #siteNav a:hover {
  55. background-position:0% -42px;
  56. }
  57. #siteNav a:hover span {
  58. background-position:100% -42px;
  59. }
  60. #siteNav #sel a {
  61. background-position:0% -42px;
  62. }
  63. #siteNav #sel a span {
  64. background-position:100% -42px;
  65. }
  66. -->
  67. </style>
  68. <title>·网络之都·官方论坛‖css预览</title>
  69. </head>
  70. <body>
  71. <div id="siteNav">
  72. <ul>
  73.   <li id="sel"><a href="#"><span>首页</span></a></li>
  74.   <li><a href="#"><span>资讯</span></a></li>
  75.   <li><a href="#"><span>人物</span></a></li>
  76.   <li><a href="#"><span>管理</span></a></li>
  77.   <li><a href="#"><span>经营</span></a></li>
  78.   <li><a href="#"><span>财经</span></a></li>
  79.   <li><a href="#"><span>技术</span></a></li>
  80.   <li><a href="#"><span>产品</span></a></li>
  81.   <li><a href="#"><span>网络</span></a></li>
  82.   <li><a href="#"><span>电信</span></a></li>
  83.   <li><a href="#"><span>评论</span></a></li>
  84.   <li><a href="#"><span>博客</span></a></li>
  85.   <li><a href="#"><span>老友记</span></a></li>
  86.   <li><a href="#"><span>滚动</span></a></li>
  87.   <li><a href="#"><span>搜索</span></a></li>
  88.   <li><a href="#"><span>WAP</span></a></li>
  89. </ul>
  90. </div>
  91. </body>
  92. </html>
复制代码
效果预览：http://webclub.net.cn/data/071008/css.htm
作者: xibaobaoa    时间: 2007-11-12 14:11

网页打不开- -8 O; v) u* E4 L: d9 T0 |
看不到效果
作者: admin    时间: 2007-11-12 14:50

还在匈牙利主机上,忘了转过来了
2 v: r( \% c/ Y6 q- n( M* o现在已经好了



欢迎光临 捌玖网络工作室 (http://www.89w.org/) Powered by Discuz! 7.2