用户注册页面的设计与实现
需要制作的效果图如下
大概思路:我们先设置底色灰色,然后写出表单,再利用CSS给表单进行设置。
1、设置底色(css 行内式)
<style>
body{background:#cccccc;}
</style>
2、制作表单
<div id="container">
<h1>用户注册页面</h1>
<hr/>
<!---表单-->
<form method="post" action="URL" >
<label>用户名:
<input type="text" name="username" >
</label><br/>
<label>密码:
<input type="password" name="pwd" >
</label><br/>
<label>确认:
<input type="password" name="pwd2" >
</label><br/>
<label>姓名:
<input type="text" name="name" >
</label><br/>
<label>邮箱:
<input type="email" name="email" >
</label><br/>
<button type="submit"> 提交注册 </button>
</form>
</div>
3、进行CSS设置
<style>
#container{
background:white;
color:#2289F0;
padding:15px;
margin: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;
}
body{background:#cccccc;}
input{width:180px;
height:20px;
margin:5px;
font-size:16px;
font-family:"微软雅黑 Light";}
button{width:120px;
height:40px;
background:#2289F0;
border:0px;
color:white;
margin:10px;
font-size:18px;
font-family:"微软雅黑 Light";
font-weight:bold;}
button:hover{background:#00c8D0;}
</style>
代码解释:box-shadow是阴影效果
button:hover是指我们在鼠标悬浮时的样式,可以百度hover进行了解
4、我们可以看到现在表单左边,用户名那里是没有对齐的,以及我们会有一些内容的补充
- autocomplete=“on” 根据记忆自动补全,意思就是我们之前输入过的内容,在此输入的时候会提示,这是默认的,如果你改成autocomplete=“off” 就会变成不提示 。
- placeholder=添加提示语句,就是说在文本框里你看看到相应的浅浅的提示
- required非空验证,意思就是你如果没有输入,也就是如果你没有填写到内容,然后提交,他会提示你此项内容不能为空
- & ensp;& ensp;这个是补全空格,只是一个& ensp; 相当于半个中文字符的长度,& emsp; 也是补全空格,只是一个& emsp; 相当于一个中文字符的长度,& ensp;& ensp;==& emsp;还有其他补全空格的形式,一共有6种。
(注意,这个写博客的时候显示就是空格,所以我在&和e之前敲到了空格,本身是没有空格的)
<div id="container">
<h1>用户注册页面</h1>
<hr/>
<!---表单-->
<form method="post" action="URL" autocomplete="on">
<label>用户名:
<input type="text" name="username" placeholder="请输入用户名" required />
<!--placeholder=添加提示语句 required非空验证-->
</label><br/>
<label>密  码:
<input type="password" name="pwd" placeholder="请输入密码" required />
</label><br/>
<label>确 认:
<input type="password" name="pwd2" placeholder="请再次输入密码" required />
</label><br/>
<label>姓  名:
<input type="text" name="name" placeholder="请输入真实姓名" required />
</label><br/>
<label>邮  箱:
<input type="email" name="email" placeholder="请输入电子邮箱" required />
</label><br/>
<button type="submit"> 提交注册 </button>
</form>
</div>
最后再把代码总的发一次
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#container{
background:white;
color:#2289F0;
padding:15px;
margin: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;
}
body{background:#cccccc;}
input{width:180px;
height:20px;
margin:5px;
font-size:16px;
font-family:"微软雅黑 Light";}
button{width:120px;
height:40px;
background:#2289F0;
border:0px;
color:white;
margin:10px;
font-size:18px;
font-family:"微软雅黑 Light";
font-weight:bold;}
button:hover{background:#00c8D0;}
</style>
</head>
<body>
<div id="container">
<h1>用户注册页面</h1>
<hr/>
<!---表单-->
<form method="post" action="URL" autocomplete="on"> <!--根据记忆自动补全-->
<label>用户名:
<input type="text" name="username" placeholder="请输入用户名" required />
<!--placeholder=添加提示语句 required非空验证-->
</label><br/>
<label>密  码:
<input type="password" name="pwd" placeholder="请输入密码" required />
</label><br/>
<label>确 认:
<input type="password" name="pwd2" placeholder="请再次输入密码" required />
</label><br/>
<label>姓  名:
<input type="text" name="name" placeholder="请输入真实姓名" required />
</label><br/>
<label>邮  箱:
<input type="email" name="email" placeholder="请输入电子邮箱" required />
</label><br/>
<button type="submit"> 提交注册 </button>
</form>
</div>
</body>
</html>
上面所有内容为个人总结,如有任何不对的地方,可以私聊我,我会马上进行修正,如果进行转载请告知,谢谢。