HTML与CSS的初步学习——实现注册页面

最新推荐文章于 2023-06-21 18:50:22 发布

ShineKaizi

最新推荐文章于 2023-06-21 18:50:22 发布

阅读量1.2k

点赞数 2

分类专栏： Java Web

本文链接：https://blog.csdn.net/ShineKaizi/article/details/97612400

版权

Java Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML语言为超文本标记语言，是一种创建网页的标准标记语言，在所有的语言中还算比较容易学习的了，所以下面小编就介绍一下整个网页注册页面的实现方法。

一、对于新手而言，首先就是要了解html里面到底有什么，该怎样使用，大体上的代码如下：

<!DOCTYPE html>
<html>
<head>	<!--定义头部-->
	<meta charset = 'UTF-8'> <!--元素的使用，声明编码可使用中文，否则中文网页会乱码-->
	<title>注册页面</title>  <!--定义文档标题-->
</head>

<body>  <!--定义体-->

</body>
</html>

编写完的整个文件用浏览器打开，就能够看到网页的初步模型了，当然只有标题，其他什么都没有，因为body里面没有任何内容。还有记住这是一个html文件。

二、然后呢，我们就进入真正的正题了，废话不多说，直接上代码。

<html>

	<head>
		<meta charset = 'UTF-8'>
		<title>注册页面</title>
		
	</head>

	<body>
	
		<div class = 'rg_layout'>    <!--div标签一般与css结合使用,class和id优先级比较高-->
			<div class = 'rg_left'>
				<p id = 'p_user'>新用户注册</p>
				<p id = 'p_register'>USER REGISTER</p>
			</div>
			
			<div class = 'rg_center'>
				<div class = 'rg_form'>
					<form action = "#" method = 'post'>
		
							<table >    <!--定义表单-->
							
								<tr>    <!--tr为表单的行-->
									<td class = 'td_left'><label for = 'username'>用户名</label></td >    <!--td为表单的单元格，label for为用户名作标记，点击用户名会自动跳转到输入框-->
									<td class = 'td_right'><input type = 'text' name = 'username' id = 'username' placeholder = '请输入用户名'></td>    <!--input为输入框，placeholder为输入框默认显示的内容-->
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'password'>密码</label></td >
									<td class = 'td_right'><input type = 'password' name = 'password' id = 'password' placeholder = '请输入密码'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'Email'>Email</label></td >
									<td class = 'td_right'><input type = 'Email' name = 'Email' id = 'Email' placeholder = '请输入邮箱'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'name'>姓名</label></td >
									<td class = 'td_right'><input type = 'text' name = 'name' id = 'name' placeholder = '请输入姓名'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'tel'>手机号码</label></td >
									<td class = 'td_right'><input type = 'text' name = 'tel' id = 'tel' placeholder = '请输入手机号码'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'gender'>性别</label></td >
									<td class = 'td_right'><input type = 'radio' name = 'gender' value = 'male'>男
										<input type = 'radio' name = 'gender' value = 'female'>女
									</td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'birthday'>出生日期</label></td >
									<td class = 'td_right'><input type = 'date' name = 'birthday' id = 'birthday'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'checkcode'>验证码</label></td >
									<td class = 'td_right'><input type = 'text' name = 'checkcode' id = 'checkcode' placeholder = '请输入验证码'>
										<img id = 'img_check' src = './timg.jpg' >
									</td>
									
								</tr>
								
								<tr>
									<td colspan = '2' align = 'center'><input id = 'btn_sub' type = 'submit' value = '注册'></td>
								</tr>
							</table>
						</form>
				</div>
			</div>
			
			<div class = 'rg_right'>
				<p>已有账号？<a href = '#'>立即登陆</a></p>    <!--a 为链接，href定义链接地址-->
			</div>
		
		</div>
		
	
	</body>
</html>

写完代码的结果大致是这样子的：

没有任何的修饰，而且布局也只是在左上方，单一而且不美观，但是如果用上CSS就不一样了，就能极大提高用户的体验了。CSS指层叠样式表，主要功能就是美化页面，布局页面。主要的实现方法有两种，外部样式和内部样式，这两种都比较常见，但一般还是使用外部样式，外部样式可以极大提高工作效率，外部样式表通常储存在css文件中，内部样式表则储存在html文件中就可以了，这里便使用内部样式表实现了。对比一下就能看到CSS的好处。

一、首先就是CSS该怎样使用，那就直接上代码吧，代码里面有注释。

<style>	<!--样式风格-->
		
		<!--属性都是以键值对成对存在-->
		
			*{	<!--定义样式里面所有-->
				margin:0px;		<!--各方向外部间距为0-->
				padding:0px;	<!--各方向内部间距-->
				box-sizing:border-box;	<!--定义边框大小固定，不会随着padding的改变而变化-->
			}
			
			body{
				background:url(background.jpg) no-repeat center;	<!--定义背景，图片不重复，居中-->
			}
			
			.rg_layout{	<!--自定义的当前目录下的class的名称-->
				width : 900px;
				height: 500px;
				border: 8px solid #eeeeee;	<!--边框颜色-->
				background-color:white;		<!--背景颜色-->
				
				/*让div水平居中*/
				margin:auto;
				margin-top:15px;
			}
			
			.rg_left{
				/*border:1px solid red;*/
				float:left;
				margin:15px;
			}
			
			#p_user{	<!--自定义的当前目录下的id的名称-->
				
				color:#ffd026;
				font-size:20px;
			}
			
			#p_register{
				color:#a6a6a6;
				font-size:20px;
			}
			
			.rg_center{
				/*border:1px solid red;*/
				float:left;
				
				width:450px;
			}
			
			.rg_right{
				/*border:1px solid red;*/
				float:right;
				margin:15px;
			}
			
			.rg_right > p:first-child{
				font-size:15px;
			}
			
			.rg_right p a {		<!--rg_right名称所对应的标签下的p标签下的a链接-->
				color : pink;
			}
			
			.td_left{
				width : 100px;
				text-align:right;
				height:45px;
			}
			
			.td_right{
				padding-left:50px;
			}
			
			#username,#password,#Email,#name,#tel,#birthday,#checkcode{
				width:251px;
				height:32px;
				border:1px solid #a6a6a6;
				/**设置边框圆角*/
				border-radius:5px;
				padding-left:15px; 
			}
			
			#checkcode{
				width:110px;
				
			}
			
			#img_check{
				
				height:32px;
				width:130;
				vertical-align:middle;
			}
			
			#btn_sub{
				width:150px;
				height:40px;
				background-color:#ffd026;
				border:1px solid #ffd026;
			}
		</style>

