♦

[JS]二个简单的滑动门效果

2007年05月28日  

1.简单实用的滑动门效果，想要改变效果onmouseover 改成 onclick 就好了

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>我的滑动门</title>
  5. <style type="text/css">
  6. body{
  7. color: #000;
  8. font-family: "宋体", arial;
  9. font-size: 12px;
  10. background: #fff;
  11. text-align: center;
  12. margin: 0;
  13. }
  14. .nTab{
  15. float: left;
  16. width: 960px;
  17. margin: 0 auto;
  18. border-bottom:1px #AACCEE solid;
  19. background:#d5d5d5;
  20. background-position:left;
  21. background-repeat:repeat-y;
  22. margin-bottom:2px;
  23. }
  24. .nTab .TabTitle{
  25. clear: both;
  26. height: 22px;
  27. overflow: hidden;
  28. }
  29. .nTab .TabTitle ul{
  30. border:0;
  31. margin:0;
  32. padding:0;
  33. }
  34. .nTab .TabTitle li{
  35. float: left;
  36. width: 70px;
  37. cursor: pointer;
  38. padding-top: 4px;
  39. padding-right: 0px;
  40. padding-left: 0px;
  41. padding-bottom: 2px;
  42. list-style-type: none;
  43. }
  44. .nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
  45. .nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
  46. .nTab .TabContent{
  47. width:auto;background:#fff;
  48. margin: 0px auto;
  49. padding:10px 0 0 0;
  50. border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
  51. }
  52. .none {display:none;}
  53.  
  54. </style>
  55.  
  56. <script type="text/javascript">
  57. function nTabs(thisObj,Num){
  58. if(thisObj.className == "active")return;
  59. var tabObj = thisObj.parentNode.id;
  60. var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  61. for(i=0; i <tabList.length; i++)
  62. {
  63.   if (i == Num)
  64.   {
  65.    thisObj.className = "active";
  66.       document.getElementById(tabObj+"_Content"+i).style.display = "block";
  67.   }else{
  68.    tabList[i].className = "normal";
  69.    document.getElementById(tabObj+"_Content"+i).style.display = "none";
  70.   }
  71. }
  72. }
  73. </script>
  74.  
  75.  
  76. </head>
  77. <body>
  78. <br />
  79. <br />
  80.  
  81. <div align="center" style="padding-left:25px;">
  82. <!-- 选项卡0开始 -->
  83.   <div class="nTab">
  84.     <!-- 标题开始 -->
  85.     <div class="TabTitle">
  86.       <ul id="myTab0">
  87.         <li class="active" onmouseover="nTabs(this,0);">全部</li>
  88.         <li class="normal" onmouseover="nTabs(this,1);">日志</li>
  89.         <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
  90.         <li class="normal" onmouseover="nTabs(this,3);">相册</li>
  91.         <li class="normal" onmouseover="nTabs(this,4);">商城</li>
  92.         <li class="normal" onmouseover="nTabs(this,5);">社区</li>
  93.       </ul>
  94.     </div>
  95.     <!-- 内容开始 -->
  96.     <div class="TabContent">
  97.       <div id="myTab0_Content0"> 000 </div>
  98.       <div id="myTab0_Content1" class="none">111</div>
  99.       <div id="myTab0_Content2" class="none">222</div>
  100.       <div id="myTab0_Content3" class="none">333</div>
  101.       <div id="myTab0_Content4" class="none">444</div>
  102.       <div id="myTab0_Content5" class="none">555</div>
  103.     </div>
  104.   </div>
  105.   <!-- 选项卡0结束 -->
  106.   <!-- 选项卡1开始 -->
  107.   <div class="nTab" style=width:288px>
  108.     <!-- 标题开始 -->
  109.     <div class="TabTitle">
  110.       <ul id="myTab1">
  111.         <li class="active" onclick="nTabs(this,0);">aaa</li>
  112.         <li class="normal" onclick="nTabs(this,1);">bbb</li>
  113.         <li class="normal" onclick="nTabs(this,2);">ccc</li>
  114.         <li class="normal" onclick="nTabs(this,3);">单击</li>
  115.       </ul>
  116.     </div>
  117.     <!-- 内容开始 -->
  118.     <div class="TabContent">
  119.       <div id="myTab1_Content0"> 000 </div>
  120.       <div id="myTab1_Content1" class="none"> 111 </div>
  121.       <div id="myTab1_Content2" class="none"> 222 </div>
  122.       <div id="myTab1_Content3" class="none"> 333 </div>
  123.     </div>
  124.   </div>
  125.   <!-- 选项卡1结束 -->
  126. </div>
  127.  
  128. </body>
  129. </html>

