zoukankan      html  css  js  c++  java
  • 下拉列表

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <script type="text/javascript">
     6 window.onload=function(){
     7     var clicked=document.getElementById('ck');
     8     var lists=document.getElementById('list');
     9     clicked.onclick=function(){
    10         // 判断赋值记得加上引号!!
    11         if(lists.style.display=='block')
    12             lists.style.display='none';
    13         else if(lists.style.display=='none')
    14             lists.style.display='block';
    15     };
    16 };
    17 </script>
    18 <style type="text/css">
    19 p,ul,li{
    20     list-style: none;
    21     padding:0;/*去除列表内外边距!!*/
    22     margin:0;
    23 }
    24 p{
    25     width:58px;
    26     padding:3px;
    27 }
    28 a{
    29     text-decoration: none;
    30     height:24px;
    31     line-height:24px;
    32     padding:5px 12px 5px 12px;/*可能不太准确*/
    33 }
    34 #zong{
    35     color:#00c;
    36 }
    37 ul{
    38     border: solid 1px red;
    39     width:56px;
    40     text-align: center;
    41 }
    42 a:hover{
    43     background: #12a;
    44 }
    45 
    46 </style>
    47 </head>
    48 <body>
    49 <div id="zong">
    50 <p id="ck">输入法</p>
    51 <ul id="list" style="display: block;">
    52 <li><a href="#">百度</a></li>
    53 <li><a href="#">搜狗</a></li>
    54 <li><a href="#">自动</a></li>
    55 </ul>
    56 </div>
    57 </body>
    58 </html>

  • 相关阅读:
    bodybuilding
    DBLINK的session无法关闭,报异常!
    失控
    eclipse
    Linux下查看用户列表
    org.apache.commons.httpclient
    java map 遍历
    java String split
    胸上肌到底要怎么练啊!
    POI操作Excel常用方法总结
  • 原文地址:https://www.cnblogs.com/l0520/p/6804027.html
Copyright © 2011-2022 走看看