html+CSS的QQ注册界面练习

最新推荐文章于 2024-04-30 10:00:00 发布
最新推荐文章于 2024-04-30 10:00:00 发布
阅读量1.6w 收藏 37
点赞数 9
分类专栏： web前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43431593/article/details/106035835
版权

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ注册</title>
	<link rel="stylesheet" type="text/css" href="./css/register.css">
</head>
<body>
	<div id="left_div">
		<img src="./image/QQregister.png">
	</div>
	<div id="right_div">
		<div id="right_center">
			<div id="text1">欢迎注册QQ</div>
			<div id="text2">
				<div id="text_div1">每一天乐在沟通</div>
				<div id="text_div2">免费靓号</div>
			</div>
			<div class="input_div">
				<input class="input" type="text" placeholder="昵称" name="username" id="username">
			</div>
			<div class="input_div">
				<input class="input" type="password" placeholder="密码" name="password" id="password">
			</div>

			<div id="phone_div">
				<input type="text" name="areaCode"
				id="areaCode"
				value="+86">
				<input type="text" name="phoneNum" id="phoneNum" placeholder="手机号码">
			</div>
			<div id="info">可通过该手机号找回密码
			</div>
            <div id="code_div">
                <input type="text" name="verCode" id="verCode" placeholder="验证码">
				<input type="submit" name="codeSubmit" id="codeSubmit" value="发送验证码">
			</div>
			<div>
				<input type="submit" name="submit" id="submit" value="立即注册">
			</div>
		</div>
	</div>

</body>
</html>

CSS

body{
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	background:url("../image/bj888.png");
}

/* 划分左边区域 */

#left_div{
	position: fixed;
	width: 480px;
	height: 100%;
}
#left_div img{
	width: 480px;
	height: 100%;
}

/* 划分右边区域 */

#right_div{
	margin-left: 480px;
}
#right_center{
	width: 100%;
	padding-top: 120px;
	padding-left: 480px;
}
#right_center input{
	padding-left: 10px;
}

/* 设置文本样式 */
 
#text1{
	font-size: 44px;
	margin-bottom: 30px;
}

#text2 div{
	font-size: 28px;
	display: inline-block;
}

#text_div2{
	color: #359eff;
	margin-left:200px;
	margin-bottom: 30px;
	cursor: pointer;	
}

/* 设置输入样式 */

input{
	border: 1px #aaa solid;
	border-radius: 4px;
	font-size: 20px;
	height: 50px;	
}
.input{
	width: 500px;
}
.input_div{
	margin-top: 30px;
}

/* 设置区域、手机号样式 */
#areaCode{
	width: 120px;
}
#phone_div{
	margin-top: 30px;
}
#phoneNum{
	margin-left: 10px;
	width: 354px;
}
#info{
	font-size: 14px;
	height: 14px;
	color: #999;
	margin-top: 7px;
}

/* 设置验证码、发送验证码样式 */
#verCode{
	width: 120px;
}
#code_div{
	margin-top: 30px;
}
#codeSubmit{
    border: 1px #3083ff solid;
	background-color:#3487ff;
	color: #fff;
	margin-left: 10px;
	width: 364px;
}

#submit{
	width: 510px;
	border: 1px #3083ff solid;
	background-color:#3487ff;
	color: #fff;
	margin-top: 40px;
}

界面展示

在这里插入图片描述

