fengchuanyu 2 weeks ago
parent
commit
bb8a31c4a4
2 changed files with 59 additions and 1 deletions
  1. 28 0
      2_CSS/38_三角形2.html
  2. 31 1
      2_CSS/练习14_小米登录页面.html

+ 28 - 0
2_CSS/38_三角形2.html

@@ -0,0 +1,28 @@
+<!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{
+            width: 400px;
+            height: 400px;
+            background-color: blue;
+        }
+        .box2{
+            width: 0;
+            height: 0;
+            border-top: 100px solid red;
+            border-left: 100px solid transparent;
+            /* border-right: 100px solid yellow; */
+            /* border-bottom: 100px solid purple; */
+        }
+    </style>
+</head>
+<body>
+    <div class="box1">
+        <div class="box2"></div>
+    </div>
+</body>
+</html>

+ 31 - 1
2_CSS/练习14_小米登录页面.html

@@ -120,6 +120,24 @@
             margin-top: -285px;
             margin-left: -225px;
         }
+        .login-content .login-tab .tab-item{
+            float: left;
+            color: #bbb;
+            font-size: 22px;
+            font-weight: 400;
+            margin-right: 20px;
+        }
+        .login-content .login-tab .active{
+            color: rgba(0, 0, 0, 0.8);
+            font-weight: 500;
+        }
+        .login-content .login-tab .active::after{
+            content: "";
+            display: block;
+            height: 4px;
+            background-color: #ff5c00;
+            border-radius: 2px;
+        }
         /* 登录框 end */
         /* 登录内容区域 end */
     </style>
@@ -153,7 +171,19 @@
                     </ul>
                 </div>
             </div>
-            <div class="login-box"></div>
+            <div class="login-box">
+                <div class="login-tab">
+                    <div class="tab-content clearfix">
+                        <div class="tab-item active">登录</div>
+                        <div class="tab-item ">注册</div>
+                    </div>
+                </div>
+                <div class="login-inp"></div>
+                <div class="login-info"></div>
+                <div class="login-btn"></div>
+                <div class="login-ctr"></div>
+                <div class="login-other"></div>
+            </div>
             <div class="footer"></div>
         </div>
     </div>