用户注册代码

原创于 2021-06-29 16:40:31 发布 · 982 阅读

CC 4.0 BY-SA版权

这是一个HTML5用户注册页面的示例，包含了CSS样式设计，包括注册面板、水平线、输入表单和按钮的样式定义。页面背景设为浅灰色，注册面板使用白色背景，具有阴影效果。输入字段包括用户名、密码、确认密码、姓名和邮箱，所有字段均为必填。提交按钮在鼠标悬停时颜色会变化。

body {
background-color:#CCCCCC;/*设置页面背景色为浅灰色*/
}

/*注册面板样式*/
#container{
   background-color:white;
   color:#2289F0;
   padding:15px;
   margin: 100px auto 0px; /*上边距100px；左右为auto；下边距0px*/
   width:600px;
   text-align:center;
   font-family:"微软雅黑 Light";
   box-shadow: 10px 10px 15px black;
}

/*水平线样式*/
hr{
   width:80%;
   border:#2289F0 1px solid;
   margin-bottom:15px;
}

/*输入表单样式*/
input{
   width:180px;
   height:20px;
   margin:5px;
   font-size:16px;
   font-family:"微软雅黑 Light";
}

/*按钮样式*/
button{
   width:120px;
   height:40px;
   background-color:#2289F0;
   border:0px;
   color: white;
   margin:10px;
   font-size:18px;
   font-family:"微软雅黑 Light";
   font-weight:bold;
}

/*鼠标悬浮时按钮样式*/
button:hover{
background-color:#0068D0;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5用户注册页面示例</title>
<link rel="stylesheet" href="css/reg.css">
</head>
<body>
<div id="container">

<h1>用户注册页面</h1>

<hr />

<form method="post" action="URL" autocomplete="on">
<label>用户名：
<input type="text" placeholder="请输入用户名" name="username" required />
</label>
<br />
<label>密　码：
<input type="password" placeholder="请输入密码" name="pwd" required />
</label>
<br />
<label>确　认：
<input type="password" placeholder="请再次输入密码" name="pwd" required />
</label>
<br />
<label>姓　名：
<input type="text" placeholder="请输入真实姓名" name="name" required />
</label>
<br />
<label>邮　箱：
<input type="email" placeholder="请输入电子邮箱" name="email" required />
</label>
<br />
<button type="submit">
提交注册
</button>
</form>
</div>
</body>
</html>