[CSS] 常用积累

1、实现点击编辑框出现列表，否则隐藏列表

<html>
<head>
    <meta charset='utf-8'>
    <title>demo</title>
    <style type="text/css">
        body{padding: 100px;font-family: '微软雅黑';}
        #demo-input{border-radius: 5px;width: 280px;height: 35px;border:solid 1px #ddd;transition: all .4s;padding-left: 8px;}
        #demo-input:focus{box-shadow: 0 0 6px rgb(0,162,232);}
        .mess-list{margin: 0;padding: 0;width: 278px;height: 160px;border: solid 1px #ddd;margin-top: 1px;padding-top: 3px;display: none;}
        .mess-list li{list-style: none;margin: 0;height: 26px;line-height: 26px;padding-left: 10px;color: #555;}
        .mess-list li:hover{background-color: rgb(128,158,282);color: #eee;}
        .display{display: block;}
    </style>
</head>
<body>
    <input id="demo-input" placeholder="请选择.." onfocus="show()" onblur="hide()"></input>
    <ul id="mess-list" class="mess-list">
        <li>测试文字1</li>        
        <li>测试文字2</li>
        <li>测试文字3</li>
        <li>测试文字4</li>
    </ul>
    <script type="text/javascript">
        function show() {
            document.getElementById('mess-list').className += " display";
        }
        function hide() {
            document.getElementById('mess-list').className = "mess-list";
        }
        //document.getElementById('demo-input').addEventListener('focus',show,false);
        //document.getElementById('demo-input').addEventListener('blur',hide,false);
    </script>
</body>
</html>

1.#代表对应id，.代表对应class

2.display none隐藏，display block展示

3.hover 鼠标悬停时候的效果

4.className +或＋＝可设置所对应的风格

posted @ 2014-08-08 09:53  iyjhabc  阅读(163)  评论(0)  编辑  收藏  举报