zoukankan      html  css  js  c++  java

  • 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> 
  • 相关阅读:
    算法----(1)冒泡排序
    淘宝爬虫
    爬虫_豆瓣电影top250 （正则表达式）
    爬虫_猫眼电影top100（正则表达式）
    Android 简单调用摄像头
    Android 简单天气预报
    思维模型
    This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you
    Android studio preview界面无法预览，报错render problem
    Android studio 3.1.2报错，no target device found
  • 原文地址：https://www.cnblogs.com/umgsai/p/3908166.html
Copyright © 2011-2022 走看看