2. 网易滑动效果！一个js，页面任意滑动数量、任意调用

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>滑动门</title>
  5. <style media="screen" type="text/css">
  6. <!--
  7. *{font-size:12px;}
  8. html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
  9. UL{list-style-type:none; margin:0px;}
  10. .ttl{height:18px;}
  11. .ctt{
  12. height:auto;
  13. padding:6px;
  14. clear:both;
  15. border: 1px solid #CCCCCC;
  16. }
  17. .w936{
  18. width:936px;
  19. clear:both;
  20. height: 120px;
  21. margin-top: 20px;
  22. margin-right: 0;
  23. margin-bottom: 2px;
  24. margin-left: 0;
  25. }
  26. .normaltab   {
  27. color:#1F3A87;
  28. }
  29. .hovertab    {
  30. color:#FF0000;
  31. background-color: #99CC00;
  32. }
  33. .dis{display:block;}
  34. .undis{display:none;}
  35.     .tabs {
  36.       width:100%;
  37.       background:#BBD9EE;
  38.       font-size:93%;
  39.       line-height:normal;
  40.       }
  41.     .tabs ul {
  42. margin:0;
  43. padding:10px 10px 0 50px;
  44. list-style:none;
  45.       }
  46.     .tabs li {
  47. display:inline;
  48. margin:0;
  49. padding:0;
  50. cursor: pointer;
  51.       }
  52.     .tabs a {
  53.       float:left;
  54.       background:url("attachments/month_0705/r200752813247.gif") no-repeat left top;
  55.       margin:0;
  56.       padding:0 0 0 4px;
  57.       text-decoration:none;
  58.       }
  59.     .tabs a span {
  60.       float:left;
  61.       display:block;
  62.       background:url("attachments/month_0705/d200752813252.gif") no-repeat right top;
  63.       padding:5px 15px 4px 6px;
  64.       color:#666;
  65.       }
  66.     .tabs a span {float:none;}
  67.     .tabs a:hover span {
  68.       color:#FF9834;
  69.       }
  70.     .tabs a:hover {
  71.       background-position:0% -42px;
  72.       }
  73.     .tabs a:hover span {
  74.       background-position:100% -42px;
  75.       }
  76. -->
  77. </style>
  78. <script type="text/javascript" language="javascript">
  79. <!--
  80. function g(o){return document.getElementById(o);}
  81. function HoverLi(n)
  82. {
  83. for(var i=1;i<=24;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
  84. g('tbc_0'+n).className='dis';g('tb_'+n);
  85. }
  86. //-->
  87. </script>
  88. </head>
  89.  
  90. <body>
  91.  
  92. <div class="w936">
  93. <div id="tb_" class="tb_ tabs">
  94. <ul>
  95. <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航</span></a></li>
  96. <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航</span></a></li>
  97. <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航</span></a></li>
  98. <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>栏目导航</span></a></li>
  99. <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>栏目导航</span></a></li>
  100. <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>栏目导航</span></a></li>
  101. <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>栏目导航</span></a></li>
  102. <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>栏目导航</span></a></li>
  103. </ul>
  104. </div>
  105. <div class="ctt">
  106. <div class="dis" id="tbc_01">内容1</div>
  107. <div class="undis" id="tbc_02">内容2</div>
  108. <div class="undis" id="tbc_03">内容3</div>
  109. <div class="undis" id="tbc_04">内容4</div>
  110. <div class="undis" id="tbc_05">内容5</div>
  111. <div class="undis" id="tbc_06">内容6</div>
  112. <div class="undis" id="tbc_07">内容7</div>
  113. <div class="undis" id="tbc_08">内容8</div>
  114. </div>
  115. </div>
  116. <div class="w936">
  117. <div id="tb_" class="tb_  tabs">
  118. <ul>
  119. <li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>栏目导航</span></a></li>
  120. <li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>栏目导航</span></a></li>
  121. <li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>栏目导航</span></a></li>
  122. <li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>栏目导航</span></a></li>
  123. <li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>栏目导航</span></a></li>
  124. <li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>栏目导航</span></a></li>
  125. <li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>栏目导航</span></a></li>
  126. <li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>栏目导航</span></a></li>
  127. </ul>
  128. </div>
  129. <div class="ctt">
  130. <div class="dis" id="tbc_09">内容9</div>
  131. <div class="undis" id="tbc_010">内容10</div>
  132. <div class="undis" id="tbc_011">内容11</div>
  133. <div class="undis" id="tbc_012">内容12</div>
  134. <div class="undis" id="tbc_013">内容13</div>
  135. <div class="undis" id="tbc_014">内容14</div>
  136. <div class="undis" id="tbc_015">内容15</div>
  137. <div class="undis" id="tbc_016">内容16</div>
  138. </div>
  139. </div>
  140. <div class="w936">
  141. <div id="tb_" class="tb_  tabs">
  142. <ul>
  143. <li id="tb_17" onmouseover="HoverLi(17);"><a href="#"><span>栏目导航</span></a></li>
  144. <li id="tb_18" onmouseover="HoverLi(18);"><a href="#"><span>栏目导航</span></a></li>
  145. <li id="tb_19" onmouseover="HoverLi(19);"><a href="#"><span>栏目导航</span></a></li>
  146. <li id="tb_20" onmouseover="HoverLi(20);"><a href="#"><span>栏目导航</span></a></li>
  147. <li id="tb_21" onmouseover="HoverLi(21);"><a href="#"><span>栏目导航</span></a></li>
  148. <li id="tb_22" onmouseover="HoverLi(22);"><a href="#"><span>栏目导航</span></a></li>
  149. <li id="tb_23" conmouseover="HoverLi(23);"><a href="#"><span>栏目导航</span></a></li>
  150. <li id="tb_24" onmouseover="HoverLi(24);"><a href="#"><span>栏目导航</span></a></li>
  151. </ul>
  152. </div>
  153. <div class="ctt">
  154. <div class="dis" id="tbc_017">内容17</div>
  155. <div class="undis" id="tbc_018">内容18</div>
  156. <div class="undis" id="tbc_019">内容19</div>
  157. <div class="undis" id="tbc_020">内容20</div>
  158. <div class="undis" id="tbc_021">内容21</div>
  159. <div class="undis" id="tbc_022">内容22</div>
  160. <div class="undis" id="tbc_023">内容23</div>
  161. <div class="undis" id="tbc_024">内容24</div>
  162. </div>
  163. </div>
  164. </body>
  165. </html>

0个评论  标签:   

[SEO] 影响SEO的细节(转)

2007年05月28日  

1、将css与javascript全部用下边的方法分离到外部文件中去,让html代码最大可能的只是用来显示实际内容。

2、采用xhtml代码编写页面，抛弃传统Table布局模式，去掉页面中的例如font/bgcolor等格式化控制标签。用符合web标准的代码来制作页面。这样能够让xhtml代码结构化、语义化。提高页面代码的可读性。

3、采用了上边的方法你会发现你的html代码会变得非常小，当然如果可以的话。让它变得更小。太大的页面会影响搜索引擎的处理速度。一般通过xhtml+css设计的网页，html代码应该可以控制在50K以内。大家可以去看一下用web标准重构得比较好的网站。

4、用好图片的alt标签，合理的使用页面关键字去描述图片，这样能增加页面的关键字密度。

5、尽可能少地使用javascript来做与内容相关的事情，例如用document.write去显示正文。这样会影响搜索引擎对页面内容的搜索。

6、千万不要用javascript来实现你网站的导航。那样会让搜索引擎迷失方向。

7、每个页面的关键字尽可能出现在页面的标题，也就是头部的Title标签中。当然，要合理应用，不要太长，更别用大量与页面内容无关的网络热门关键字。因为那就不是优化而是在作弊。

8、尽量在每个页面代码中合理使用

等标签并让你的关键字出现在

标签中，让页面的文档结构更清晰。

我是做网页制作的，所以SEO的诸多专业技术及算法我都不是非常了解。如果您想了解更多关于这方法的知识，建议您访问一些国内知名的SEO优化类的网站，比如点石互动等。在那里你能查阅到很多关于“反向链接”、“页面PR值”等专业知识。这里只是将我在页面制作的过程中涉及到的一些细节问题拿出来和大家探讨一下。由此也可以说明为什么基于web标准设计的网站会更有利于SEO了。

如果您不打算花钱去请专业的SEOer来为您的网站做优化，那么可以让页面制作人员在制作上注意一些细节。相信这样免费的一些细节也能达到一个比较好的效果。

0个评论  标签:   

一个很不错的图片淡入淡出效果

2006年10月25日  

鼠标移动一下，就会显示图片了。淡入淡出效果。不错哦 ->

  1. <script>
  2. function high(which2){
  3. theobject=which2
  4. highlighting=setInterval("highlightit(theobject)",50)
  5. }
  6. function low(which2){
  7. theobject=which2
  8. highlighting=setInterval("lowlightit(theobject)",50)
  9. }
  10. function highlightit(cur2){
  11. if (cur2.filters.alpha.opacity<100)
  12. cur2.filters.alpha.opacity+=10
  13. else if (window.highlighting)
  14. clearInterval(highlighting)
  15. }
  16. function lowlightit(cur2){
  17. if (cur2.filters.alpha.opacity>0)
  18. cur2.filters.alpha.opacity-=10
  19. else if (window.highlighting)
  20. clearInterval(highlighting)
  21. }
  22. </script>
  23. <a href="#"><img src="http://www.blueidea.com/img/common/logo.gif" onMouseOut="low(this)" onMouseOver="high(this)" style="FILTER: alpha(opacity=0)" border="0"></a>

0个评论  标签:   

btchina效果(2个鼠标效果，1个显示div，1个悬停)

2006年08月21日  
  1. <script>
  2. var timer=null;
  3. </script>
  4. <center>
  5. <a href="#" onclick="return false" onmouseover="disp1()" onmouseout="timer=setTimeout('hide()',500)">Blueidea Web Team
  6. </a>
  7. <div id="mydiv" style="position:absolute;visibility:hidden;border:1px black solid;background-color:yellow;padding:10px;line-height:140%" onmouseover="clearTimeout(timer)" onmouseout="setTimeout('hide()',500)">
  8. 科技新闻<br />
  9. 社会新闻<br />
  10. <img src="<a href="http://bbs.blueidea.com/customavatars/Sheneyan.gif" target="_blank">http://bbs.blueidea.com/customavatars/Sheneyan.gif</a>"><br />
  11. 娱乐新闻<br />
  12. 金翅擘海<br />
  13. </div>
  14. <script>
  15. function hide() {
  16. mydiv.style.visibility="hidden";
  17. }
  18. function disp1(){
  19. mydiv.style.visibility="visible";
  20. mydiv.style.left=event.srcElement.offsetLeft;
  21. mydiv.style.top=event.srcElement.offsetTop+event.srcElement.offsetHeight-2;
  22. }
  23.  
  24. </script>
  1. <style type=text/css>BODY {
  2. OVERFLOW: scroll; OVERFLOW-X: hidden
  3. }
  4. .DEK {
  5. POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 200
  6. }
  7. A.js:link {
  8. COLOR: #ff0000; LINE-HEIGHT: 120%; TEXT-DECORATION: none
  9. }
  10. A.js:visited {
  11. COLOR: #ff0000; LINE-HEIGHT: 120%; TEXT-DECORATION: none
  12. }
  13. A.js:hover {
  14. COLOR: #ff3300; LINE-HEIGHT: 120%; TEXT-DECORATION: underline
  15. }
  16. A.js:active {
  17. COLOR: #ff3300; LINE-HEIGHT: 120%; TEXT-DECORATION: underline
  18. }
  19. </style>
  20.  
  21.  
  22. <center>
  23. <table border=0 cellPadding=0 cellSpacing=0 height="42%" width="36%">
  24.   <tbody>
  25.   <tr>
  26.     <td align=middle><br />
  27.       <div class=dek id=dek style="left: 67px; top: 66px; width: 289px; height: 17px"></div>
  28.       <script type=text/javascript>
  29. Xoffset=-60;
  30. Yoffset= 20;
  31.  
  32. var nav,old,iex=(document.all),yyy=-1000;
  33. if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;}
  34.  
  35. if(!old){
  36. var skn=(nav)?document.dek:dek.style;
  37. if(nav)document.captureEvents(Event.MOUSEMOVE);
  38. document.onmousemove=get_mouse;
  39. }
  40.  
  41. function popup(msg,bak){
  42. var content="<table WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
  43. "BGCOLOR="+bak+"><td ALIGN=center><font COLOR=black SIZE=2>"+msg+"</font></td></table>";
  44. if(old){alert(msg);return;}
  45. else{yyy=Yoffset;
  46. if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"}
  47. if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"}
  48. }
  49. }
  50.  
  51. function get_mouse(e){
  52. var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
  53. var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
  54. }
  55.  
  56. function kill(){
  57. if(!old){yyy=-1000;skn.visibility="hidden";}
  58. }
  59. </script>
  60.       <a href="#" onmouseout=kill()
  61.       onmouseover="popup('这里是链接一的提示<br />可以定义不同的背景颜色以及链接等等','lightgreen')"
  62.       ;>演示链接一</a> <a href="#" onmouseout=kill()
  63.       onmouseover="popup('这里是链接二的提示<br />可以定义不同的背景颜色以及链接等等','lightblue')"
  64.       ;>演示链接二</a></td>
  65.   </tr></tbody></table>

