HTML5~用户注册页面的设计与实现

用户注册页面的设计与实现

需要制作的效果图如下
HTML5~用户注册页面的设计与实现_第1张图片
大概思路:我们先设置底色灰色,然后写出表单,再利用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>

HTML5~用户注册页面的设计与实现_第2张图片
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进行了解
HTML5~用户注册页面的设计与实现_第3张图片
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>&ensp;&ensp;码:
        	<input type="password" name="pwd"  placeholder="请输入密码" required />
        </label><br/>
        <label>&emsp;认:
        	<input type="password" name="pwd2"  placeholder="请再次输入密码" required /> 
        </label><br/>
        <label>&ensp;&ensp;名:
        	<input type="text" name="name" placeholder="请输入真实姓名" required />
        </label><br/>
        <label>&ensp;&ensp;箱:
        	<input type="email" name="email"  placeholder="请输入电子邮箱" required />
        </label><br/>
        
        <button type="submit"> 提交注册 </button>
    </form>
    </div>

HTML5~用户注册页面的设计与实现_第4张图片

最后再把代码总的发一次

<!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>&ensp;&ensp;码:
        	<input type="password" name="pwd"  placeholder="请输入密码" required />
        </label><br/>
        <label>&emsp;认:
        	<input type="password" name="pwd2"  placeholder="请再次输入密码" required /> 
        </label><br/>
        <label>&ensp;&ensp;名:
        	<input type="text" name="name" placeholder="请输入真实姓名" required />
        </label><br/>
        <label>&ensp;&ensp;箱:
        	<input type="email" name="email"  placeholder="请输入电子邮箱" required />
        </label><br/>
        
        <button type="submit"> 提交注册 </button>
    </form>
    </div>
</body>
</html>

上面所有内容为个人总结,如有任何不对的地方,可以私聊我,我会马上进行修正,如果进行转载请告知,谢谢。

你可能感兴趣的:(html5,css,经验分享)