HTML+CSS实现前端注册页

最新推荐文章于 2024-06-16 23:02:16 发布
最新推荐文章于 2024-06-16 23:02:16 发布
阅读量351 收藏 3
点赞数
分类专栏： css 文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yujiaj/article/details/118387223
版权

HTML+CSS实现前端注册页

效果图：
效果图
HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>手机号注册</title>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<!--头部-->
		<div class="register_top">
			<a href="#">
				<i class="iconfont font22">&#xe609;</i>
				<i>手机号注册</i>
			</a>
		</div>
		
		<!--内容-->
		<div class="content">
			<form action="" method="post">
				<p class="iconfont font22">&#xe605;<span>+86</span><input type="text" placeholder="输入手机号"/></p>
				<p class="iconfont font22">&#xe603;<input type="text" value="" placeholder="设置登录密码，不少于6位"/></p>
				<input type="submit" value="下一步"/>
			</form>
			
		</div>
		
		<!--脚部-->
		<div class="register_footer">
			<div class="register_footer_top">
				<div class="register_footer_top_left"></div>
				<p>其他注册方式</p>
				<div class="register_footer_top_right"></div>
			</div>
			<div class="register_footer_content">
				<a href="#">
					<p class="iconfont font22">&#xe616;</p>
					<p>微信</p>
				</a>
				<a href="#">
					<p class="iconfont font22">&#xe61d;</p>
					<p>微信</p>
				</a>
				<a href="#">
					<p class="iconfont font22">&#xe7e4;</p>
					<p>微信</p>
				</a>
				<a href="#">
					<p class="iconfont font22">&#xe77a;</p>
					<p>微信</p>
				</a>
			</div>
		</div>
	</body>
</html>

公共样式style.css代码:

/*全局样式*/
*{margin:0;padding: 0;box-sizing: border-box;}
li{list-style:none;}
a{text-decoration: none;}
i{font-style: normal;}
img{display:block;border:none;}
html,body{height:100%;}
html{font-size:26.66667vw;}
body{font-size:14px;}
.left{float: left;}
.right{float: right;}

/*头部*/
.top_big{
	width:100%;
	height:0.44rem;
	color: #cbcbcb;
	font-size: 26px;
	position: absolute;
	top:0;
	left:0;
	background:#d43b33;
	z-index: 999;
}
.top{
	display: flex;
	justify-content: space-between;
	height: 100%;
	align-items: center;
	padding:0 0.125rem 0 0.14rem;
}
.top>i:first-child>img{
	width: 0.19rem;
    height: 0.25rem;
}
.top>i:last-child>img{
	width: 0.23rem;
    height: 0.23rem;
}
.top>input{
	width: 2.67rem;
    height: 0.3rem;
    color: #dbdbdb;
    font-size: 14px;
    text-align: center;
    border: none;
	outline: none;
	border-radius: 0.05rem;
}

/*主体内容*/
/*导航*/
.main{
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 0.44rem 0 0 0;
	padding-bottom: 0.7rem;
}
.main_nav{
	width: 100%;
	height: 0.4rem;
	display: flex;
	line-height: 0.4rem;
	font-size: 14px;
	justify-content: space-between;
	padding: 0 0.25rem 0 0.13rem;
	border-bottom:  0.005rem solid #cdc2c8;
}
.main_nav a{
	color: #393939;
	text-align: center;
}
.main_nav a:first-child{
	width: 0.7rem;
	height: 100%;
	color: #bb4537;
	border-bottom: 0.02rem solid #ca403d;
	box-sizing: border-box;
}

/*焦点图*/
.banner,.banner>img{
	width: 100%;
	height: 1.38rem;
}

