Inicio Explorar Axuda
Iniciar sesión
lovecoding
/
web0715
10
0
Fork 0
Ficheiros Incidencias 0 Wiki
Explorar o código

add

fengchuanyu hai 11 meses
pai
b077f4ab61
achega
23ee702e92
Modificáronse 3 ficheiros con 106 adicións e 1 borrados
Unificar vista Mostrar estatísticas de Diff
  1. BIN=BIN
      2_css/img/logo-mi2.png
  2. 74 1
      2_css/练习16_小米官网.html
  3. 32 0
      2_css/练习17_垂直居中.html

BIN=BIN
2_css/img/logo-mi2.png
Ver ficheiro


+ 74 - 1
2_css/练习16_小米官网.html
Ver ficheiro 

@@ -178,6 +178,58 @@
 
             font-size: 14px;
 
             font-size: 14px;
 
             color: #333;
 
             color: #333;
 
         }
 
         }
 
+
 
+        /* 顶部导航 css start */
 
+        .top-nav{
 
+            padding: 20px 0;
 
+        }
 
+        .top-nav .tn-left {
 
+            float: left;
 
+            width: 56px;
 
+            height: 56px;
 
+            background-image: url("./img/logo-mi2.png");
 
+            background-size: cover;
 
+        }
 
+
 
+        .top-nav .tn-center {
 
+            float: left;
 
+            width: 850px;
 
+            text-align: right;
 
+        }
 
+
 
+        .top-nav .tn-center li {
 
+            display: inline-block;
 
+            height: 56px;
 
+            line-height: 56px;
 
+            padding: 0 10px;
 
+        }
 
+        .top-nav .tn-center li:hover{
 
+            cursor: pointer;
 
+            color: #ff6700;
 
+        }
 
+        .top-nav .tn-right {
 
+            float: right;
 
+            width: 300px;
 
+            height: 50px;
 
+            border: 1px solid #e0e0e0;
 
+        }
 
+        .top-nav .tn-right .tnr-text{
 
+            float: left;
 
+            height: 50px;
 
+            line-height: 50px;
 
+            padding-left: 20px;
 
+        }
 
+        .top-nav .tn-right .tnr-inp{
 
+            float: right;
 
+            height: 50px;
 
+            width: 50px;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            border-left: 1px solid #e0e0e0;
 
+        }
 
+        .top-nav .tn-right i{
 
+            font-size: 24px;
 
+        }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 
 
@@ -237,7 +289,28 @@
 
         </div>
 
         </div>
 
         <!-- 顶部导航 -->
 
         <!-- 顶部导航 -->
 
         <div class="top-nav">
 
         <div class="top-nav">
 
-            <i class="iconfont icon-search"></i>
 
+            <div class="content clearfix">
 
+                <div class="tn-left"></div>
 
+                <div class="tn-center">
 
+                    <ul>
 
+                        <li>Xiaomi手机</li>
 
+                        <li>Redmi手机</li>
 
+                        <li>电视</li>
 
+                        <li>笔记本</li>
 
+                        <li>平板</li>
 
+                        <li>家电</li>
 
+                        <li>路由器</li>
 
+                        <li>服务中心</li>
 
+                        <li>社区</li>
 
+                    </ul>
 
+                </div>
 
+                <div class="tn-right">
 
+                    <div class="tnr-text">手机</div>
 
+                    <div class="tnr-inp">
 
+                        <i class="iconfont icon-search"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
         </div>
 
         </div>
 
         <!-- 轮播图区域 -->
 
         <!-- 轮播图区域 -->
 
         <div class="slider-content"></div>
 
         <div class="slider-content"></div>

+ 32 - 0
2_css/练习17_垂直居中.html
Ver ficheiro 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box1,.box2{
 
+            width: 400px;
 
+            height: 400px;
 
+            border:3px solid black;
 
+            float: left;
 
+        }
 
+        .box3{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        <span>hello</span>
 
+    </div>
 
+    <div class="box2">
 
+        <div class="box3"></div>
 
+    </div>
 
+    <div class="box2">
 
+        <div class="box3"></div>
 
+    </div>
 
+</body>
 
+</html>