admin

2_CSS/css/login.css

@@ -17,7 +17,12 @@ li{
     /* 清除所有方向的浮动 */
     clear: both;
 }
-
+/* 最外层容器 */
+.container{
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
 /* 左侧图片部分 */
 .left-img{
     height: 100vh;
@@ -35,3 +40,52 @@ li{
     background-color: #f5f5f5;
     float: left;
 }
+
+/* 顶部导航栏 */
+.top-bar{
+    padding:20px;
+}
+.logo{
+    float: left;
+}
+.logo img{
+    width: 40px;
+    height: 40px;
+    display: block;
+    float: left;
+}
+.logo span{
+    font-size: 26px;
+    color:rgba(0,0,0,.8);
+    font-weight: 500;
+    display: block;
+    float: left;
+    margin-left: 10px;
+}
+.top-nav{
+    float: right;
+}
+.top-nav ul li{
+    float: left;
+    color:#838383;
+    font-size: 14px;
+    margin:0 10px;
+}
+.top-nav ul li:hover{
+    color:#ff6900;
+    cursor: pointer;
+}
+.top-nav ul li.line{
+    color:rgba(0,0,0,.1)
+}
+.top-nav ul li.line:hover{
+    cursor:auto;
+}
+.top-nav li i{
+    display: inline-block;
+    margin-top: 5px;
+    border-top: 5px solid gray;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}

2_CSS/练习8_小米登录.html

@@ -13,7 +13,26 @@
         <!-- 登录页面左侧图片 -->
         <div class="left-img"></div> 
         <!-- 登录页面主要功能部分 -->
-        <div class="right-content"></div> 
+        <div class="right-content">
+            <!-- 顶部导航栏 -->
+            <div class="top-bar clearfix">
+                <div class="logo clearfix">
+                    <img src="./img/logo-mi2.png" alt="logo">
+                    <span>小米账号</span>
+                </div> 
+                <div class="top-nav">
+                    <ul class="clearfix">
+                        <li>用户协议</li>
+                        <li>隐私政策</li>
+                        <li>帮助中心</li>
+                        <li class="line">|</li>
+                        <li>中文(简体)
+                            <i></i>
+                        </li>
+                    </ul>
+                </div> 
+            </div>    
+        </div> 
     </div>
 </body>
 </html>