樂
喜
安
平

HTML5-15

login.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>登录界面</title>
 6         <link rel="stylesheet" type="text/css" href="css/zixuereset.css"/>
 7         <link rel="stylesheet" type="text/css" href="css/LOGIN.css"/>
 8     </head>
 9     <body>
10         <div id="con">
11             <!-- 登录标题区 -->
12             <div id="topic">
13                 用户登录
14             </div>
15             <!-- 信息输入区 -->
16             <ul id="loginform">
17                 <li>
18                     <p>手机:</p>
19                     <div id="mobile">
20                         <input type="text" name="" id="" value="" placeholder="手机号码" />
21                     </div>
22                 </li>
23                 <li>
24                     <p>密码:</p>
25                     <div id="pwd">
26                         <input type="password" name="" id="" value="" placeholder="密码" />
27                     </div>
28                 </li>
29             </ul>
30             <!-- 按钮 -->
31             <div id="btn">
32                 <div id="login">
33                     <input type="button" name="" id="" value="登录" />
34                 </div>
35                 <div id="reg">
36                     <input type="button" name="" id="" value="注册" />
37                 </div>
38             </div>
39             <ul id="person">
40                 <li>首页</li>
41                 <li>发现</li>
42                 <li>订单</li>
43                 <li>我的</li>
44             </ul>
45         </div>
46     </body>
47 </html>
48 
49

login.css

 1 *{
 2     /* border: 1px solid red; */
 3 }
 4 html,body,#con{
 5     width: 100%;
 6     height: 100%;
 7 }
 8 #topic{
 9     font-size: 5.3vw;
10     height: 12.3vw;
11     width: 100%;
12     /* 弹性盒子 */
13     display: flex;
14     /* 水平剧中 */
15     justify-content: center;
16     /* 垂直居中 */
17     align-items: center;
18     background-color: #0097FF;
19     color: #FFFFFF;
20 }
21 #loginform li{
22     display: flex;
23     width: 100%;
24     margin: 4vw 0 4vw;
25 }
26 #loginform{
27     width: 100%;
28 }
29 #loginform li p{
30     width: 20vw;
31     font-size: 3.7vw;
32     text-align: center;
33     font-weight: bolder;
34 }
35 #loginform li div{
36     /* 上方p标签设置15vw宽度后剩余宽度全部给div */
37     flex: 1;
38 }
39 #loginform li div input{
40     /* 文本框的宽度占div宽度的95% */
41     width: 95%;
42     font-size: 3.7vw;
43     border: none;
44     outline: none;
45 }
46 #btn{
47     width: 100%;
48 }
49 #btn div{
50     width: 100%;
51 }
52 #login input{
53     width: 100%;
54     height: 10vw;
55     font-size: 3.7vw;
56     background-color: #38CA73;
57     color: #FFFFFF;
58     font-weight: bolder;
59     border: none;
60 }
61 #login,#reg{
62     padding: 2.1vw 3.2vw;
63     /* 改变盒子模型类型,从内容盒子改成边框盒子 */
64     /* 盒子即使加了內边距,盒子欢度也不会增加,但会压缩盒子内部空间 */
65     /* 新盒子模型 */
66     box-sizing: border-box;
67 }
68 #reg input{
69     width: 100%;
70     height: 10vw;
71     font-size: 3.7vw;
72     font-weight: bolder;
73     border: none;
74 }
75 #person{
76     position: fixed;
77     left: 0;
78     bottom: 0;
79     display: flex;
80     font-size: 4.2vw;
81     width: 100%;
82     justify-content: space-around;
83     height: 14.1vw;
84     align-items: center;
85     /* border-top: 1px solid black; */
86     background-color: #DADADA;
87 }
88 #person li{
89     font-size: 3.7vw;
90 }

 

posted @ 2021-07-09 20:36  喵酱爱吃鱼  阅读(38)  评论(0)  编辑  收藏  举报