admin

2-CSS/练习13_小米官网.html

@@ -7,59 +7,141 @@
     <title>Document</title>
     <style>
         /* css reset 样式重置 把浏览器自带的标签样式去掉 */
-        *{
+        * {
             margin: 0;
             padding: 0;
         }
-        li{
+
+        li {
             list-style: none;
         }
 
         /* 工具类 */
         /* 清除浮动 */
-        .clearfix::after{
+        .clearfix::after {
             content: "";
             display: block;
             clear: both;
         }
 
+        /* 字体库 */
+        /* 声明字体 */
+        @font-face {
+            /* 字体名称 声明*/
+            font-family: "iconfont";
+            /* 引入字体 */
+            src: url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.woff2?t=1752545241384') format('woff2'),
+                url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.woff?t=1752545241384') format('woff'),
+                url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.ttf?t=1752545241384') format('truetype');
+        }
+
+        /* 字体图标 使用iconfont这个就是开始使用自定义字体图标*/
+        .iconfont {
+            /* 字体图标 引用 */
+            font-family: "iconfont" !important;
+            font-size: 16px;
+            /* 字体图标 正常 */
+            font-style:normal;
+            /* 字体图标 平滑 */
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        /* 购物车图标 */
+        .icon-gouwuchekong:before {
+            content: "\e600";
+        }
+
 
         /* 头部导航 开始 */
-        .header-nav-content{
+        .header-nav-content {
             width: 1226px;
-            margin:0 auto;
+            margin: 0 auto;
         }
-        .header-nav{
+
+        .header-nav {
             background-color: #333;
         }
-        .header-nav .header-nav-left{
+
+        .header-nav .header-nav-left {
             float: left;
         }
-        .header-nav .header-nav-right{
+
+        .header-nav .header-nav-right {
             float: right;
         }
-        .header-nav ul li{
+
+        .header-nav ul li {
             float: left;
             font-size: 12px;
             color: #b0b0b0;
             height: 40px;
             line-height: 40px;
         }
-        .header-nav-right ul,.header-nav-right .car{
+
+        .header-nav-right ul,
+        .header-nav-right .car {
             float: left;
         }
-        .header-nav ul li:nth-child(2n){
+
+        .header-nav ul li:nth-child(2n) {
             color: #424242;
-            margin:0 6px;
+            margin: 0 6px;
         }
-        .header-nav .car{
+
+        .header-nav ul li:nth-child(2n+1):hover {
+            cursor: pointer;
+            color: #fff;
+        }
+
+        .header-nav .car {
             color: #b0b0b0;
             background-color: #444;
             font-size: 12px;
             line-height: 40px;
             margin-left: 20px;
-            padding:0 15px;
+            padding: 0 15px;
+        }
+
+        .download-btn {
+            position: relative;
+        }
+
+        .download-btn:hover .download-app {
+            display: block;
+        }
+
+        .download-app {
+            position: absolute;
+            left: 50%;
+            margin-left: -60px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+            padding: 15px;
+            line-height: 20px;
+            display: none;
+
+        }
+
+        .download-app img {
+            width: 90px;
+        }
+
+        .download-app p {
+            font-size: 12px;
+            color: #424242;
+            text-align: center;
+        }
+
+        .download-app i {
+            position: absolute;
+            top: -20px;
+            left: 50%;
+            margin-left: -10px;
+            border-top: 10px solid transparent;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-bottom: 10px solid white;
         }
+
         /* 头部导航 结束 */
     </style>
 </head>
@@ -91,7 +173,14 @@
                         <li>|</li>
                         <li>协议规则</li>
                         <li>|</li>
-                        <li>下载app</li>
+                        <li class="download-btn">下载app
+                            <!-- 下载APP二维码弹框 -->
+                            <div class="download-app">
+                                <i></i>
+                                <img src="./image/download.png" alt="img">
+                                <p>小米商城APP</p>
+                            </div>
+                        </li>
                         <li>|</li>
                         <li>Select Location</li>
                     </ul>
@@ -105,7 +194,7 @@
                         <li>消息通知</li>
                     </ul>
                     <div class="car">
-                        <span>购物车（0）</span>
+                        <span> <i class="iconfont icon-gouwuchekong"></i> 购物车（0）</span>
                     </div>
                 </div>
             </div>