Day48 CSS思维导图整理、注册案例

1.思维导图

2.注册案例

本体

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>注册界面</title>
 7         <link rel="stylesheet" href="css/style.css" />
 8     </head>
 9 
10     <body>
11         <div id="rg">
12             <div id="div_left">
13                 <font id="t1">新用户注册</font><br />
14                 <font id="t2">USER REGISTER</font>
15             </div>
16             <div id="div_center">
17                 <table>
18                     <tr>
19                         <td>账户</td>
20                         <td>
21                             <input type="text" name="username" placeholder="请输入账户" />
22                         </td>
23                     </tr>
24                     <tr>
25                         <td>密码</td>
26                         <td>
27                             <input type="text" name="password" placeholder="请输入密码" />
28                         </td>
29                     </tr>
30                     <tr>
31                         <td>Email</td>
32                         <td>
33                             <input type="text" name="email" placeholder="请输入邮箱" />
34                         </td>
35                     </tr>
36                     <tr>
37                         <td>姓名</td>
38                         <td>
39                             <input type="text" name="realname" placeholder="请输入姓名" />
40                         </td>
41                     </tr>
42                     <tr>
43                         <td>手机号</td>
44                         <td>
45                             <input type="text" name="phonenum" placeholder="请输入手机号" />
46                         </td>
47                     </tr>
48                     <tr>
49                         <td>性别</td>
50                         <td>
51                             <input type="text" name="sex" placeholder="请输入性别" />
52                         </td>
53                     </tr>
54                     <tr>
55                         <td>出生日期</td>
56                         <td>
57                             <input type="text" name="birthday" placeholder="yyyy年MM 月dd日" />
58                         </td>
59                     </tr>
60                     <tr>
61                         <td>验证码</td>
62                         <td id="verifies">
63                             <input type="text" name="validatecode" id="verify" placeholder="请输入验证码" />
64                             <img id="img" src="img/verify_code.jpg" />
65                         </td>
66                     </tr>
67                     <tr>
68                         <td colspan="2">
69                             <input id="btn" type="submit" value="注册" </input>
70                         </td>
71                     </tr>
72                 </table>
73             </div>
74             <div id="div_right">
75                 已有账户？
76                 <a href="login.html">立即登录</a>
77             </div>
78         </div>
79     </body>
80 
81 </html>

.css

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(../img/register_bg.png);
	background-size: cover;
}

#rg {
	background-color: white;
	opacity: 0.8;
	width: 1000px;
	height: 500px;
	display: flex;
	padding-top: 30px;
}

#div_left {
	width: 20%;
	margin-left: 30px;
	font-size: 20px;
	color: gainsboro;
	font-weight: bolder;
}

#t1 {
	color: orange;
}

#div_center {
	margin-top: 30px;
	width: 60%;
	color: gray;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#div_center input {
	width: 300px;
	height: 30px;
	border: 1px solid gainsboro;
	border‐radius: 5px;
	margin: 5px;
}

#div_center #verifies {
	display: flex;
	align‐items: center;
}

#div_center #verify {
	width: 180px;
}

#div_center img {
	width: 110px;
	height: 35px;
}

#div_center #btn {
	background‐color: yellowgreen;
	width: 150px;
	height: 35px;
	border: none;
}

#div_right {
	width: 20%;
}

#div_right a {
	color: indianred;
	text‐decoration: none;
}

#div_right a:hover {
	color: red;
}

3.实现结果

Day48 CSS思维导图整理、注册案例

猜你喜欢