float

2021-01-20 11:25:18 +08:00
parent 9853dbdd91
commit b8df71627e
21 changed files with 917 additions and 1 deletions
--- a/csspress/demo2/searchlx.html
+++ b/csspress/demo2/searchlx.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0
+        }
+
+        .searchbox {
+            width: 658px;
+            height: 44px;
+            margin: 0 auto;
+            margin-top: 30px;
+        }
+
+        .left {
+            width: 546px;
+            /* height: 44px; */
+            border-radius: 10px 0px 0px 10px;
+            float: left;
+            border: 2px solid #4e6ef2;
+
+        }
+
+        .btn {
+            width: 108px;
+            height: 48px;
+            background: #4e6ef2;
+            color: white;
+            text-align: center;
+            line-height: 44px;
+            border-radius: 0 10px 10px 0;
+            float: right;
+        }
+
+        .shuru {
+            width: 480px;
+            height: 44px;
+            border: none;
+            outline: none;
+            margin-left: 20px;
+            border-bottom: 2px solid #c4c7ce;
+        }
+        .shishenmen{
+            list-style: none;
+            cursor: pointer;
+            margin-top: 10px;
+        }
+        .shishen{
+            font-size: 15px;
+            height: 30px;
+            margin-left:20px;
+        }
+        .shishen:hover{
+            color: rgb(78, 110, 242);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="searchbox">
+        <div class="left">
+            <input type="text" class="shuru" onfocus="shuruing()" onblur="end()"/>
+           <ul class="shishenmen" style="display: none;">
+               <li class="shishen">阴阳师</li>
+               <li class="shishen">大天狗</li>
+               <li class="shishen">茨木</li>
+               <li class="shishen">青行灯</li>
+               <li class="shishen">酒吞</li>
+           </ul>
+        </div>
+       <div class=" btn">搜索</div>
+    </div>
+    <script>
+        //   var ss=document.getElementsByClassName('shishen')[0]
+        //     var shishen=document.getElementsByClassName('shishenmen')
+        //     console.log(ss)
+        //     console.log(shishen)
+        function shuruing(){
+            console.log(900)
+            var ss=document.getElementsByClassName('shishen')[0]
+            var shishen=document.getElementsByClassName('shishenmen')[0]
+            console.log(ss)
+            console.log(shishen)
+            shishen.style.display="block"
+        }
+
+        function end(){
+            var shishen=document.getElementsByClassName('shishenmen')[0]
+            shishen.style.display="none"
+        }
+    </script>
+</body>
+
+</html>