admin

2_CSS/css/index.css

@@ -13,6 +13,9 @@ a{
     /* text-decoration:none  清除下划线 underline下划线 line-through删除线 */
     text-decoration: none;
 }
+p{
+    margin:0;
+}
 /* 工具类 */
 /* 页面内容宽度 */
 .main-width{
@@ -56,5 +59,46 @@ a{
     display: inline-block;
     padding:0 10px;
 }
+.top-nav .download-app{
+    position: relative;
+}
+.top-nav .download-app .appcode{
+    position: absolute;
+    left:50%;
+    margin-left: -60px;
+    width: 120px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
+    text-align: center;
+    line-height: normal;
+    padding: 10px 0;
+    display: none;
+}
+.top-nav .appcode img{
+    width: 90px;
+    height: 90px;
+}
+.top-nav .download-app .appcode-text{
+    font-size: 14px;
+    color: #333;
+}
+.top-nav .appcode .arr{
+    width: 0;
+    height: 0;
+    border-bottom: 8px solid #fff;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    position: absolute;
+    left: 50%;
+    margin-left: -8px;
+    top:-8px;
+}
+.top-nav .download-app{
+    display: inline-block;
+    height: 40px;
+}
+.top-nav .download-app:hover .appcode{
+    display: block;
+}
 /* 顶部导航栏end */
 

2_CSS/练习11_小米官网.html

@@ -37,7 +37,15 @@
                     <span class="line">|</span>
                     <a href="">协议规则</a>
                     <span class="line">|</span>
-                    <a href="">下载app</a>
+                    <a href="" class="download-app">下载app
+                        <div class="appcode">
+                            <div class="arr"></div>
+                            <div class="appcode-img">
+                                <img src="./img/download.png" alt="appcode">
+                            </div>
+                            <p class="appcode-text">小米商城app</p>
+                        </div>
+                    </a>
                     <span class="line">|</span>
                     <a href="">Select Location</a>
                 </div>