html和css综合案例
效果展示
案例分析：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: url(img/register_bg.png) no-repeat center;
}
.div1{
width: 900px;
height: 500px;
border: 5px solid gray;
background-color: white;
/*让div水平居中*/
margin: auto;
margin-top: 15px;
}
.div-left{
/* border: red 1px solid; */
margin: 15px;
float: left;
}
.div-left > p:first-child{
color: #FFD026;
size: 20px;
}
.div-left > p:last-child{
color: gray;
size: 20px;
}
.div-center{
/* border: red 1px solid; */
width: 450px;
margin-top: 15px ;
float: left;
}
.div-right{
/* border: red 1px solid; */
margin-top: 15px;
float: right;
}
.div-right >p:first-child{
font-size: 15px;
}
.div-right p a{
color: pink;
}
.left{
width: 100px;
text-align: right;
}
.right{
padding-left:50px ;
}
#username,#password,#email,#tel,#name,#date{
width: 250px;
height: 32px;
border: 1px solid gray;
/*设置边框圆角*/
border-radius: 5px;
padding-left:10px ;
}
#checkcode{
width: 110px;
height: 32px;
border: 1px solid gray;
border-radius: 5px;
}
#img{
height:32px ;
/* 设置垂直居中 */
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background: yellow;
border: 1px solid yellow;
margin: 15px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div-left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="div-center">
<div class="div-form">
<form action="#" method="get">
<table>
<tr>
<td width="20%" class="left">
<label for="username">用户名</label>
</td>
<td class="right">
<input type="text" name="username" id="username" placeholder="请输入账号"/>
</td>
</tr>
<tr>
<td class="left">
<label for="password">密码</label>
</td>
<td class="right">
<input type="password" name="password" id="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td class="left">
<label for="email">Email</label>
</td>
<td class="right">
<input type="email" name="email" id="email" placeholder="请输入Email"/>
</td>
</tr>
<tr>
<td class="left">
<label for="name">姓名</label>
</td>
<td class="right">
<input type="text" name="name" id="name" placeholder="请输入真实姓名"/>
</td>
</tr>
<tr>
<td class="left">
<label for="tel">手机号</label>
</td>
<td class="right">
<input type="number" name="tel" id="tel" placeholder="请输入您的手机号" />
</td>
</tr>
<tr>
<td class=" left">
性别
</td>
<td class="right">
<input type="radio" name="gender" value="male" checked="checked"/>男
<input type="radio" name="gender" value="female" />女
</td>
</tr>
<tr>
<td class="left">
出生年月
</td>
<td class="right">
<input type="date" name="birthday" id="date"/>
</td>
</tr>
<tr>
<td class="left">
<label for="checkcode"> 验证码</label>
</td>
<td class="right">
<input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"/>
<img id="img" src="img/QQ截图20200429161924.png" >
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="注册" id="btn_sub"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="div-right">
<p>已有账号？<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
