admin

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

@@ -239,30 +239,71 @@
 
         /* 顶部搜索框 结束 */
         /* 轮播图区域 开始  */
-        .swiper-content{
+        .swiper-content {
             position: relative;
         }
-        .swiper-content .swiper-nav{
+
+        .swiper-content .swiper-nav {
             position: absolute;
             width: 234px;
             height: 460px;
             background-color: rgba(105, 101, 101, .6);
-            padding:30px 20px;
+            padding: 30px 20px;
             /* 改为怪异盒模型 */
             box-sizing: border-box;
         }
-        .swiper-content .swiper-img img{
+
+        .swiper-content .swiper-img img {
             width: 1226px;
             height: 460px;
         }
-        .swiper-content .swiper-nav li{
+
+        .swiper-content .swiper-nav li {
             height: 42px;
             color: #fff;
             font-size: 14px;
         }
-        .swiper-content .swiper-nav i{
+
+        .swiper-content .swiper-nav i {
             float: right;
         }
+
+
+        .swiper-content .swiper-btn{
+            position: absolute;
+            left: 234px;
+            top: 0;
+            right: 0;
+            bottom: 0;
+        }
+        .swiper-content .arr-btn{
+            position: absolute;
+            top:50%;
+            margin-top: -34px;
+            width: 100%;
+        }
+        .swiper-content .arr-btn .left-arr {
+            height: 69px;
+            width: 41px;
+            float: left;
+            background-image: url("./image/icon-slides.png");
+            background-position: -84px 0;
+        }
+        .swiper-content .arr-btn .left-arr:hover{
+            background-position: 0 0;
+        }
+
+        .swiper-content .arr-btn .right-arr {
+            height: 69px;
+            width: 41px;
+            float: right;
+            background-image: url("./image/icon-slides.png");
+            background-position: -124px 0;
+        }
+        .swiper-content .arr-btn .right-arr:hover{
+            background-position: -41px 0;
+        }
+
         /* 轮播图区域 结束  */
     </style>
 </head>
@@ -368,6 +409,13 @@
             <div class="swiper-img">
                 <img src="./image/bg.jpg" alt="bg">
             </div>
+            <div class="swiper-btn">
+                <div class="arr-btn">
+                    <div class="left-arr"></div>
+                    <div class="right-arr"></div>
+                </div>
+                <div class="dot-btn"></div>
+            </div>
         </div>
         <!-- 轮播图区域 结束 -->
     </div>