QQ注册页仿写

最新推荐文章于 2022-01-18 21:42:58 发布
最新推荐文章于 2022-01-18 21:42:58 发布
阅读量770 收藏 3
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48721610/article/details/122135029
版权

本次代码来仿写QQ注册页,代码优化方式很多,小编也是新手,有能优化的地方望大佬们见谅
下面是代码部分:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="./fonts/iconfont.css"/>
		/*这里引入的是阿里图标*/
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				text-decoration: none;
			}
			.all{
				width:100%;
				height:820px;
				background-color: black;
				position: relative;
			}
			.left{
				position: fixed;
				width:480px;
				height:100%;
				left: 0;
				top: 0;
				bottom: 0;
				
			}
			.left img:nth-child(1){
				width: 480px;
			}
			.left .toplogo{
				display: inline-block;
				width: 102px;
				height: 43px;
				position: absolute;
				top:18px ;
				left: 30px;
				
			}
			.left .toplogo .qqlogo{
				position: absolute;
				width: 36px;
				height: 43px;
				top: 0;
				left: 0;
			}
			.toplogo .qqlogo:hover{
				
			}
			.toplogo>span{
			    font-size: 35px;
				margin-left: 43px;
				color: #000000;
				
			}
			.right{
				width:869px;
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				float: right;
				background-color:white;
			}
			.r-top {
				height: 100px;
				width: 100%;
				position: absolute;
				top: 10px;
			}
			
			.right .top-logo{
				width: 100px;
				height: 50px;
				
				position: absolute;
				top:10px;
				right:181px;
				border-radius: 5%;
			} 
			.top-logo .top-logoa{
				display: block;
				
			}
			.right .right-center input{
				height: 50px;
				font-size: 20px;
				padding: 0 20px;
			}
			.top-logo img{
				width: 23px;
				height: 34px;
				position: absolute;
				left: -10px;
			}
			.top-logo span{
				display: inline-block;
				color:white;
				margin-top: 10px;
				background-color:rgb(255, 70, 64);
				padding: 2px 10px 2px 20px;
				border-radius: 7px;
			}
			.r-top select{
				position: absolute;
				right: 82px;
				top: 12px;
				width: 94px;
				height: 40px;
				border: none;
				font-size: 16px;
				color: #999999;
				outline: none;
				
			}
			.r-top option{
				outline: none;
			}
			.rtop-right{
				position: absolute;
				right: 13px;
				top: 21px;
				font-size: 14px;
				
			}
			.rtop-right a{
				color: #999999;
			}
			
			.right-center{
				
				width: 300px;
				margin-left: 200px;
				margin-top: 120px;
				margin-bottom: 10px;
			}
			.right-center p:nth-child(1){
				font-size: 31px;
				margin-bottom: 10px;
			}
			.right-center p:nth-child(2){
				font-size: 25px;
				color: rgb(51, 51, 51);
			}
			.right-center .rc-top input{
				width:438px;
				margin-top: 20px;
				outline: none;
			}
			.rc-center{
				width:480px;
				margin-top: 20px;
			}
			.rc-center select{
				width: 154px;
				padding: 0 20px;
				font-size: 20px;
				height: 50px;
			}
			.rc-center input{	
				width: 261px;
				margin-left: 16px;
				outline: none;
				
			}
			.rc-bottom{
				margin-top: 10px;
				width:480px ;
			}
			.rc-bottom input{
				width: 110px;
			}
			.rc-bottom input:nth-child(2){
				width: 305px;
				margin-left: 15px;
				background-color: rgb(0, 138, 255);
				border: none;
				/* outline: none; */
				border-radius: 4px;
				color:white;
				height: 50px;
			}
			.bbtom {
				margin-top:10px ;
				width: 480px;
			}
			.bbtom input{
				width: 100%;
				background-color: rgb(0, 138, 255);
				border: none;
				/* outline: none; */
				border-radius: 4px;
				color:white;
				height: 50px;
			}
			.check{
				margin-top: 10px;
				
			}
			.check select,input{
				vertical-align: middle;
			}
			.check select{
				border: none;
				outline:none;
				color: rgb(178, 178, 200);
			}
			.check .blue{
				color: rgb(0, 160, 255);
			}
			.finall{
				width: 100%;
				text-align: center;
				margin-top: 70px;
				color: rgb(187, 187, 202);
			}
			.links{
				width:246px;
				height:95px;
				background-color: white;
				box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
				position: absolute;
				top:34px;
				right:12px;
				display: none;
			}
			.top-logo:hover .links{
				display:block;
			}
			.top-logoa:hover{
				cursor: pointer;
			}
			.links input:nth-child(1){
				width: 200px;
				height: 35px;
				border: none;
				outline: none;
				font-size: 16px;
				line-height:25px !important;
				color: rgb(183, 187, 197);
			}
			.linktop-right{
				width: 40px;
				height:35px;
				float: right;
				text-align: center;
				border-left: 1px solid whitesmoke;
			}
			.linktop-right:hover{
				background-color:rgb(255, 74, 66);
				color:white;
			}
			.links .iconfont{
				font-size: 25px !important;
				line-height: 35px;
			}
			.links form{
				height: 35px !important;
				border-top-right-radius: 5px;
				border-top-left-radius: 2px;
				border-bottom: 1px solid whitesmoke;
			}
			.links-bottom{
				width: 100%;
				text-align: center;
				height: 60px;
				line-height: 60px;
				
			}
			.links-bottom a{
				color: rgb(0, 164, 255);
				margin-left: 5px;
				font-size: 14px;
			}
			
		</style>
	</head>
	<body>
		<div class="all">
			<div class="left">
				<img src="./img/01-1.jpg" >
				<a href="" class="toplogo">
					<img src="img/logo.png" class="qqlogo" >
					<span>QQ</span>
				</a>
			</div>
			<div class="right">
				<div class="r-top">
					<div class="top-logo">
						<a  class="top-logoa">
							<img src="img/logo3.png" >
							<span >QQ靓号</span>
							<div class="links">
								<form style="width: 100%; height: 40px; margin-top: 2px;">
									<input type="text" name="" id="" placeholder="输入QQ靓号，如1992,520" />
									<div class="linktop-right">
										<label for="submit"><i class="iconfont icon-RectangleCopy"></i></label>
										<input type="submit" name="" id="submit" style="display: none;"/>
									</div>
								</form>
								<div class="links-bottom">
									<a href="">生日</a>
									<a href="">星座</a>
									<a href="">爱情</a>
									<a href="">手机</a>
								</div>
							</div>
						</a>
					</div>
				<select name="简体中文">
					<option value ="">简体中文</option>
					<option value="">繁体中文</option>
					<option value ="">English</option>
				</select>
				<div class="rtop-right">
					<a href="">意见反馈</a>
				</div>
				</div>
			<div class="right-center">
				<p>欢迎注册QQ</p>
				<p>每一天，乐在沟通。</p>
				<form action="" method="">
					<div class="rc-top">
						<input type="text" name="" placeholder="昵称" />
						<input type="password" name="" placeholder="密码" />
					</div>
					<div class="rc-center">
						<select name="">
							<option value="">+86</option>
							<option value ="">中国+86</option>
						</select>
						<input type="text" placeholder="手机号码" name="" id="" value="" />
					</div>
					<div class="rc-bottom">
						<input type="text" name=""placeholder="短信验证码" />
						<input type="button" value="发送短信验证" name="" id="" placeholder=""/>
					</div>
					<div class="bbtom">
						<input type="submit" name="" id="" value="立即注册" />
					</div>
					<div class="check">
						<input type="checkbox" name="" id="" value="" />
						<select name="">
							<option value="">我已阅读并同意相关服务条款和隐私政策</option>
							<option class="blue" value ="">《QQ号码规则》</option>
							<option class="blue"  value ="">《隐私政策》</option>
							<option class="blue"  value ="">《QQ空间服务协议》</option>
						</select>
					</div>
				</form>
			</div>
			<div class="finall">
				Copyright © 1998-2021Tencent All Rights Reserved
			</div>
			</div>
		</div>
	</body>