以上就是注册页面内部样式的伪代码，整个完整的代码如下：

<html>

	<head>
		<meta charset = 'UTF-8'>
		<title>注册页面</title>
		
		
		<style>	
			
			*{	
				margin:0px;		
				padding:0px;	
				box-sizing:border-box;	
			}
			
			body{
				background:url(background.jpg) no-repeat center;	
			}
			
			.rg_layout{	
				width : 900px;
				height: 500px;
				border: 8px solid #eeeeee;	
				background-color:white;		
				
				/*让div水平居中*/
				margin:auto;
				margin-top:15px;
			}
			
			.rg_left{
				/*border:1px solid red;*/
				float:left;
				margin:15px;
			}
			
			#p_user{	
				
				color:#ffd026;
				font-size:20px;
			}
			
			#p_register{
				color:#a6a6a6;
				font-size:20px;
			}
			
			.rg_center{
				/*border:1px solid red;*/
				float:left;
				
				width:450px;
			}
			
			.rg_right{
				/*border:1px solid red;*/
				float:right;
				margin:15px;
			}
			
			.rg_right > p:first-child{
				font-size:15px;
			}
			
			.rg_right p a {		
				color : pink;
			}
			
			.td_left{
				width : 100px;
				text-align:right;
				height:45px;
			}
			
			.td_right{
				padding-left:50px;
			}
			
			#username,#password,#Email,#name,#tel,#birthday,#checkcode{
				width:251px;
				height:32px;
				border:1px solid #a6a6a6;
				/**设置边框圆角*/
				border-radius:5px;
				padding-left:15px; 
			}
			
			#checkcode{
				width:110px;
				
			}
			
			#img_check{
				
				height:32px;
				width:130;
				vertical-align:middle;
			}
			
			#btn_sub{
				width:150px;
				height:40px;
				background-color:#ffd026;
				border:1px solid #ffd026;
			}
		</style>
		
	</head>

	<body>
	
		<div class = 'rg_layout'>
			<div class = 'rg_left'>
				<p id = 'p_user'>新用户注册</p>
				<p id = 'p_register'>USER REGISTER</p>
			</div>
			
			<div class = 'rg_center'>
				<div class = 'rg_form'>
					<form action = "#" method = 'post'>
		
							<table >
							
								<tr>
									<td class = 'td_left'><label for = 'username'>用户名</label></td >
									<td class = 'td_right'><input type = 'text' name = 'username' id = 'username' placeholder = '请输入用户名'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'password'>密码</label></td >
									<td class = 'td_right'><input type = 'password' name = 'password' id = 'password' placeholder = '请输入密码'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'Email'>Email</label></td >
									<td class = 'td_right'><input type = 'Email' name = 'Email' id = 'Email' placeholder = '请输入邮箱'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'name'>姓名</label></td >
									<td class = 'td_right'><input type = 'text' name = 'name' id = 'name' placeholder = '请输入姓名'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'tel'>手机号码</label></td >
									<td class = 'td_right'><input type = 'text' name = 'tel' id = 'tel' placeholder = '请输入手机号码'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'gender'>性别</label></td >
									<td class = 'td_right'><input type = 'radio' name = 'gender' value = 'male'>男
										<input type = 'radio' name = 'gender' value = 'female'>女
									</td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'birthday'>出生日期</label></td >
									<td class = 'td_right'><input type = 'date' name = 'birthday' id = 'birthday'></td>
								</tr>
								
								<tr>
									<td class = 'td_left'><label for = 'checkcode'>验证码</label></td >
									<td class = 'td_right'><input type = 'text' name = 'checkcode' id = 'checkcode' placeholder = '请输入验证码'>
										<img id = 'img_check' src = './timg.jpg' >
									</td>
									
								</tr>
								
								<tr>
									<td colspan = '2' align = 'center'><input id = 'btn_sub' type = 'submit' value = '注册'></td>
								</tr>
							</table>
						</form>
				</div>
			</div>
			
			<div class = 'rg_right'>
				<p>已有账号？<a href = '#'>立即登陆</a></p>
			</div>
		
		</div>
		
	
	</body>
</html>

代码写完保存后打开，展示网页就是下面这样子的：

这样子看上去是不是好多了，就比较友好了，注册页面的网页也宣告完成了，学好html与css，让自己更进一步，加油！

ShineKaizi

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
HTML与CSS的初步学习——实现注册页面

HTML语言为超文本标记语言，是一种创建网页的标准标记语言，在所有的语言中还算比较容易学习的了，所以下面小编就介绍一下整个网页注册页面的实现方法。一、对于新手而言，首先就是要了解html里面到底有什么，该怎样使用，大体上的代码如下：<!DOCTYPE html><html><head>  <meta cha...
复制链接

扫一扫