admin

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

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_eksisevw5uf.css">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_6u58bd9gz25.css">
     <style>
         /* css reset 样式重置 把浏览器自带的标签样式去掉 */
         * {
@@ -29,6 +29,9 @@
             width: 1226px;
             margin: 0 auto;
         }
+        .gray-bg{
+            background-color: #f5f5f5;
+        }
 
         /* 字体库 */
         /* 声明字体 */
@@ -341,21 +344,25 @@
 
         /* 轮播图区域 结束  */
         /* 广告区域开始 */
-        .ad-content{
+        .ad-content {
             height: 170px;
         }
-        .ad-content .ad-nav{
+
+        .ad-content .ad-nav {
             float: left;
         }
-        .ad-content .ad-img{
+
+        .ad-content .ad-img {
             float: right;
         }
-        .ad-content .ad-nav ul{
+
+        .ad-content .ad-nav ul {
             background-color: rgb(95, 87, 80);
             width: 234px;
             height: 170px;
         }
-        .ad-content .ad-nav li{
+
+        .ad-content .ad-nav li {
             float: left;
             font-size: 12px;
             color: #fff;
@@ -367,17 +374,19 @@
             box-sizing: border-box;
             position: relative;
         }
-        .ad-content .ad-nav li::before{
+
+        .ad-content .ad-nav li::before {
             content: "";
             display: block;
             width: 64px;
             height: 1px;
             background: rgb(102, 94, 87);
             position: absolute;
-            top:0;
+            top: 0;
             left: 6px;
         }
-        .ad-content .ad-nav li::after{
+
+        .ad-content .ad-nav li::after {
             content: "";
             display: block;
             width: 1px;
@@ -388,19 +397,46 @@
             top: 6px;
 
         }
-        .ad-content .ad-nav img{
+
+        .ad-content .ad-nav img {
             width: 24px;
             height: 24px;
         }
-        .ad-content .ad-img img{
+
+        .ad-content .ad-img img {
             width: 316px;
             height: 170px;
         }
-        .ad-content .ad-img .ad-img-item{
+
+        .ad-content .ad-img .ad-img-item {
             float: left;
             margin-left: 12px;
         }
+
         /* 广告区域结束 */
+        /* 工具栏区域 开始 */
+        .tool-content{
+            position: fixed;
+            
+            bottom: 30px;
+            left: 50%;
+            margin-left: 613px;
+        }
+        .tool-content ul{
+            border:1px solid black
+        }
+        .tool-content ul li{
+            border-bottom: 1px solid black;
+        }
+        .tool-content ul li:last-child{
+            border-bottom: 0;
+        }
+        /* 工具栏区域结束 */
+        /* 大图广告区域开始 */
+        .big-img img{
+            width: 1226px;
+        }   
+        /* 大图广告区域结束 */
     </style>
 </head>
 
@@ -566,6 +602,38 @@
             </div>
         </div>
         <!-- 广告区域结束 -->
+        <!-- 工具栏区域 开始 -->
+        <div class="tool-content">
+            <ul>
+                <li>
+                    <i class="iconfont icon-phone"></i>
+                </li>
+                <li>
+                    <i class="iconfont icon-user"></i>
+                </li>
+                <li>
+                    <i class="iconfont icon-editor2"></i>
+                </li>
+                <li>
+                    <i class="iconfont icon-kefu"></i>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwuchekong"></i>
+                </li>
+            </ul>
+        </div>
+        <!-- 工具栏区域 结束 -->
+
+        <!-- 有背景色区域开始 -->
+        <div class="gray-bg">
+            <!-- 大图广告区域 开始 -->
+             <div class="big-img main-width">
+                <img src="./image/bg3.jpg" alt="">
+             </div>
+            <!-- 大图广告区域 结束 -->
+             
+        </div>
+        <!-- 有背景色区域结束 -->
     </div>
 </body>