</html>

图标是下面图片中的搜索框,你们可以自己下载然后修改对应的代码
在这里插入图片描述
图中的企鹅和背景图需要自己下载,修改html的代码才能完美实现
在这里插入图片描述
欢迎大家借鉴

海绵宝宝学前端
关注
安卓开发学习笔记（七）：仿写腾讯QQ登录注册界面
极歌科技
11-27 854
安卓开发学习笔记（七）：仿写腾讯QQ登录注册界面 这段代码的关键主要是在我们的相对布局以及线性布局上面，我们首先在总体布局里设置为线性布局，然后再在里面设置为相对布局，这是一个十分常见的XML布局模式。 废话不多说，直接上代码：一.activity.xml <?xml version="1.0" encoding="utf-8"?&g...
模仿QQ注册界面
04-30
设计的一个登录注册界面，通过boundle获得数据。
Web实现：仿QQ注册页
jasmyn518的博客
01-18 737
HTML部分： <!DOCTYPE html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="./index.css" /> <title>QQ注册</title> </head> <body> <nav class="nav"> <a class="qq">
html5--form-table仿QQ注册页面
alexliu6711的博客
08-18 403
<!DOCTYPE html><html><head><title>用table制作qq登录页面</title><meta charset="utf-8"></head><body background="bg.jpg" topmargin="10" leftmargin="250"> &l...
html 仿qq登录页面
07-22
一个仿qq登录的html页面，
QT 简单仿写QQ界面
docblue logging
03-19 3084
因为要写一个跨平台内网传输工具DKD，为了最大程度的代码复用，所以考虑使用QT，对QT不熟悉，10天的摸索，终于画出简易的仿QQ界面，开发环境为：qt creator+gcc,效果如下： 主窗口的区域切割为三部分： 主窗口类派生于QFrame，关键代码如下： //without system titlebar setWi
Android仿写QQ用户注册，登录界面实现.rar
07-10
Android仿写QQ用户注册，登录界面实现，不过这个QQ登录界面好像有些老了，是前几年的，但是也挺漂亮的，开发其它Android应用时或许可以做个参考。这个登录界面上有登录框、面包宵菜单、复选框等基本的界面控件，另外...
仿写QQ邮箱登录网页
09-06
QQ邮箱登录网页的仿写是一项常见的前端开发任务，旨在学习和理解网页布局、表单处理以及用户交互的设计。在这个过程中，我们将关注以下几个关键知识点： 1. **HTML结构**：QQ邮箱登录页面的基础是HTML，它定义了...
仿京东登录和注册页面
11-27
2. **用户体验优化**：可能包含记住密码、自动填充、一键登录（如微信、QQ快捷登录）等功能，提高用户体验。 3. **安全性考虑**：密码输入框通常会用星号或圆点代替实际字符，防止他人窥探。同时，可能有验证码机制...
Android的模仿聊天（QQ）
09-09
通常，开发者会采用RESTful API或者WebSocket进行后台交互，发送登录、注册、发送/接收消息等请求。这需要熟悉HTTP协议、JSON数据格式，以及使用像Retrofit或Volley这样的网络库来处理网络请求。 实时通讯是模仿QQ...
HTMLQQ号码申请页面源代码
11-16
HTMLQQ号码申请页面源代码
qq注册登录页面
06-03
这个注册页面的代码很强大，十分详细，结构清晰，条理明确，适合学生参考，非原创，见谅。
仿qq登录界面软键盘弹出时不覆盖登录注册按钮
03-03
参考：http://www.apkbus.com/android-177754-1-1.html 基本思路是： 1、将activity的软件盘弹出模式设置为android:windowSoftInputMode="adjustResize" 2、使用一个可以重叠的布局比如FrameLayout、RelativeLayout等，在布局底部放置一个充满屏幕的自定义布局，重写onSizeChanged方法，当高度变化超过100（认为超过100时是软件盘弹出或者隐藏的操作）时，调用接口回调方法，可以认为这个变化的高度就是软键盘的高度 3、计算你想要不被隐藏的按钮距离屏幕底端的位置，如果需要移动的话，调用view的scrollBy方法移动相应的距离 SoftKeyBoardSatusView.java，这个类用于判断软键盘是否弹出
html仿QQ快速登录界面样式代码.zip
07-04
html仿QQ快速登录界面样式代码是一款类似QQ快速登录界面模板下载。
防QQ注册页面源码,CSS+JS
09-12
完整的防QQ页面,里面包含HTML代码加上CSS样式和jquery代码,可以作为新手的练习
自己动手编写仿ＱＱ的ａｐｐ　-1注册界面by sdust iot zhl
doge_admin的博客
08-18 1927
协议：tcp/ip 协议 架构：c/s 架构 数据库：mysql 服务器端接口语言 ：python 客户端语言:安卓注册：服务器端创建套接字，获取客户端发来的json数据，解析完后存入数据库 首先安装服务器端mysql 数据库 ，这里我直接安装了 phpstudy 然后 进入cmd,mysql - u root - p 输入密码登录数据库 然后进入 test 数据库 创建如下的数据表
HTML期末网页作业-仿QQ官网QQ注册网页
学生期末作业
06-17 2007
HTML期末作业-仿QQ官网QQ注册网页(HTML+CSS+JavaScript) 学生作业仿QQ官网部分代码截图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc.
Java 仿QQ登录注册界面
JOKER__C的博客
11-16 2881
Java 仿QQ登录注册界面 包： 用来分类 代码 一般小写 文件夹与文件夹之间的结构用 . 分开 容器： 顶级容器： 一个顶级容器就是一个窗体 窗体： 自带最小化 最大化 关闭 标题栏…等属性的容器 一般容器：面板 必须直接或间接加载在顶级容器上 布局：控制组件摆放的规则 ；如流式布局器 ：根据添加的顺序，从左至右，从上至下，且居中摆放组件 组件：按钮、输入框、滑杆、菜单等 元素：颜色、尺寸...
详尽的QQ注册登录页面验证实例与代码
在本文档中，我们探讨的是一个详细的QQ注册登录页面的实现代码，该页面设计注重用户体验和数据验证，对于学习者和开发者具有很高的参考价值。以下是关键知识点的详细介绍： 1. **注册功能验证**： - **数据库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值