简单的HTML+css完成的用户注册界面（新手第一次写）
下面是css部分的代码实现：用户注册<style type="text/css">/*初始化属性*/*{padding: 0;margin: 0;box-sizing: border-box;}body{background-image: url("....
文章共2,243字 · 阅读需要大约8分钟
一键AI生成摘要，助你高效阅读
问答
·
下面是css部分的代码实现：
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style type="text/css">
/*初始化属性*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-image: url("../image/register.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
/*最外围的大div*/
.mainPart{
width: 1000px;
height: 500px;
border: 4px solid #ebe5ff;
margin: 90px auto auto;
}
/*左上角文字的div*/
.explain{
float: left;
}
/*设置第一个P标签*/
.explain p:first-child{
color: #ff956e;
font-size: 25px;
margin-left: 10px;
margin-top: 10px;
}
/*设置最后一个P标签*/
.explain p:last-child{
margin-left: 10px;
}
/*中间表单部分的div*/
.tableArea{
float: left;
width:500px;
height:400px;
margin-left: 70px;
margin-top: 50px;
}
/*设置背景图片*/
#picture{
/*使用绝对定义取消其在页面中占据的位置*/
position: absolute;
/*让其他袁术覆盖于图片上方*/
z-index: -1;
/*图片透明度*/
opacity: 0.5;
width: 995px;
height:495px;
}
/*右上角的文字div*/
.rightTip{
float: right;
}
.rightTip a{
color: #ff94d7;
text-decoration: none;
}
.rightTip a:hover{
color: #ff3b31;
}
/*中间的div的表单区域设置*/
.tableData{
width: 400px;
height: 350px;
margin: auto;
}
/*设置fieldset*/
fieldset{
height: 396px;
}
/*设置表格*/
.dataTableLeft{
width: 80px;
text-align: right;
}
.dataTableRight{
padding-left: 20px;
}
/*设置输入框*/
#username,#password,#perName,#phoneNumber,#number,#date,#email{
border: 1px solid rgba(203,197,198,0.03);
border-radius: 5px;
height: 27px;
width:235px;
padding-left: 5px;
}
/*设置提交按钮*/
#sub{
width: 120px;
height: 40px;
background-color: rgba(84,83,87,0.11);
border: 1px solid #faf7f7;
border-radius: 10px;
color: #deebff;
}
.subTd{
text-align: center;
}
/*单独设置验证码框*/
#number{
width:100px;
}
/*单独设置验证码图片*/
#numberPicture{
/*设置垂直居中*/
vertical-align: middle;
width:130px;
height:35px;
}
/*单独设置性别选择框旁边的文字*/
.sex{
font-size: 18px;
}
</style>
</head>
------------------------------------分割线，下面是html部分--------------------------------------
<body>
<div class="mainPart">
<img src="../image/white.jpg" id="picture">
<div class="explain">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="tableArea">
<form method="post">
<fieldset>
<legend>新用户注册</legend>
<table class="tableData">
<tr>
<td class="dataTableLeft"><label>用户名</label></td>
<td class="dataTableRight">
<input type="text" placeholder="请输入用户名"
id="username" required="required" min="3" max="8">
</td>
</tr>
<tr>
<td class="dataTableLeft"><label>密码</label></td>
<td class="dataTableRight"><input type="password" placeholder="请输入密码"
id="password" required="required"></td>
</tr>
<tr>
<td class="dataTableLeft"><label>Email</label></td>
<td class="dataTableRight"><input type="email"
id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="dataTableLeft"><label>姓名</label></td>
<td class="dataTableRight"><input type="text" placeholder="请输入姓名"
id="perName" required="required"></td>
</tr>
<tr>
<td class="dataTableLeft"><label>手机号</label></td>
<td class="dataTableRight">
<input type="text" placeholder="请输入手机号码"
id="phoneNumber" required="required" min="3" max="11">
</td>
</tr>
<tr>
<td class="dataTableLeft"><label>性别</label></td>
<td class="dataTableRight">
<input type="radio" value="男" name="sex"><samp class="sex">男</samp>
<input type="radio" value="女" name="sex"><samp class="sex">女</samp>
</td>
</tr>
<tr>
<td class="dataTableLeft"><label>出生日期</label></td>
<td class="dataTableRight"><input type="date" id="date"></td>
</tr>
<tr>
<td class="dataTableLeft"><label>验证码</label></td>
<td class="dataTableRight"><input type="text" placeholder="请输入验证码"
id="number" required="required">
<img src="../image/verCode.jpg" id="numberPicture">
</td>
</tr>
<tr>
<td class="subTd" colspan="2">
<input type="submit" value="注册" id="sub">
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<div class="rightTip">
<p>已有账号？<a href="#">立即登入</a> </p>
</div>
</div>
</body>
-------------------------------------------------完整代码如下---------------------------------------
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style type="text/css">
/*初始化属性*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-image: url("../image/register.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
.mainPart{
width: 1000px;
height: 500px;
border: 4px solid #ebe5ff;
margin: 90px auto auto;
}
.explain{
float: left;
}
/*设置第一个P标签*/
.explain p:first-child{
color: #ff956e;
font-size: 25px;
margin-left: 10px;
margin-top: 10px;
}
/*设置最后一个P标签*/
.explain p:last-child{
margin-left: 10px;
}
.tableArea{
float: left;
width:500px;
height:400px;
margin-left: 70px;
margin-top: 50px;
}
/*设置图片*/
#picture{
position: absolute;
z-index: -1;
opacity: 0.5;
width: 995px;
height:495px;
}
.rightTip{
float: right;
}
.rightTip a{
color: #ff94d7;
text-decoration: none;
}
.rightTip a:hover{
color: #ff3b31;
}
/*中间的div的表单区域设置*/
.tableData{
width: 400px;
height: 350px;
margin: auto;
}
/*设置fieldset*/
fieldset{
height: 396px;
}
/*设置表格*/
.dataTableLeft{
width: 80px;
text-align: right;
}
.dataTableRight{
padding-left: 20px;
}
/*设置输入框*/
#username,#password,#perName,#phoneNumber,#number,#date,#email{
border: 1px solid rgba(203,197,198,0.03);
border-radius: 5px;
height: 27px;
width:235px;
padding-left: 5px;
}
/*设置提交按钮*/
#sub{
width: 120px;
height: 40px;
background-color: rgba(84,83,87,0.11);
border: 1px solid #faf7f7;
border-radius: 10px;
color: #deebff;
}
.subTd{
text-align: center;
}
/*单独设置验证码框*/
#number{
width:100px;
}
/*单独设置验证码图片*/
#numberPicture{
/*设置垂直居中*/
vertical-align: middle;
width:130px;
height:35px;
}
/*单独设置性别选择框旁边的文字*/
.sex{
font-size: 18px;
}
</style>
</head>
<body>
<div class="mainPart">
<img src="../image/white.jpg" id="picture">
<div class="explain">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="tableArea">
<form method="post">
<fieldset>
<legend>新用户注册</legend>
<table class="tableData">
<tr>
<td class="dataTableLeft"><label>用户名</label></td>
<td class="dataTableRight">
<input type="text" placeholder="请输入用户名"
id="username" required="required" min="3" max="8">
</td>
</tr>
<tr>
<td class="dataTableLeft"><label>密码</label></td>
<td class="dataTableRight"><input type="password" placeholder="请输入密码"
id="password" required="required"></td>
</tr>
<tr>
<td class="dataTableLeft"><label>Email</label></td>
<td class="dataTableRight"><input type="email"
id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="dataTableLeft"><label>姓名</label></td>
<td class="dataTableRight"><input type="text" placeholder="请输入姓名"
id="perName" required="required"></td>
</tr>
<tr>
<td class="dataTableLeft"><label>手机号</label></td>
<td class="dataTableRight">
<input type="text" placeholder="请输入手机号码"
id="phoneNumber" required="required" min="3" max="11">
</td>
</tr>
<tr>
<td class="dataTableLeft"><label>性别</label></td>
<td class="dataTableRight">
<input type="radio" value="男" name="sex"><samp class="sex">男</samp>
<input type="radio" value="女" name="sex"><samp class="sex">女</samp>
</td>
</tr>
<tr>
<td class="dataTableLeft"><label>出生日期</label></td>
<td class="dataTableRight"><input type="date" id="date"></td>
</tr>
<tr>
<td class="dataTableLeft"><label>验证码</label></td>
<td class="dataTableRight"><input type="text" placeholder="请输入验证码"
id="number" required="required">
<img src="../image/verCode.jpg" id="numberPicture">
</td>
</tr>
<tr>
<td class="subTd" colspan="2">
<input type="submit" value="注册" id="sub">
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<div class="rightTip">
<p>已有账号？<a href="#">立即登入</a> </p>
</div>
</div>
</body>
</html>
--------------------------------------------页面效果图------------------------------------------------
该页面仅谷歌浏览器查看效果，页面窗口在缩小到一定比例时页面效果看起来会有点问题。新手上路，请多指教
图片资源均来源网络
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
16
0- 0
已为社区贡献1条内容
所有评论(0)