Accueil Explorer Aide
Connexion
lovecoding
/
W260426
10
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

admin

fengchuanyu il y a 14 heures
Parent
1ec337ddf2
commit
5b26469929
2 fichiers modifiés avec 93 ajouts et 3 suppressions
Vue unifiée Afficher les stats Diff
  1. 63 1
      2_CSS/css/index.css
  2. 30 2
      2_CSS/练习11_小米官网.html

+ 63 - 1
2_CSS/css/index.css
Voir le fichier 

@@ -101,4 +101,66 @@ p{
 
     display: block;
 
     display: block;
 
 }
 
 }
 
 /* 顶部导航栏end */
 
 /* 顶部导航栏end */
 
-
 
+/* 头部导航栏start */
 
+.head-nav{
 
+    height: 60px;
 
+    padding:20px;
 
+}
 
+.head-nav .head-logo img{
 
+    width: 56px;
 
+    height: 56px;
 
+}
 
+.head-nav .head-logo{
 
+    float: left;
 
+}
 
+.head-nav .head-nav-list{
 
+    float: left;
 
+    margin-left: 160px;
 
+}
 
+.head-nav .head-nav-list li{
 
+    float: left;
 
+    height: 60px;
 
+    line-height: 60px;
 
+    font-size: 16px;
 
+    color: #333;
 
+    padding:0 10px;
 
+}
 
+.head-nav .head-nav-list li:hover{
 
+    color: #ff6900;
 
+    cursor: pointer;
 
+}
 
+.head-nav .head-search{
 
+    float: right;
 
+    border:1px solid #e0e0e0;
 
+    width: 296px;
 
+    height: 50px;
 
+}
 
+.head-nav .head-search .search-inp{
 
+    float: left;
 
+    width: 245px;
 
+}
 
+.head-nav .head-search .search-inp input{
 
+    height: 48px;
 
+    border:0;
 
+    outline: none;
 
+    padding-left: 20px;
 
+}
 
+.head-nav .head-search .search-btn{
 
+    float: left;
 
+    width: 50px;
 
+    height: 50px;
 
+    border-left:1px solid #e0e0e0;
 
+    text-align: center;
 
+    line-height: 50px;
 
+}
 
+.head-nav .head-search .search-btn:hover{
 
+    background-color: #ff6900;
 
+}
 
+.head-nav .head-search .search-btn i{
 
+    font-size: 24px;
 
+    color: #616161;
 
+}
 
+.head-nav .head-search .search-btn:hover i{
 
+    color: #fff;
 
+}
 
+/* 头部导航栏end */

+ 30 - 2
2_CSS/练习11_小米官网.html
Voir le fichier 

@@ -6,7 +6,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <title>Document</title>
 
     <link rel="stylesheet" href="./css/index.css">
 
     <link rel="stylesheet" href="./css/index.css">
 
-    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5209207_xom5ge6o6z.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5209207_wtawmymvl4.css">
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
@@ -64,7 +64,35 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <!-- 头部导航 -->
 
         <!-- 头部导航 -->
 
-        <div class="head-nav"></div>
 
+        <div class="head-nav main-width ">
 
+            <!-- 头部导航栏logo -->
 
+            <div class="head-logo">
 
+                <img src="./img/logo-mi2.png" alt="logo">
 
+            </div>
 
+            <!-- 头部导航栏列表 -->
 
+            <div class="head-nav-list">
 
+                <ul class="clearfix">
 
+                    <li>Xiaomi手机</li>
 
+                    <li>REDMI手机</li>
 
+                    <li>电视</li>
 
+                    <li>笔记本</li>
 
+                    <li>平板</li>
 
+                    <li>家电</li>
 
+                    <li>路由器</li>
 
+                    <li>服务中心</li>
 
+                    <li>社区</li>
 
+                </ul>
 
+            </div>
 
+            <!-- 头部导航栏搜索框 -->
 
+            <div class="head-search ">
 
+                <div class="search-inp">
 
+                    <input type="text" placeholder="搜索">
 
+                </div>
 
+                <div class="search-btn">
 
+                    <i class="iconfont icon-search"></i>
 
+                </div>
 
+            </div>
 
+        </div>
 
         <!-- 轮播图 -->
 
         <!-- 轮播图 -->
 
         <div class="swiper-content"></div>
 
         <div class="swiper-content"></div>
 
         <!-- 广告栏 -->
 
         <!-- 广告栏 -->