admin

2_CSS/css/index.css

@@ -197,4 +197,58 @@ p{
 .swiper-content .swiper-nav li:hover{
     background-color: #ff6900;
 }
+.swiper-content .swiper-btn{
+    height: 460px;
+    width:calc(1226px - 234px);
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.swiper-content .swiper-btn .arr-btn{
+    position: absolute;
+    top: 50%;
+    margin-top: -35px;
+    width: 100%;
+}
+.swiper-content .swiper-btn .arr-btn div{
+    width: 41px;
+    height: 69px;
+    background-image: url("../img/icon-slides.png");
+}
+.swiper-content .swiper-btn .arr-btn .arr-left{
+    float: left;
+    background-position:-84px 0;
+}
+.swiper-content .swiper-btn .arr-btn .arr-left:hover{
+    background-position:0 0;
+}
+.swiper-content .swiper-btn .arr-btn .arr-right{
+    float: right;
+    background-position:-125px 0;
+}
+.swiper-content .swiper-btn .arr-btn .arr-right:hover{
+    background-position:-42px 0;
+}
+.swiper-content .swiper-btn .dot-btn{
+    position: absolute;
+    bottom: 20px;
+    right: 30px;
+}
+.swiper-content .swiper-btn .dot-btn li{
+    width: 6px;
+    height: 6px;
+    border: 2px solid hsla(0, 0%, 100%, .3);
+    background-color: rgba(0,0,0,.4);
+    border-radius: 50%;
+    float: left;
+    margin:0 5px;
+}
+.swiper-content .swiper-btn .dot-btn li:hover{
+    background: hsla(0, 0%, 100%, .4);
+    border:2px solid rgba(0, 0, 0, .4);
+}
+.swiper-content .swiper-btn .dot-btn li.active{
+    background: hsla(0, 0%, 100%, .4);
+    border:2px solid rgba(0, 0, 0, .4);
+}
 /* 轮播图 end */

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

@@ -145,7 +145,22 @@
                 </ul>
             </div>
             <!-- 按钮区域 -->
-            <div class="swiper-btn"></div>
+            <div class="swiper-btn">
+                <div class="arr-btn">
+                    <div class="arr-left"></div>
+                    <div class="arr-right"></div>
+                </div>
+                <div class="dot-btn">
+                    <ul>
+                        <li class="active"></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                    </ul>
+                </div>
+            </div>
         </div>
         <!-- 广告栏 -->
         <div class="ad-content"></div>