admin

2_CSS/css/index.css

@@ -252,3 +252,64 @@ p{
     border:2px solid rgba(0, 0, 0, .4);
 }
 /* 轮播图 end */
+/* 广告栏 start */
+.ad-content{
+    margin-top: 8px;
+}
+.ad-content .ad-nav{
+    width: 234px;
+    height: 170px;
+    background-color: #5f5750;
+    float: left;
+}
+.ad-content .ad-list{
+    float: left;
+    width: calc(1226px - 234px);
+}
+.ad-content .ad-nav img{
+    width: 24px;
+    height: 24px;
+}
+.ad-content .nav-item{
+    font-size: 12px;
+    color: #fff;
+    float: left;
+    width: 70px;
+    height: 64px;
+    padding:0 3px;
+    text-align: center;
+    padding-top: 18px;
+    position: relative;
+}
+.ad-content .nav-item::before{
+    content: "";
+    display: block;
+    width: 64px;
+    height: 1px;
+    background-color: #665e57;
+    position: absolute;
+    top:0px;
+    left: 6px;
+}
+.ad-content .nav-item::after{
+    content: "";
+    display: block;
+    width: 1px;
+    height: 70px;
+    background-color: #665e57;
+    position: absolute;
+    left: 0;
+    top: 6px;
+}
+.ad-content .nav-item div{
+    opacity: 0.7;
+}
+.ad-content .ad-item{
+    float: right;
+    margin-left: 14px;
+}
+.ad-content .ad-item img{
+    width: 316px;
+}
+
+/* 广告栏 end   */

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

@@ -163,7 +163,59 @@
             </div>
         </div>
         <!-- 广告栏 -->
-        <div class="ad-content"></div>
+        <div class="ad-content main-width">
+            <!-- 左侧导航 -->
+            <div class="ad-nav">
+                <div class="nav-item">
+                    <div>
+                        <img src="./img/a1.png" alt="ai">
+                    </div>
+                    <div>保障服务</div>
+                </div>
+                <div class="nav-item">
+                    <div>
+                        <img src="./img/a2.png" alt="ai">
+                    </div>
+                    <div>小米社区</div>
+                </div>
+                <div class="nav-item">
+                    <div>
+                        <img src="./img/a3.png" alt="ai">
+                    </div>
+                    <div>服务中心</div>
+                </div>
+                <div class="nav-item">
+                    <div>
+                        <img src="./img/a4.png" alt="ai">
+                    </div>
+                    <div>小米社区</div>
+                </div>
+                <div class="nav-item">
+                    <div>
+                        <img src="./img/a5.png" alt="ai">
+                    </div>
+                    <div>小米社区</div>
+                </div>
+                <div class="nav-item">
+                    <div>
+                        <img src="./img/a6.png" alt="ai">
+                    </div>
+                    <div>小米社区</div>
+                </div>
+            </div> 
+            <!-- 广告列表 -->
+            <div class="ad-list">
+                <div class="ad-item">
+                    <img src="./img/ad1.jpg" alt="ad">
+                </div>
+                <div class="ad-item">
+                    <img src="./img/ad2.png" alt="ad">
+                </div>
+                <div class="ad-item">
+                    <img src="./img/ad3.jpg" alt="ad">
+                </div>
+            </div>
+        </div>
     </div>
 </body>