首页 > 代码库 > [CSS] 常用积累

[CSS] 常用积累

2024-07-16 10:04:48   221人阅读

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 +或＋＝可设置所对应的风格


联系
我们