CSS打造经典鼠标触发显示选项

CSS打造经典鼠标触发显示选项650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/attachment/201203/111634937.png" />

  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=utf-8" />
  5. <meta http-equiv="Content-Language" content="zh-CN" />
  6. <title>css打造鼠标触发效果</title>
  7. <style type="text/css">
  8. <!--
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. color: #000;
  13. font-size: 12px;
  14. line-height: 160%;
  15. text-align: left;
  16. height: 100%;
  17. font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode';
  18. }
  19. *{ margin:0; padding:0;}
  20. h2,h2 a:link,h2 a:hover,h2 a:visited{
  21. font-size: 14px;
  22. text-decoration: none;
  23. color: #000000;
  24. }
  25. .kw_from {
  26. padding:20px 0 0 0px;
  27. margin: auto;
  28. height: 300px;
  29. overflow: hidden;
  30. width: 650px;
  31. }
  32. .kw_from .sbtn{
  33. float:left;
  34. width:80px;
  35. padding: 16px 0 0 0;
  36. }
  37. .kw_from .searchMore{
  38. float:left;
  39. width:80px;
  40. padding: 4px;
  41. }
  42. #searchNav {
  43. width:430px;
  44. float: left;
  45. }
  46. #searchNav #conter1, #searchNav #conter3{
  47. float:left;
  48. width:250px;
  49. }
  50. #searchNav #conter2, #searchNav #conter4{
  51. float:left;
  52. width:180px;
  53. }
  54. #searchNav ul {
  55. padding: 0;
  56. margin: 0;
  57. list-style: none;
  58. }
  59. #searchNav li {
  60. float: left;
  61. }
  62. #searchNav li ul {
  63. display: none;
  64. top: 20px;
  65. }
  66. #searchNav li:hover ul, #searchNav li.over ul {
  67. display: block;
  68. float:left;
  69. }
  70. #searchNav ul li a{
  71. float:left;
  72. display:block;
  73. font-size:12px;
  74. padding:3px;
  75. text-decoration: none;
  76. color: #777;
  77. }
  78. #searchNav ul li a:hover{
  79. background-color:#f4f4f4;
  80. }
  81. #searchNav #jobKw{
  82. width:220px;
  83. height:18px;
  84. }
  85. #searchNav #cityKw{
  86. width:130px;
  87. height:18px;
  88. }
  89. -->
  90. </style>
  91. <script type="text/javascript">
  92. <!--//--><![CDATA[//>
  93. <!--
  94. startList = function() {
  95. if (document.all&&document.getElementById) {
  96. navRoot = document.getElementById("searchNav");
  97. for (i=0; i<navRoot.childNodes.length; i++) {
  98. node = navRoot.childNodes[i];
  99. if (node.nodeName=="LI") {
  100. node.onmouseover=function() {
  101. this.className+=" over";
  102. }
  103. node.onmouseout=function() {
  104. this.className=this.className.replace(" over", "");
  105. }
  106. }
  107. }
  108. }
  109. }
  110. window.onload=startList;
  111. //--><!]]>
  112. </script>
  113. </head>
  114. <body>
  115. <div class="kw_from">
  116. <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()">
  117. <ul id="searchNav">
  118. <li id="conter1"><h2>找什么</h2>
  119. <input id="jobKw" name="jobKw" type="text" />
  120. <ul id="conter3">
  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><span class="moreCity"><a href="#">更多>> </a></span></li>
  126. </ul>
  127. </li>
  128. <li id="conter2"><h2>在那里</h2>
  129. <input id="cityKw" name="cityKw" type="text" />
  130. <ul id="conter4">
  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. <li><a href="#">南京</a></li>
  136. <li><a href="#">天津</a></li>
  137. <li><a href="#">杭州</a></li>
  138. <li><a href="#">成都</a></li>
  139. <li><a href="#">重庆</a></li>
  140. <li><a href="#">武汉</a></li>
  141. <li><a href="#">西安</a></li>
  142. <li><a href="#">沈阳</a></li>
  143. <li><span class="moreCity"><a href="#">更多城市>></a></span></li>
  144. </ul>
  145. </li>
  146. </ul>
  147. <div class="sbtn">
  148. <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" />
  149. </div>
  150. <div class="searchMore">
  151. <a href="search_expert.html">高级搜索</a><br /><a href="search_sort.html">分类搜索</a> </div>
  152. </form>
  153. </div>
  154. </body>
  155. </html>
上一篇:学习实践:使用模式,原则实现一个C++数据库訪问类


下一篇:一个小时学会 MySQL 数据库