float

2021-01-20 11:25:18 +08:00
parent 9853dbdd91
commit b8df71627e
21 changed files with 917 additions and 1 deletions
--- a/csspress/demo/search2.html
+++ b/csspress/demo/search2.html
@@ -0,0 +1,109 @@
+<!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;
+        }
+        .box{
+            width: 654px;
+            margin:10px auto;
+        }
+        .left{
+            width: 549px;
+        }
+        .search{
+            width: 546px;
+            /* height:44px; */
+            border: 2px solid #4e6ef2;
+            border-radius: 10px 0 0 10px;
+            text-align: center;
+        }
+        .searchcontent{
+            width: 500px;
+            height:44px;
+            padding-left: 15px;
+            font-size: 15px;
+            outline: none;
+            border: none;
+            margin: 0 auto;
+             border-bottom: 2px solid silver;
+        }
+        .searchcontent:focus{
+            outline: none;
+        }
+        .tuijian{
+            width: 546px;
+            /* height:200px; */
+            /* border: 1px solid #ccc; */
+            position: relative;
+            top:5px;
+            left: -2px;
+            list-style:none;
+            text-align: left;
+        }
+        .tuijianitem{
+            width:586px;
+            height: 25px;
+            cursor: default;
+            /* border: 1px solid #ccc; */
+            font-size: 12px;
+            padding-left: 15px;
+            box-sizing: border-box;
+        }
+        .tuijianitem:hover{
+            background: #ccc;
+        }
+        .btn{
+            width: 108px;
+            height: 50px;
+            background-color: #4e6ef2;
+            color: white;
+            text-align: center;
+            line-height: 44px;
+            border-radius: 0 10px 10px 0;
+            float: right;
+            /* margin-top: -200px; */
+            position: relative;
+            top: -50px;
+            /* left:40px; */
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="left">
+            <div class="search">
+                <input type="text" class="searchcontent" onfocus="shuruing()" onblur="end()">
+                <ul class="tuijian" style="display:none">
+                    <li class="tuijianitem">中华老字号</li>
+                    <li class="tuijianitem">营养零食</li>
+                    <li class="tuijianitem">休闲零食</li>
+                    <li class="tuijianitem">鲜花</li>
+                    <li class="tuijianitem">永生花</li>
+                    <li class="tuijianitem">鼠尾草</li>
+                </ul>
+                
+            </div>
+        </div>
+        <div class="btn">搜索</div>
+    </div>
+   <script>
+       var menu=document.getElementsByClassName('tuijian')[0]
+       var btn=document.getElementsByClassName('btn')[0]
+       function shuruing(){
+           menu.style.display="block"
+           btn.style.top="-200px"
+       }
+       function end(){
+           console.log(8009)
+           menu.style.display="none"
+           btn.style.top="-50px"
+       }
+   </script>
+</body>
+</html>