2个评论  标签:   

发俩个符合标准到下拉菜单

2006年08月10日  
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>css菜单演示</title>
  5.  
  6.  
  7. <style type="text/css">
  8. <!--
  9.  
  10. *{margin:0;padding:0;border:0;}
  11. body {
  12. font-family: arial, 宋体, serif;
  13.         font-size:12px;
  14. }
  15.  
  16.  
  17. #nav {
  18.   line-height: 24px;  list-style-type: none; background:#666;
  19. }
  20.  
  21. #nav a {
  22. display: block; width: 80px; text-align:center;
  23. }
  24.  
  25. #nav a:link  {
  26. color:#666; text-decoration:none;
  27. }
  28. #nav a:visited  {
  29. color:#666;text-decoration:none;
  30. }
  31. #nav a:hover  {
  32. color:#FFF;text-decoration:none;font-weight:bold;
  33. }
  34.  
  35. #nav li {
  36. float: left; width: 80px; background:#CCC;
  37. }
  38. #nav li a:hover{
  39. background:#999;
  40. }
  41. #nav li ul {
  42. line-height: 27px;  list-style-type: none;text-align:left;
  43. left: -999em; width: 180px; position: absolute;
  44. }
  45. #nav li ul li{
  46. float: left; width: 180px;
  47. background: #F6F6F6;
  48. }
  49.  
  50.  
  51. #nav li ul a{
  52. display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
  53. }
  54.  
  55. #nav li ul a:link  {
  56. color:#666; text-decoration:none;
  57. }
  58. #nav li ul a:visited  {
  59. color:#666;text-decoration:none;
  60. }
  61. #nav li ul a:hover  {
  62. color:#F3F3F3;text-decoration:none;font-weight:normal;
  63. background:#C00;
  64. }
  65.  
  66. #nav li:hover ul {
  67. left: auto;
  68. }
  69. #nav li.sfhover ul {
  70. left: auto;
  71. }
  72. #content {
  73. clear: left;
  74. }
  75.  
  76.  
  77. -->
  78. </style>
  79.  
  80. <script type=text/javascript><!--//--><![CDATA[//><!--
  81. function menuFix() {
  82. var sfEls = document.getElementById("nav").getElementsByTagName("li");
  83. for (var i=0; i<sfEls.length; i++) {
  84.   sfEls[i].onmouseover=function() {
  85.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  86.   }
  87.   sfEls[i].onMouseDown=function() {
  88.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  89.   }
  90.   sfEls[i].onMouseUp=function() {
  91.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  92.   }
  93.   sfEls[i].onmouseout=function() {
  94.   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
  95.  
  96. "");
  97.   }
  98. }
  99. }
  100. window.onload=menuFix;
  101.  
  102. //--><!]]></script>
  103.  
  104. </head>
  105. <body>
  106.  
  107.  
  108. <ul id="nav">
  109. <li><a href="#">产品介绍</a>
  110.  <ul>
  111.  <li><a href="#">产品一</a></li>
  112.  <li><a href="#">产品一</a></li>
  113.  <li><a href="#">产品一</a></li>
  114.  <li><a href="#">产品一</a></li>
  115.  <li><a href="#">产品一</a></li>
  116.  <li><a href="#">产品一</a></li>
  117.  </ul>
  118. </li>
  119. <li><a href="#">服务介绍</a>
  120.  <ul>
  121.  <li><a href="#">服务二</a></li>
  122.  <li><a href="#">服务二</a></li>
  123.  <li><a href="#">服务二</a></li>
  124.  <li><a href="#">服务二服务二</a></li>
  125.  <li><a href="#">服务二服务二服务二</a></li>
  126.  <li><a href="#">服务二</a></li>
  127.  </ul>
  128. </li>
  129. <li><a href="#">成功案例</a>
  130.  <ul>
  131.  <li><a href="#">案例三</a></li>
  132.  <li><a href="#">案例</a></li>
  133.  <li><a href="#">案例三案例三</a></li>
  134.  <li><a href="#">案例三案例三案例三</a></li>
  135.  </ul>
  136. </li>
  137. <li><a href="#">关于我们</a>
  138.  <ul>
  139.  <li><a href="#">我们四</a></li>
  140.  <li><a href="#">我们四</a></li>
  141.  <li><a href="#">我们四</a></li>
  142.  <li><a href="#">我们四111</a></li>
  143.  </ul>
  144. </li>
  145.  
  146. <li><a href="#">在线演示</a>
  147.  <ul>
  148.  <li><a href="#">演示</a></li>
  149.  <li><a href="#">演示</a></li>
  150.  <li><a href="#">演示</a></li>
  151.  <li><a href="#">演示演示演示</a></li>
  152.  <li><a href="#">演示演示演示</a></li>
  153.  <li><a href="#">演示演示</a></li>
  154.  <li><a href="#">演示演示演示</a></li>
  155.  <li><a href="#">演示演示演示演示演示</a></li>
  156.  </ul>
  157. </li>
  158. <li><a href="#">联系我们</a>
  159.  <ul>
  160.  <li><a href="#">联系联系联系联系联系</a></li>
  161.  <li><a href="#">联系联系联系</a></li>
  162.  <li><a href="#">联系</a></li>
  163.  <li><a href="#">联系联系</a></li>
  164.  <li><a href="#">联系联系</a></li>
  165.  <li><a href="#">联系联系联系</a></li>
  166.  <li><a href="#">联系联系联系</a></li>
  167.  </ul>
  168. </li>
  169.  
  170. </ul>
  171.  
  172. </body>
  173. </html>
  1. <html><head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  3. <title>css菜单演示</title>
  4.  
  5.  
  6. <style type="text/css">
  7. <!--
  8.  
  9. *{margin:0;padding:0;border:0;}
  10. body {
  11. font-family: arial, 宋体, serif;
  12.         font-size:12px;
  13. }
  14.  
  15.  
  16. #nav {
  17.   line-height: 24px;  list-style-type: none; background:#666;   width:80px;
  18. }
  19.  
  20. #nav a {
  21. display: block; width: 80px; text-align:center;
  22. }
  23.  
  24. #nav a:link  {
  25. color:#666; text-decoration:none;
  26. }
  27. #nav a:visited  {
  28. color:#666;text-decoration:none;
  29. }
  30. #nav a:hover  {
  31. color:#FFF;text-decoration:none;font-weight:bold;
  32. }
  33.  
  34. #nav li {
  35. /*float: left*/; width: 80px; background:#CCC;
  36. }
  37. #nav li a:hover{
  38. background:#999;
  39. }
  40. #nav li ul {
  41. line-height: 27px;  list-style-type: none;text-align:left;
  42. left: -999em; width: 180px; position: absolute;
  43. }
  44. #nav li ul li{
  45. float: left; width: 180px;
  46. background: #F6F6F6;
  47. }
  48.  
  49.  
  50. #nav li ul a{
  51. display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
  52. }
  53.  
  54. #nav li ul a:link  {
  55. color:#666; text-decoration:none;
  56. }
  57. #nav li ul a:visited  {
  58. color:#666;text-decoration:none;
  59. }
  60. #nav li ul a:hover  {
  61. color:#F3F3F3;text-decoration:none;font-weight:normal;
  62. background:#C00;
  63. }
  64.  
  65. #nav li:hover ul {
  66. left: auto;
  67. }
  68. #nav li.sfhover ul {
  69. left: auto;
  70. }
  71. #nav li.sfhover a {
  72. float:left;
  73. }
  74. #content {
  75. clear: left;
  76. }
  77.  
  78.  
  79. -->
  80. </style>
  81.  
  82. <script type=text/javascript><!--//--><![CDATA[//><!--
  83. function menuFix() {
  84. var sfEls = document.getElementById("nav").getElementsByTagName("li");
  85. for (var i=0; i<sfEls.length; i++) {
  86.   sfEls[i].onmouseover=function() {
  87.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  88.   }
  89.   sfEls[i].onMouseDown=function() {
  90.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  91.   }
  92.   sfEls[i].onMouseUp=function() {
  93.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  94.   }
  95.   sfEls[i].onmouseout=function() {
  96.   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
  97.  
  98. "");
  99.   }
  100. }
  101. }
  102. window.onload=menuFix;
  103.  
  104. //--><!]]></script>
  105.  
  106. </head>
  107. <body>
  108.  
  109.  
  110. <ul id="nav">
  111. <li><a href="#">产品介绍</a>
  112.  <ul>
  113.  <li><a href="#">产品一</a></li>
  114.  <li><a href="#">产品一</a></li>
  115.  <li><a href="#">产品一</a></li>
  116.  <li><a href="#">产品一</a></li>
  117.  <li><a href="#">产品一</a></li>
  118.  <li><a href="#">产品一</a></li>
  119.  </ul>
  120. </li>
  121. <li><a href="#">服务介绍</a>
  122.  <ul>
  123.  <li><a href="#">服务二</a></li>
  124.  <li><a href="#">服务二</a></li>
  125.  <li><a href="#">服务二</a></li>
  126.  <li><a href="#">服务二服务二</a></li>
  127.  <li><a href="#">服务二服务二服务二</a></li>
  128.  <li><a href="#">服务二</a></li>
  129.  </ul>
  130. </li>
  131. <li><a href="#">成功案例</a>
  132.  <ul>
  133.  <li><a href="#">案例三</a></li>
  134.  <li><a href="#">案例</a></li>
  135.  <li><a href="#">案例三案例三</a></li>
  136.  <li><a href="#">案例三案例三案例三</a></li>
  137.  </ul>
  138. </li>
  139. <li><a href="#">关于我们</a>
  140.  <ul>
  141.  <li><a href="#">我们四</a></li>
  142.  <li><a href="#">我们四</a></li>
  143.  <li><a href="#">我们四</a></li>
  144.  <li><a href="#">我们四111</a></li>
  145.  </ul>
  146. </li>
  147.  
  148. <li><a href="#">在线演示</a>
  149.  <ul>
  150.  <li><a href="#">演示</a></li>
  151.  <li><a href="#">演示</a></li>
  152.  <li><a href="#">演示</a></li>
  153.  <li><a href="#">演示演示演示</a></li>
  154.  <li><a href="#">演示演示演示</a></li>
  155.  <li><a href="#">演示演示</a></li>
  156.  <li><a href="#">演示演示演示</a></li>
  157.  <li><a href="#">演示演示演示演示演示</a></li>
  158.  </ul>
  159. </li>
  160. <li><a href="#">联系我们</a>
  161.  <ul>
  162.  <li><a href="#">联系联系联系联系联系</a></li>
  163.  <li><a href="#">联系联系联系</a></li>
  164.  <li><a href="#">联系</a></li>
  165.  <li><a href="#">联系联系</a></li>
  166.  <li><a href="#">联系联系</a></li>
  167.  <li><a href="#">联系联系联系</a></li>
  168.  <li><a href="#">联系联系联系</a></li>
  169.  </ul>
  170. </li>
  171.  
  172. </ul>
  173.  
  174. </body>
  175. </html>

无觅相关文章插件，快速提升流量

0个评论  标签: ,   

« 上一页下一页 »

这里都有我

分类

标签云

密码 1sight 书 明朝那些事儿 game 一嗨租车 项目 taobao 万树 交互设计 bug ios javascript self 标准 online 读书笔记 mac 公开课 asp 苦逼设计师 rss 鲜果 吆喝 用户体验 资源 ifs css/html html 2012 设计笔记

最新文章