html会员注册界面设计 html代码与css代码
以下为html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册</title>
<link href="style/div.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="register">
<form action="#">
<h2>会员注册</h2>
<p>
<span>用户名：</span>
<input type="text" required pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" class="usually">（字母开头，长度为5~16位，允许字母、数字、下划线）
</p>
<p>
<span>密码：</span>
<input type="password" required pattern="^[a-zA-Z]\w{5,17}$" class="usually">（字母开头，长度为6~18位，只能包含字母、数字和下划线）
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" id="male" class="radio" checked>
<label for="male">男</label>
<input type="radio" name="sex" id="female" class="radio">
<label for="female">女</label>
</p>
<p>
<span>出生年月：</span>
<input name="birth" type="date">
</p>
<p>
<span>Email地址：</span>
<input type="email" required class="usually">
</p>
<p id="btn">
<input type="submit" value="注册会员">
</p>
</form>
</div>
</body>
</html>
以下为css代码
@charset "utf-8";
/* CSS Document */
*{
padding: 0px;
margin: 0px;
border: 0px;
}
body{
font-size: 16px;
font-family: "微软雅黑";
background: url("../images/bg.jpg") no-repeat center center fixed;
background-size: cover;
}
.register{
width: 900px;
height: 400px;
margin-top: 50px;
margin-left: 400px;
}
h2{
margin: 20px 0 20px 240px;
color: rgb(194,73,78);
}
p{
margin-top: 30px;
}
p span{
width: 150px;
margin-top: 3px;
display: inline-block;
text-align: right;
padding-right: 12px;
}
p input:not(.radio){
width: 220px;
height: 20px;
border: 1px solid #38a1bf;
padding: 5px 8px;
}
.radio{
margin-left: 20px;
}
#btn input{
width: 160px;
height: 40px;
background: rgb(9,101,90);
margin-top: 20px;
margin-left: 200px;
border-radius: 5px;
font-size: 16px;
color: #fff;
letter-spacing: 2px;
}
.usually{
background: #fff url("../images/attention.png") no-repeat 98% center;
}
.usually:required:valid{
background: #fff url("../images/right.png") no-repeat 98% center;
}
以下为最终效果图
代码中的图片请联系邮箱领取
青柠文化传播（内蒙古）有限公司宣发
联系：qnmusic@163.com
您的邮件会在1-2个工作日内回复或与您取得联系！
