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

    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.  650px; 
    31. } 
    32. .kw_from .sbtn{ 
    33. float:left; 
    34. 80px; 
    35. padding: 16px 0 0 0; 
    36. } 
    37. .kw_from .searchMore{ 
    38. float:left; 
    39. 80px; 
    40. padding: 4px; 
    41. } 
    42. #searchNav { 
    43. 430px; 
    44. float: left; 
    45. } 
    46. #searchNav #conter1, #searchNav #conter3{ 
    47. float:left; 
    48. 250px; 
    49. } 
    50. #searchNav #conter2, #searchNav #conter4{ 
    51. float:left; 
    52. 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. 220px; 
    83. height:18px; 
    84. } 
    85. #searchNav #cityKw{ 
    86. 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.  
    118. <ul id="searchNav"> 
    119. <li id="conter1"><h2>找什么</h2> 
    120. <input id="jobKw" name="jobKw" type="text" /> 
    121. <ul id="conter3"> 
    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><span class="moreCity"><a href="#">更多>> </a></span></li> 
    127. </ul> 
    128. </li> 
    129. <li id="conter2"><h2>在那里</h2> 
    130. <input id="cityKw" name="cityKw" type="text" /> 
    131. <ul id="conter4"> 
    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><a href="#">沈阳</a></li> 
    144. <li><span class="moreCity"><a href="#">更多城市>></a></span></li> 
    145. </ul> 
    146. </li> 
    147. </ul>  
    148. <div class="sbtn"> 
    149. <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> 
    150. </div> 
    151. <div class="searchMore"> 
    152. <a href="search_expert.html">高级搜索</a><br /><a href="search_sort.html">分类搜索</a> </div> 
    153. </form>  
    154. </div> 
    155. </body> 
    156. </html> 
  • 相关阅读:
    java面向对象（五）之多态
    java集合（list,set,map)
    jQuery基础
    Numpy详解
    Pandas详解一
    Linux 解压缩
    Linux 磁盘挂载
    Linux 磁盘管理
    su和sudo命令详解
    Linux查看文件命令
  • 原文地址：https://www.cnblogs.com/umgsai/p/3908166.html
Copyright © 2020-2023  润新知