搜索

3_项目/css/common.css

@@ -14,3 +14,7 @@ legend{color:#000;}
 fieldset,img{border:0;}
 button,input,select,textarea{font-size:100%;}
 table{border-collapse:collapse;border-spacing:0;}
+  /* 外廓  input鼠标选中去掉蓝边*/
+  input{
+    outline: none;
+  }

3_项目/css/index.css

@@ -36,27 +36,50 @@
     line-height: 35px;
 
 }
+/* 头部开始 */
 .header{
     height: 151px;
-    background: red;
     width:1199px;
+    /* background: red; */
+
     margin:0 auto;
 }
-.logo-img{
-    margin-top:44px;
+.header-logo{
     float: left;
-    margin-right:123px;
+    margin-top:44px;
 }
 .search-box{
-    width: 540px;
-    height:151px;
-    background: #0f0;
     float: left;
-    margin-right:52px;
+    margin-left:123px;
+    margin-top:43px;
+    width: 536px;
+    height: 100px;
+    /* background: #00f; */
 }
 .cart-box{
     float: left;
-    width:100px;
-    height:151px;
-    background: #00f;
+}
+.header-search{
+    width: 536px;
+    height: 44px;
+    background: #6F26BD;
+    border:2px solid #6F26BD;
+}
+.search-text{
+    width:474px;
+    height:44px;
+    border:none;
+    float: left;
+    /* 文本缩进 */
+    text-indent: 5px;
+}
+.search-btn{
+    width:62px;
+    height:44px;
+    border:none;
+    float: left;
+    background: #6F26BD;
+    font-size: 16px;
+    color: #fff;
+
 }

3_项目/index.html

@@ -34,23 +34,30 @@
             </div>
         </div>
     </div>
-
-    <!-- 头部 header -->
+    <!-- 头部开始 -->
     <div class="header">
-        <!-- logo -->
-            <img class="logo-img" src="images/logo.png" alt="">
-        <!-- 搜索 -->
-            <div class="search-box">
-
-                
+        <!-- 左边logo -->
+        <img class="header-logo" src="images/logo.png" alt="">
+        <!-- 中间的搜索容器 -->
+        <div class="search-box">
+            <!--上边是搜索框 -->
+            <div class="header-search">
+                <!-- placeholder 占位 -->
+                <input class="search-text" placeholder="618活动" type="text">
+                <button class="search-btn">搜索</button>
             </div>
-        <!-- 购物车 -->
-            <div class="cart-box">购物车</div>
+
+            <!-- 下边是列表 -->
+
+        </div>
+        <!-- 右边的购物车 -->
+        <div class="cart-box">22</div>
     </div>
 
 
 
 
+
     
 </body>
 </html>