/*内容二*/
.main_two{
	width: 100%;
	height: 1.04rem;
	display: flex;
	justify-content: space-between;
	padding: 0.15rem 0.345rem 0.15rem 0.43rem;
	border-bottom: 0.005rem solid #e0e1e3;
	margin-bottom: 0.2rem;
}
.main_two>span{
	width: 0.72rem;
	height: 100%;
	font-size: 12px;
	text-align: center;
	position: relative;
}
.main_two>span>img{
	width: 0.55rem;
	height: 0.55rem;
	display: inline-block;
	vertical-align: middle;
}
.main_two>span>p{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

/*推荐歌单*/
.recommend{
	width: 100%;
	padding: 0 0.1rem 0 0.1rem;
}
.recommend_top{
	height: 0.16rem;
	color: #323335;
	display:flex;
	justify-content: space-between;
}
.recommend_top>span>img{
	width: 0.16rem;
	height: 0.16rem;
	display: inline-block;
	margin-right: 0.06rem;
}
.recommend_top>span>span{font-size: 14px;}
.recommend_top>a{font-size: 12px;color: #696b6a;}
.recommend_content{
	width: 100%;
	padding-top: 0.2rem;
}
.recommend_content span{
	display:flex;
	justify-content: space-between;
}
.recommend_content i{
	width: 1.13rem;
	height: 1.52rem;
	font-size: 12px;
	position: relative;	
}
.recommend_content i>a>img{
	width: 100%;
	height: 1.13rem;
}
.recommend_content i>a{color: #424345;}
.recommend_content i>a>p{
	height: 0.34rem;
	position: absolute;
	bottom: 0;
	left: 0;
}
.recommend_content span:first-child{margin-bottom: 0.18rem;}

/*脚部*/
.footer{
	width: 100%;
	height: 0.49rem;
	position: absolute;
	bottom:0;
	left:0;
	background-color: rgba(0,0,0,0.75);
	display:flex;
	justify-content: space-between;
	padding: 0.07rem 0.28rem 0 0.28rem;
	
}
.footer>i{
	width: 0.5rem;
	height: 0.42rem;
	color: #a6a8a7;
	text-align: center;
	font-size: 10px;
}
.footer>i>span{font-size: 25px;}
.footer>i:first-child{color: #fff;}

register.css代码：

.register_top{
	width: 100%;
	height: 0.43rem;
	background-color: #d43b33;
	padding: 0.1rem 0 0.11rem 0.18rem;
	position: absolute;
	top:0;
	left:0;
}
.register_top a{
	width: 2.15rem;
	height: 0.23rem;
	color: #fff;
	font-size: 16px;
	display: flex;
	justify-content: space-between;
}
.register_top a>i:first-child{font-size: 20px;}

/*内容*/
.content{
	width: 100%;
	padding: 0.59rem 0.1rem 0 0.1rem;
}
.content form,.content form p{width: 100%;color: #8f8f8f;font-size: 16px;}
.content form{height: 3.55rem;}
.content form p:nth-child(1){
	border: 0.005rem solid #c9c9c9;
	border-radius: 0.05rem 0.05rem 0 0;
}
.content form p:nth-child(2){
	border-left: 0.005rem solid #c9c9c9;
	border-right: 0.005rem solid #c9c9c9;
	border-bottom: 0.005rem solid #c9c9c9;
	border-radius: 0 0 0.05rem 0.05rem;
	margin-bottom: 0.16rem;
}
.content form p:nth-child(1),.content form p:nth-child(2){padding: 0.13rem 0 0.13rem 0.13rem;}
.content form p:nth-child(1) span{color: #2e2e2e;padding-left: 0.11rem;margin-right: 0.1rem;}	
.content form p:nth-child(2)>input{padding-left: 0.11rem;}
.content form input{
	border: none;
	outline: none;
	color: #cdcdcd;
}
.content form input:nth-child(3){
	width: 100%;
	height: 0.4rem;
	color: #e0736c;
	background-color: #d33a32;
	border-radius: 0.05rem;
}

/*脚部*/
.register_footer{
	width: 100%;
	height: 1.23rem;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.36rem 0.29rem 0.39rem;
}
.register_footer_top{
	width: 100%;
	height: 0.12rem;
	color: #a3a3a3;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.2rem;
}
.register_footer_top_left,.register_footer_top_right{
	width: 1.03rem;
	height: 0.10rem;
	border-bottom: 0.005rem solid #e7e8ea;
}
.register_footer_content{
	width: 100%;
	height: 0.63rem;
	display: flex;
	justify-content: space-between;
}
.register_footer_content>a{
	width: 0.42rem;
	height: 0.63rem;
	text-align: center;
	position: relative;
}
.register_footer_content a p:first-child{
	width: 100%;
	height: 0.42rem;
	color: #666;
	font-size: 23px;
	line-height: 0.42rem;
	border-radius: 50%;
	border: 0.005rem solid #bebfc1;
}
.register_footer_content a p:last-child{
	font-size: 13px;
	color: #a8a9ab;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

下面给大家附上源文件地址链接：https://pan.baidu.com/s/1j9_zvovted9zeNSOPoCxUQ
提取码：y1yw

yujiaj
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用户系统｜前端注册页面｜代码
qq_38064686的博客
04-17 1万+
regist.jsp&lt;%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%&gt; &lt;%@ page import="com.servlet.UserServlet" %&gt; &lt;!DOCTYPE html&gt; &lt;html lan
web前端中一个注册页面
12-24
自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。
【前端】注册页面
人生苦短，我用python
01-27 422
Code： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 头部样式 */
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整注册/登录表单（超实用）轻松搞定注册/登录表单功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手超友好
南北极之间
06-16 905
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
web前端：注册页面编写
wa0128的博客
12-23 530
【代码】web前端：注册页面编写。
CSS前端编写一个注册登录页面
qq_37758122的博客
08-24 1028
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <style> table{ border:1px solid lightgray; } p.blue{ color:blue; } .firstcol{ width:20%; text-align:center; } .secondcol{ width:20%; text-al
HTML+CSS+JavaScript实现登录注册源码
05-31
本资源提供了使用这三种技术实现的登录注册源码，对于初学者或希望提升前端技能的开发者来说，这是一个非常实用的学习材料。下面将详细阐述这些技术在登录注册系统中的应用。 首先，HTML（HyperText Markup ...
HTML+CSS+ajax+php+mysql实现登录
09-30
在本项目中，"HTML+CSS+ajax+php+mysql实现登录"是一个综合性的Web开发教程，适合初学者。这个项目旨在教你如何构建一个完整的用户登录系统，涉及到前端界面设计、后端数据处理以及数据库交互等多个关键环节。下面将...
仿华为商城部分前端界面html+css+js
06-28
在本项目"仿华为商城部分前端界面html+css+js"中，我们主要探讨的是如何利用Web前端技术来构建一个类似华为商城的电子商务网站的用户界面。这个项目着重于实现HTML结构、CSS样式以及JavaScript交互功能，从而为用户...
html+css+js实现登录注册界面.rar
08-08
在这个"html+css+js实现登录注册界面.rar"压缩包中，包含的六个案例详细展示了如何运用这些技术来创建一个完整的登录注册界面，这对于个人博客、管理系统或购物网站来说是非常基础且重要的部分。 首先，HTML...
html+css+js酷炫全屏的后台登录注册界面模板
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
html注册页面代码
07-31
html实例，一个简单的注册页面，，，，，，，，，，，，，，，，，，
前端代码+登陆与注册
08-28
前端登陆与注册界面 主要包括账号登陆、扫码登陆、短信验证等功能
web前端——表单注册页面设计（注册信息）
weixin_65997960的博客
03-18 4965
在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，密码输入框中提示用户“请输入。除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；个选项，默认选择“成都”；
前端小白都能看懂的注册页面代码
qq_41039734的博客
06-16 336
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
编写一个前端登录注册页面
weixin_35754676的博客
12-17 328
好的，我会尽力为您提供帮助。 在编写前端登录注册页面时，需要考虑以下几个方面： 用户界面设计：需要考虑如何设计页面的布局和风格，使其能够吸引用户的眼球并且易于使用。 数据输入：需要设计输入框和按钮，供用户输入用户名、密码等信息。 数据验证：在用户提交信息之前，需要对输入的数据进行验证，确保其符合要求，比如密码强度足够。 数据处理：当用户提交信息时，需要将其发送到服务器端进行处理，并基于服务...
注册页面代码
HE627386528的博客
03-22 3164
注册页面代码
Web前端-简单注册页面（js）
2302_79643763的博客
06-12 426
注册界面，二次密码验证，提示信息字体颜色，正则校验
注册界面演示代码（前端开发）
liaowenxiong的博客
12-08 1216
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <style> * { margin: 0px; padding: 0px; /*这样的设置会阻止元素大小的改变，因为设置内边距时元素大小会发生改变*/
用java+html+css+jdbc+mysql实现登录注册页面
最新发布
07-07
在Java、HTML、CSS和JDBC MySQL环境中实现登录注册页面，通常需要分为以下几个步骤： 1. **HTML布局**: - 使用HTML创建用户界面，包括输入框（username, password）、登录/注册按钮等基本元素。 ```html 注册...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值