Lion King
关注
  • 9
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTMLQQ号码申请页面源代码
11-16
HTMLQQ号码申请页面源代码
QQ注册页面
路上有风
08-03 8389
利用HTML+CSS编辑QQ注册页面 最近在学html和css，老师布置任务要写个QQ注册页面，在观看这位大神的博客下，最后总算是完成了，有同学也感兴趣的话可以看下我写的内容 点击查看那位大神的博客链接 第一步,先下载个前端开发工具，工具的话有很多，例如Hbuilder 和VScode我用的是Hbuilder 第二步，就是具体如何实现页面了 1、这是注册页面（register.htm） <!...
QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手
最新发布
DL_dldlhhj的博客
04-30 1142
QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手
QQ模拟注册功能
weixin_46352653的博客
07-03 182
<?xml version="1.0" encoding="utf-8"?>
QQ注册界面仿写（HTML+CSS+JS）
热门推荐
不迁怒，不贰过。小知识，大智慧。
12-16 1万+
1:1还原仿写的QQ注册界面（利用HTML+CSS+JS技术）
HTML5实现QQ注册页面，QQ登录页面，豆瓣电影网页
weixin_67259816的博客
10-31 3684
主要使用HTML5完成QQ注册页面，QQ登录页面，豆瓣电影页面。使用table标签完成布局，以及使用简单的CSS装饰页面，完成最终的效果
QQ注册页面（完整版）
m0_63512120的博客
07-20 7206
用HTML5和CSS3实现的一个简易版QQ注册页面，希望能给大家带来帮助，在文章结尾附网页源码和图片素材！
用html中表单标签实现QQ登录注册静态页面
x1785551的博客
12-08 7042
例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QQ注册验证</title> </head> <body> <form method="get" action="success.html"> <img src="img/b...
模仿QQ官网首页 前端 静态页面 用来练习基础的HTML+CSS
09-21
此外，浮动（`float`）、盒模型（`box-sizing`）、响应式布局（媒体查询 `@media`）也是CSS中重要的概念，对于模仿复杂页面如QQ官网的布局至关重要。 在"img"文件夹中，通常会包含项目所需的图片资源。在HTML中，...
html+css项目练习.rar
12-06
在这个项目练习中，你可以通过创建实际的HTML页面并应用CSS样式来深化对这些概念的理解。尝试不同的布局方法，调整元素的样式，创建交互效果，这将有助于提升你的Web开发技能。同时，不断查阅文档、参与在线社区讨论...
html + css 还原qq音乐静态页面，仿qq音乐HTML页面
04-06
在本项目中，我们将探讨如何使用HTML和CSS技术来还原QQ音乐的静态页面。这是一个常见的前端开发练习，旨在提升开发者对网页布局、响应式设计以及样式美化的能力。下面，我们将详细解析这个过程中涉及的关键知识点。 ...
防QQ注册页面源码,CSS+JS
09-12
在这个防QQ注册页面中，HTML代码会创建出用户可以看到和交互的界面布局。例如，它可能会包含输入框供用户输入QQ号码，按钮供用户提交信息，以及可能的错误提示区域。 接着，CSS（Cascading Style Sheets）用于美化...
大学生网页制作之美食篇html+css静态网页设计
06-14
在“大学生网页制作之美食篇html+css静态网页设计”这个项目中，学生将学习如何运用HTML、CSS以及JavaScript这三种基础的Web开发技术来创建一个以美食为主题的静态网页。这个设计实例对于初学者来说非常实用，因为它...
html和css制作qq号码申请页面
thels_的博客
10-27 968
【代码】html和css制作qq号码申请页面。
验证注册页面信息（JavaScript）
weixin_48112113的博客
07-19 1万+
1. 任务要求 1）正则表达式的使用； 2）如何获取表单元素？ 3）函数的应用； 4）掌握String对象的创建； 5）掌握String对象的常用方法； 6）表单验证的方法。 2. 需求说明 根据所给素材制作注册页面，使用JavaScript制作文本提示特效，验证页面数据的有效性，要求如下： （1）使用表单form的onsubmit事件，根据验证函数的返回值是true或false来决定是...
仿QQ注册验证码的实现。
weixin_30580943的博客
03-31 293
最近发现一些网站的验证码全部换成了“极验”和“点触”的，发现QQ的注册也是与“点触”的相似。就想尝试实现一个。 先上效果图： 下面贴上主要思路及代码： 第一步：得到常用汉字列表 public static List<string> GetChineseWordList() { string cacheKey...
QQ注册页面制作
m0_72852791的博客
12-14 397
【代码】QQ注册页面制作。
html+css+jsp登录注册页面
04-16
HTML、CSS和JSP是常用于构建网页和实现用户交互的前端技术。下面是一个简单的HTML+CSS+JSP登录注册页面的示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>登录注册页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>登录</h1> <form action="login.jsp" method="POST"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required><br> <input type="submit" value="登录"> </form> <h1>注册</h1> <form action="register.jsp" method="POST"> <label for="newUsername">用户名:</label> <input type="text" id="newUsername" name="newUsername" required><br> <label for="newPassword">密码:</label> <input type="password" id="newPassword" name="newPassword" required><br> <input type="submit" value="注册"> </form> </div> </body> </html> ``` CSS部分（style.css）： ```css .container { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; } h1 { text-align: center; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"] { width: 100%; padding: 5px; margin-bottom: 10px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } ``` JSP部分（login.jsp和register.jsp）： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>登录注册页面</title> </head> <body> <%--%> <% if (request.getParameter("username") != null && request.getParameter("password") != null) { %> <% String username = request.getParameter("username"); %> <% String password = request.getParameter("password"); %> <%-- 在这里进行登录验证的逻辑处理 --%> <%-- 如果验证通过，可以进行页面跳转或其他操作 --%> <h2>登录成功！</h2> <% } %> <%-- 注册处理 --%> <% if (request.getParameter("newUsername") != null && request.getParameter("newPassword") != null) { %> <% String newUsername = request.getParameter("newUsername"); %> <% String newPassword = request.getParameter("newPassword"); %> <%-- 在这里进行注册逻辑处理 --%> <%-- 如果注册成功，可以进行页面跳转或其他操作 --%> <h2>注册成功！</h2> <% } %> </body> </html> ``` 以上是一个简单的HTML+CSS+JSP登录注册页面的示例，你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lion King

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值