fengchuanyu 1 день назад
Родитель
Сommit
fa558dd533
2 измененных файлов с 59 добавлено и 2 удалено
  1. 46 0
      2_CSS/css/login.css
  2. 13 2
      2_CSS/练习8_小米登录.html

+ 46 - 0
2_CSS/css/login.css

@@ -134,5 +134,51 @@ li{
     background-color: transparent;
     background-color: transparent;
     font-size: 20px;
     font-size: 20px;
 }
 }
+/* 协议区域 */
+.login-box .login-agreement{
+    padding:20px 0;
+}
+.login-box .login-agreement div{
+    float: left;
+    font-size: 14px;
+}
+.login-box .login-agreement .inp input{
+    height: 20px;
+    width: 20px;
+    margin-top:-2px;
+}
+.login-box .login-agreement .text{
+    color: #838383;
+}
+.login-box .login-agreement .text u{
+    color: #333;
+}
+/* 登录按钮 */
+.login-box .login-btn{
+    margin: 20px 0;
+}
+.login-box .login-btn .inp-btn button{
+    height: 60px;
+    width: 100%;
+    background-color: #ff6900;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 400;
+    border-radius: 4px;
+    border:0;
+}
+.login-box .login-btn .text-btn{
+    margin-top: 10px;
+    color: #ff5c00;
+}
+.login-box .text-btn span:first-child{
+    float: left;
+}
+.login-box .text-btn span:last-child{
+    float: right;
+}
+
+
+
 
 
 
 

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

@@ -53,11 +53,22 @@
                 </div>
                 </div>
                 <!-- 协议区域 -->
                 <!-- 协议区域 -->
                 <div class="login-agreement">
                 <div class="login-agreement">
-
+                    <div class="inp">
+                        <input type="checkbox">
+                    </div>
+                    <div class="text">
+                        已阅读并同意<u>小米账号使用协议</u>和<u>小米账号隐私政策</u>
+                    </div>
                 </div>
                 </div>
                 <!-- 登录按钮 -->
                 <!-- 登录按钮 -->
                 <div class="login-btn">
                 <div class="login-btn">
-
+                    <div class="inp-btn">
+                        <button>登录</button>
+                    </div>
+                    <div class="text-btn clearfix">
+                        <span>忘记密码?</span>
+                        <span>注册账号</span>
+                    </div>
                 </div>
                 </div>
                 <!-- 其他登录方式 -->
                 <!-- 其他登录方式 -->
                 <div class="login-other">
                 <div class="login-other">