[读码时间] 百度输入法

说明：代码来自网络。注释为笔者学习时添加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>百度输入法</title>
    <style>
        body,ul,li,button{ /*去掉内外边距*/
            margin:0;
            padding:0;
        }
        body{
            font:12px/1.5 Tahoma; /*字号行高字号*/
        }
        ul{
            list-style-type:none; /*无序列表去掉样式*/
        }
        button{
            cursor:pointer; /*鼠标手形*/
        }
        #outer{
            width:70px;
            margin:10px auto;/*左右置中*/
        }
        #ime{
            margin-top:5px; /*上外边距5像素*/
            background:#fff; /*白色*/
            border:1px solid #9a99ff; /*边框蓝色*/
            display:none; /*默认为隐藏*/
        }
        #ime li{ /*后代元素选择法*/
            width:100%;
            line-height:24px; /*行高*/
            display:inline-block; /*行内块元素*/
        }
        #ime li a:hover{
            background:#d9e1f6; /*浅蓝色*/
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementsByTagName("button")[0]; //获取按钮集合中的第1个
            var oIme = document.getElementById("ime");//获取无序列表引用
            var oClose = document.getElementById("close"); //获取关闭li元素引用
            var style = oIme.style; //把ul列表的样式属性赋值给本地变量 style
            oBtn.onclick = function () {
                style.display = style.display == "block" ? "none" : "block";//三元操作法，切换样式以达到显示/隐藏目的
            };
            oClose.onclick = function () {//注册click事件，点击后隐藏整个无序列表
                style.display = "none";   
            }
        }
    </script>
</head>
<body>
    <!--div包裹一个button和无序列表ul-->
    <div id="outer">
        <button>输入法</button>
        <ul id="ime">
            <li><a href="javascript:;">手写</a></li>
            <li><a href="javascript:;">拼音</a></li>
            <li id="close"><a href="javascript:;">关闭</a></li>
        </ul>
    </div>
</body>
</html>
View Code

 

posted @ 2017-02-23 22:37  sx00xs  阅读(208)  评论(0)  编辑  收藏  举报