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

最新推荐文章于 2024-03-04 10:17:22 发布

第1006号小白

最新推荐文章于 2024-03-04 10:17:22 发布

阅读量2.4w

点赞数 25

文章标签： html5 css 经验分享

本文链接：https://blog.csdn.net/weixin_45626404/article/details/110508087

版权

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

需要制作的效果图如下
在这里插入图片描述
大概思路：我们先设置底色灰色，然后写出表单，再利用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>密&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>

在这里插入图片描述

最后再把代码总的发一次

<!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>

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

第1006号小白

关注

25
点赞
踩
175

收藏

觉得还不错? 一键收藏
5
评论
HTML5~用户注册页面的设计与实现

用户注册页面的设计与实现需要制作的效果图如下大概思路：我们先设置底色灰色，然后写出表单，再利用CSS给表单进行设置。1、设置底色（css 行内式）<style> body{background:#cccccc;}</style>2、制作表单 <div id="container"> <h1>用户注册页面</h1> <hr/>  <form
复制链接

扫一扫