admin

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

@@ -268,7 +268,7 @@
             padding: 0 20px;
         }
 
-        .swiper-content .swiper-nav li:hover{
+        .swiper-content .swiper-nav li:hover {
             cursor: pointer;
             background-color: #ff6700;
         }
@@ -278,19 +278,21 @@
         }
 
 
-        .swiper-content .swiper-btn{
+        .swiper-content .swiper-btn {
             position: absolute;
             left: 234px;
             top: 0;
             right: 0;
             bottom: 0;
         }
-        .swiper-content .arr-btn{
+
+        .swiper-content .arr-btn {
             position: absolute;
-            top:50%;
+            top: 50%;
             margin-top: -34px;
             width: 100%;
         }
+
         .swiper-content .arr-btn .left-arr {
             height: 69px;
             width: 41px;
@@ -298,7 +300,8 @@
             background-image: url("./image/icon-slides.png");
             background-position: -84px 0;
         }
-        .swiper-content .arr-btn .left-arr:hover{
+
+        .swiper-content .arr-btn .left-arr:hover {
             background-position: 0 0;
         }
 
@@ -309,29 +312,95 @@
             background-image: url("./image/icon-slides.png");
             background-position: -124px 0;
         }
-        .swiper-content .arr-btn .right-arr:hover{
+
+        .swiper-content .arr-btn .right-arr:hover {
             background-position: -41px 0;
         }
-        .dot-btn{
+
+        .dot-btn {
             position: absolute;
             right: 20px;
             bottom: 40px;
         }
-        .dot-btn li{
+
+        .dot-btn li {
             width: 6px;
             height: 6px;
-            background-color: rgba(0,0,0,0.3);
+            background-color: rgba(0, 0, 0, 0.3);
             border-radius: 50%;
-            border:2px solid rgba(0,0,0,0.4);
+            border: 2px solid rgba(0, 0, 0, 0.4);
             float: left;
             margin-right: 10px;
         }
-        .dot-btn li:hover{
+
+        .dot-btn li:hover {
             cursor: pointer;
             background-color: #fff;
-            border:2px solid rgba(0,0,0,0.6);
+            border: 2px solid rgba(0, 0, 0, 0.6);
         }
+
         /* 轮播图区域 结束  */
+        /* 广告区域开始 */
+        .ad-content{
+            height: 170px;
+        }
+        .ad-content .ad-nav{
+            float: left;
+        }
+        .ad-content .ad-img{
+            float: right;
+        }
+        .ad-content .ad-nav ul{
+            background-color: rgb(95, 87, 80);
+            width: 234px;
+            height: 170px;
+        }
+        .ad-content .ad-nav li{
+            float: left;
+            font-size: 12px;
+            color: #fff;
+            width: 76px;
+            height: 82px;
+            text-align: center;
+            padding-top: 18px;
+            /* 怪异盒模型 */
+            box-sizing: border-box;
+            position: relative;
+        }
+        .ad-content .ad-nav li::before{
+            content: "";
+            display: block;
+            width: 64px;
+            height: 1px;
+            background: rgb(102, 94, 87);
+            position: absolute;
+            top:0;
+            left: 6px;
+        }
+        .ad-content .ad-nav li::after{
+            content: "";
+            display: block;
+            width: 1px;
+            height: 70px;
+            background: rgb(102, 94, 87);
+            position: absolute;
+            left: 0;
+            top: 6px;
+
+        }
+        .ad-content .ad-nav img{
+            width: 24px;
+            height: 24px;
+        }
+        .ad-content .ad-img img{
+            width: 316px;
+            height: 170px;
+        }
+        .ad-content .ad-img .ad-img-item{
+            float: left;
+            margin-left: 12px;
+        }
+        /* 广告区域结束 */
     </style>
 </head>
 
@@ -454,6 +523,49 @@
             </div>
         </div>
         <!-- 轮播图区域 结束 -->
+        <!-- 广告区域 开始 -->
+        <div class="ad-content main-width">
+            <div class="ad-nav">
+                <ul>
+                    <li>
+                        <img src="./image/smallicon.png" alt="icon">
+                        <p>保障服务</p>
+                    </li>
+                    <li>
+                        <img src="./image/smallicon.png" alt="icon">
+                        <p>保障服务</p>
+                    </li>
+                    <li>
+                        <img src="./image/smallicon.png" alt="icon">
+                        <p>保障服务</p>
+                    </li>
+                    <li>
+                        <img src="./image/smallicon.png" alt="icon">
+                        <p>保障服务</p>
+                    </li>
+                    <li>
+                        <img src="./image/smallicon.png" alt="icon">
+                        <p>保障服务</p>
+                    </li>
+                    <li>
+                        <img src="./image/smallicon.png" alt="icon">
+                        <p>保障服务</p>
+                    </li>
+                </ul>
+            </div>
+            <div class="ad-img">
+                <div class="ad-img-item">
+                    <img src="./image/bg2.png" alt="bg">
+                </div>
+                <div class="ad-img-item">
+                    <img src="./image/bg2.png" alt="bg">
+                </div>
+                <div class="ad-img-item">
+                    <img src="./image/bg2.png" alt="bg">
+                </div>
+            </div>
+        </div>
+        <!-- 广告区域结束 -->
     </div>
 </body>