admin

2_CSS/练习15_小米首页.html

@@ -25,8 +25,9 @@
             margin-left: auto;
             margin-right: auto;
         }
+
         /* 清除浮动 */
-        .clearfix::after{
+        .clearfix::after {
             content: "";
             display: block;
             clear: both;
@@ -45,32 +46,38 @@
             /* 字体样式 比如斜体 */
             /* font-style: normal; */
             /* 取消下划线 */
-            text-decoration:none ;
+            text-decoration: none;
             font-size: 12px;
             display: inline-block;
             height: 40px;
             vertical-align: top;
         }
-        .top-nav a:hover{
+
+        .top-nav a:hover {
             color: #fff;
         }
-        .top-nav .sep{
+
+        .top-nav .sep {
             font-size: 12px;
             color: #424242;
             margin: 0 3px;
         }
-        .top-nav .top-nav-left{
+
+        .top-nav .top-nav-left {
             float: left;
             height: 40px;
         }
-        .top-nav .top-nav-right{
+
+        .top-nav .top-nav-right {
             float: right;
         }
-        .top-nav .top-nav-right .tnr-link{
+
+        .top-nav .top-nav-right .tnr-link {
             float: left;
             height: 40px;
         }
-        .top-nav .top-nav-right .tnr-car{
+
+        .top-nav .top-nav-right .tnr-car {
             float: left;
             width: 120px;
             height: 40px;
@@ -80,13 +87,16 @@
             text-align: center;
             margin-left: 15px;
         }
-        .top-nav .download-app-link{
+
+        .top-nav .download-app-link {
             position: relative;
         }
-        .top-nav .download-app-link:hover .download-app{
+
+        .top-nav .download-app-link:hover .download-app {
             display: block;
         }
-        .top-nav .download-app-link .download-app{
+
+        .top-nav .download-app-link .download-app {
             width: 124px;
             position: absolute;
             top: 40px;
@@ -99,7 +109,8 @@
             padding-bottom: 10px;
             display: none;
         }
-        .top-nav .download-app-link .download-app::before{
+
+        .top-nav .download-app-link .download-app::before {
             content: "";
             display: block;
             width: 0;
@@ -110,50 +121,59 @@
             position: absolute;
             left: 50%;
             margin-left: -10px;
-            top:-10px;
+            top: -10px;
         }
-        .top-nav .download-app-link .download-app img{
+
+        .top-nav .download-app-link .download-app img {
             width: 104px;
         }
-        .top-nav .download-app-link .download-app p{
+
+        .top-nav .download-app-link .download-app p {
             font-size: 14px;
             color: #333;
         }
+
         /* 顶部导航栏 end */
         /* nav 区域 start */
-        .nav .nav-logo{
+        .nav .nav-logo {
             float: left;
             margin-top: 22px;
         }
-        .nav .nav-logo img{
+
+        .nav .nav-logo img {
             width: 56px;
             height: 56px;
         }
-        .nav .nav-list{
+
+        .nav .nav-list {
             float: left;
             margin-left: 160px;
         }
-        .nav .nav-list li{
+
+        .nav .nav-list li {
             float: left;
             height: 100px;
             line-height: 100px;
-            margin:0 10px;
+            margin: 0 10px;
         }
-        .nav .nav-search{
+
+        .nav .nav-search {
             float: right;
             width: 296px;
             height: 50px;
-            border:1px solid #e0e0e0;
+            border: 1px solid #e0e0e0;
             margin-top: 25px;
         }
-        .nav .nav-search input{
+
+        .nav .nav-search input {
             float: left;
             height: 50px;
             border: none;
             outline: none;
             margin-left: 10px;
         }
-        .nav .nav-search .search-btn{
+
+        .nav .nav-search .search-btn {
             float: right;
             height: 50px;
             width: 50px;
@@ -161,37 +181,44 @@
             text-align: center;
             line-height: 50px;
         }
-        .nav .nav-search .search-btn i{
+
+        .nav .nav-search .search-btn i {
             font-size: 25px;
             color: #616161;
         }
+
         /* nav 区域 end */
         /* 轮播图区域 start */
-        .swiper{
+        .swiper {
             position: relative;
             height: 460px;
         }
-        .swiper .swiper-img{
+
+        .swiper .swiper-img {
             position: absolute;
             top: 0;
             left: 0;
         }
-        .swiper .swiper-img img{
+
+        .swiper .swiper-img img {
             width: 100%;
         }
-        .swiper .swiper-nav{
+
+        .swiper .swiper-nav {
             position: absolute;
             top: 0;
             left: 0;
             z-index: 1;
             width: 234px;
             height: 460px;
-            background-color: rgba(105,101,101,.6);
+            background-color: rgba(105, 101, 101, .6);
         }
-        .swiper .swiper-nav ul{
+
+        .swiper .swiper-nav ul {
             margin-top: 20px;
         }
-        .swiper .swiper-nav li{
+
+        .swiper .swiper-nav li {
             color: #fff;
             font-size: 14px;
             padding-left: 30px;
@@ -199,17 +226,21 @@
             line-height: 42px;
             padding-right: 20px;
         }
-        .swiper .swiper-nav li span{
+
+        .swiper .swiper-nav li span {
             float: left;
         }
-        .swiper .swiper-nav li i{
+
+        .swiper .swiper-nav li i {
             float: right;
         }
-        .swiper .swiper-nav li:hover{
+
+        .swiper .swiper-nav li:hover {
             background-color: #ff6700;
             cursor: pointer;
         }
-        .swiper .swiper-btn-left{
+
+        .swiper .swiper-btn-left {
             width: 41px;
             height: 69px;
             background-image: url("./img/xiaomi/icon-slides.png");
@@ -219,11 +250,13 @@
             margin-top: -34px;
             background-position: -84px 0;
         }
-        .swiper .swiper-btn-left:hover{
+
+        .swiper .swiper-btn-left:hover {
             background-position: 0 0;
             cursor: pointer;
         }
-        .swiper .swiper-btn-right{
+
+        .swiper .swiper-btn-right {
             width: 41px;
             height: 69px;
             background-image: url("./img/xiaomi/icon-slides.png");
@@ -233,30 +266,105 @@
             margin-top: -34px;
             background-position: -125px 0;
         }
-        .swiper .swiper-btn-right:hover{
+
+        .swiper .swiper-btn-right:hover {
             background-position: -42px 0;
             cursor: pointer;
         }
-        .swiper .swiper-btn-dot{
+
+        .swiper .swiper-btn-dot {
             position: absolute;
             right: 30px;
             bottom: 30px;
         }
-        .swiper .swiper-btn-dot li{
+
+        .swiper .swiper-btn-dot li {
             width: 6px;
             height: 6px;
-            border:2px solid hsla(0,0%,100%,.3);
-            background-color: rgba(0,0,0,.4);
+            border: 2px solid hsla(0, 0%, 100%, .3);
+            background-color: rgba(0, 0, 0, .4);
             float: left;
             border-radius: 50%;
             margin: 0 4px;
         }
-         .swiper .swiper-btn-dot li:hover{
-            border: 2px solid rgba(0,0,0,.4);
-            background-color: hsla(0,0%,100%,.3);
+
+        .swiper .swiper-btn-dot li:hover {
+            border: 2px solid rgba(0, 0, 0, .4);
+            background-color: hsla(0, 0%, 100%, .3);
             cursor: pointer;
         }
+
         /* 轮播图区域 end */
+        /* banner 区域 start */
+        .banner {
+            margin-top: 15px;
+        }
+
+        .banner .banner-right {
+            float: left;
+        }
+
+        .banner .banner-right li {
+            float: left;
+            margin-left: 15px;
+        }
+
+        .banner .banner-right li:first-child {
+            margin-left: 14px;
+        }
+
+        .banner .banner-right img {
+            width: 316px;
+            height: 170px;
+            display: block;
+        }
+
+        .banner .banner-left {
+            float: left;
+            width: 234px;
+            height: 170px;
+            background-color: #5f5750;
+        }
+        .banner .banner-left ul{
+            padding: 3px;
+            font-size: 12px;
+            text-align: center;
+        }
+        .banner .banner-left li{
+            height: 82px;
+            width: 70px;
+            float: left;
+            padding: 0 3px;
+            color: #fff;
+            position: relative;
+        }
+        .banner .banner-left li img{
+            margin-top: 18px;
+            width: 24px;
+            height: 24px;
+        }
+        .banner .banner-left li::before{
+            content: "";
+            display: block;
+            width: 63px;
+            height: 1px;
+            background-color: #665e57;
+            position: absolute;
+            top: -1px;
+            left: 6px;
+
+        }
+        .banner .banner-left li::after{
+            content: "";
+            display: block;
+            width: 1px;
+            height: 70px;
+            background-color: #665e57;
+            position: absolute;
+            top: 6px;
+            left: 0;
+        }
+        /* banner 区域 end */
     </style>
 </head>
 
@@ -310,7 +418,7 @@
         </div>
     </div>
     <!-- 导航栏 -->
-    <div class="nav main-width clearfix" >
+    <div class="nav main-width clearfix">
         <div class="nav-logo">
             <img src="./img/xiaomi/logo-mi2.png" alt="logo">
         </div>
@@ -399,7 +507,49 @@
         </div>
     </div>
     <!-- bnner 区域 -->
-    <div class="banner"></div>
+    <div class="banner main-width clearfix">
+        <div class="banner-left">
+            <ul class="clearfix">
+                <li>
+                    <img src="./img/xiaomi/a1.png" alt="a1">
+                    <p>保障服务</p>
+                </li>
+                <li>
+                    <img src="./img/xiaomi/a1.png" alt="a1">
+                    <p>保障服务</p>
+                </li>
+                <li>
+                    <img src="./img/xiaomi/a1.png" alt="a1">
+                    <p>保障服务</p>
+                </li>
+                <li>
+                    <img src="./img/xiaomi/a1.png" alt="a1">
+                    <p>保障服务</p>
+                </li>
+                <li>
+                    <img src="./img/xiaomi/a1.png" alt="a1">
+                    <p>保障服务</p>
+                </li>
+                <li>
+                    <img src="./img/xiaomi/a1.png" alt="a1">
+                    <p>保障服务</p>
+                </li>
+            </ul>
+        </div>
+        <div class="banner-right">
+            <ul class="clearfix">
+                <li>
+                    <img src="./img/xiaomi/img1.png" alt="banner1">
+                </li>
+                <li>
+                    <img src="./img/xiaomi/img2.png" alt="banner2">
+                </li>
+                <li>
+                    <img src="./img/xiaomi/img3.png" alt="banner3">
+                </li>
+            </ul>
+        </div>
+    </div>
 </body>
 
 </html>

2_CSS/练习2_盒子模型.html

@@ -23,7 +23,7 @@
         li{
             list-style: none;
             background-color: gray;
-            margin:10px 0;
+            margin:20px 0;
             border-radius: 10px;
             padding:10px;
         }