一、知识概括
1.HTML
2.JavaWeb
二、例题
实现下图效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
background-image: url(img/a.jpeg);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
#container{
background-color: white;
width: 2700px;
height: 1000px;
display: flex;
}
#one{
font-size: 70px;
color: orange;
}
#two{
font-size: 70px;
color: lightgray;
}
#left{
width: 25%;
margin-left: 20px;
margin-top: 30px;
}
#center{
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
#right{
width: 25%;
font-size: 50px;
margin-top: 30px;
}
table{
margin: 30px;
}
a{
text-decoration: none;
color: orangered;
}
a:hover{
color: crimson;
}
.i{
width: 700px;
height: 80px;
margin: 10px;
}
#check{
width: 400px;
}
#checks{
display: flex;
align-items: center;
}
img{
width: 300px;
height: 80px;
}
button{
background-color: #FFE4C4;
width: 220px;
height: 92px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<font id="one" class="t">新用户注册</font><br />
<font id="two" class="t">USER REGISTER</font>
</div>
<div id="center">
<table>
<tr>
<td>账户</td>
<td>
<input class="i" type="text" name="username" placeholder="请输入用户名" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input class="i" type="password" name="pwd" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="i" type="text" name="Email" placeholder="请输入邮箱" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input class="i" type="text" name="realname" placeholder="请输入真实姓名" />
</td>
</tr>
<tr>
<td>手机号</td>
<td>
<input class="i" type="text" name="phonenumber" placeholder="请输入手机号" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="male" checked="checked" />男
<input type="radio" name="sex" value="female" />女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input class="i" type="text" name="borndate" placeholder="yyyy年MM月dd日" />
</td>
</tr>
<tr>
<td >验证码</td>
<td id="checks">
<input id="check" class="i" type="text" name="check" placeholder="请输入验证码" />
<img src="img/a.jpg" />
</td>
</tr>
<tr>
<td >
<button type="submit">注册</button>
</td>
</tr>
</table>
</div>
<div id="right">
<span>已有用户?</span>
<a href="index.html">立即登录</a>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
