Home Explore Help
Sign In
lovecoding
/
W260426
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 10 hours ago
parent
11822caf2a
commit
f34fc8edda
3 changed files with 93 additions and 12 deletions
Unified View Show Diff Stats
  1. 47 0
      2_CSS/css/login.css
  2. 4 5
      2_CSS/练习2_简单商品卡.html
  3. 42 7
      2_CSS/练习8_小米登录.html

+ 47 - 0
2_CSS/css/login.css
View File 

@@ -89,3 +89,50 @@ li{
 
     border-left: 5px solid transparent;
 
     border-left: 5px solid transparent;
 
     border-right: 5px solid transparent;
 
     border-right: 5px solid transparent;
 
 }
 
 }
 
+/* 登录框 */
 
+.login-box{
 
+    width: 450px;
 
+    background-color: #fff;
 
+    box-shadow:0 0 10px #aaa;
 
+    margin: 100px auto;
 
+    padding: 40px 45px;
 
+    box-sizing: border-box;
 
+}
 
+.login-box .login-tab div{
 
+    font-size: 24px;
 
+    color: #bbb;
 
+    font-weight: 400;
 
+    float: left;
 
+    margin-right: 20px;
 
+}
 
+.login-box .login-tab div.active{
 
+    color: #111;
 
+}
 
+.login-box .login-tab .active::after{
 
+    content: "";
 
+    display: block;
 
+    height: 4px;
 
+    width: 100%;
 
+    background-color: #ff6900;
 
+    margin-top:5px;
 
+    border-radius: 2px;
 
+}
 
+.login-box .login-input{
 
+    margin-top: 20px;
 
+    overflow: hidden;
 
+}
 
+.login-box .login-input div{
 
+    height: 60px;
 
+    background-color: #f5f5f5;
 
+    margin-top: 20px;
 
+    padding-left: 20px;
 
+}
 
+.login-box .login-input input{
 
+    height: 100%;
 
+    border:0;
 
+    outline: none;
 
+    background-color: transparent;
 
+    font-size: 20px;
 
+}
 
+
 
+

+ 4 - 5
2_CSS/练习2_简单商品卡.html
View File 

@@ -6,14 +6,13 @@
 
     <title>Document</title>
 
     <title>Document</title>
 
     <style>
 
     <style>
 
         .product-card{
 
         .product-card{
 
-            width: 400px;
 
-            height: 500px;
 
+            width: 200px;
 
             border:1px solid black;
 
             border:1px solid black;
 
-            margin: 0 auto;
 
-            padding:40px;
 
+            margin: 100px auto;
 
+            padding:20px 30px;
 
         }
 
         }
 
         .product-img{
 
         .product-img{
 
-            width: 400px;
 
+            width: 200px;
 
         
         
         }
 
         }
 
     </style>
 
     </style>

+ 42 - 7
2_CSS/练习8_小米登录.html
View File 

@@ -1,17 +1,19 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <title>Document</title>
 
     <!-- 引入css文件 rel="stylesheet" href为css文件路径 -->
 
     <!-- 引入css文件 rel="stylesheet" href为css文件路径 -->
 
-    <link rel="stylesheet" href="./css/login.css"> 
+    <link rel="stylesheet" href="./css/login.css">
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <!-- 最外层容器 -->
 
     <!-- 最外层容器 -->
 
     <div class="container clearfix">
 
     <div class="container clearfix">
 
         <!-- 登录页面左侧图片 -->
 
         <!-- 登录页面左侧图片 -->
 
-        <div class="left-img"></div> 
+        <div class="left-img"></div>
 
         <!-- 登录页面主要功能部分 -->
 
         <!-- 登录页面主要功能部分 -->
 
         <div class="right-content">
 
         <div class="right-content">
 
             <!-- 顶部导航栏 -->
 
             <!-- 顶部导航栏 -->
 
@@ -19,7 +21,7 @@
 
                 <div class="logo clearfix">
 
                 <div class="logo clearfix">
 
                     <img src="./img/logo-mi2.png" alt="logo">
 
                     <img src="./img/logo-mi2.png" alt="logo">
 
                     <span>小米账号</span>
 
                     <span>小米账号</span>
 
-                </div> 
+                </div>
 
                 <div class="top-nav">
 
                 <div class="top-nav">
 
                     <ul class="clearfix">
 
                     <ul class="clearfix">
 
                         <li>用户协议</li>
 
                         <li>用户协议</li>
 
@@ -30,9 +32,42 @@
 
                             <i></i>
 
                             <i></i>
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
 
-                </div> 
-            </div>    
-        </div> 
-    </div>
 
+                </div>
 
+            </div>
 
+            <!-- 登录框 -->
 
+            <div class="login-box">
 
+                <!-- 登录框切换按钮 -->
 
+                <div class="login-tab clearfix">
 
+                    <div class="active">登录</div>
 
+                    <div >注册</div>
 
+                </div>
 
+                <!-- 文本框区域 -->
 
+                <div class="login-input">
 
+                    <div>
 
+                        <!-- placeholder 占位符 -->
 
+                        <input type="text" placeholder="邮箱/手机号码/小米ID">
 
+                    </div>
 
+                    <div>
 
+                        <input type="password" placeholder="密码">
 
+                    </div>
 
+                </div>
 
+                <!-- 协议区域 -->
 
+                <div class="login-agreement">
 
+
 
+                </div>
 
+                <!-- 登录按钮 -->
 
+                <div class="login-btn">
 
+
 
+                </div>
 
+                <!-- 其他登录方式 -->
 
+                <div class="login-other">
 
+
 
+                </div>
 
+            </div>
 
+            <!-- 底部区域 -->
 
+            <div class="bottom-bar">
 
+            </div>
 
+        </div>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>