使用HTML/CSS写注册界面

最新推荐文章于 2024-06-05 13:34:25 发布
最新推荐文章于 2024-06-05 13:34:25 发布
阅读量1.3k 收藏 9
点赞数 1
分类专栏： 自我学习；
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36765367/article/details/78156934
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<style type="text/css">
		th{
			font-size: 30px;
			color:blue;
		}
		.td_1{
			font-size: 25px;
			text-align: center;
			width:80px;
			height: 30px;
		}
		.td_2{
			font-size: 20px;
		}
		.td_3{
			text-align: center;
			width: 200px;
			font-size: 20px;
		}
		.a_1{
			text-decoration: none;
			color:green;
		}
		.img_1{
			width: 27px;
			border-radius: 50%;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div style="position: absolute;z-index: -1;width: 99%;height: 98.5%">
		<img src="background_1.jpg" alt="background_1" width="100%" height="100%">
	</div>
	<form action="index.html">
		<table border="1" cellpadding="10" cellspacing="1" width="520px" align="center" bgcolor="#adeaea">
			<th align="center" colspan="2">新用户注册</th>
			<td rowspan="4" class="td_3">已有账号 <a href="login.html" target="_target" class="a_1">立即登录</a></td>
			<tr>
				<td class="td_1">用户名</td>
				<td><input type="text" name="" value="" class="input_1" maxlength="12"></td>
			</tr>
			<tr>
				<td class="td_1">密   码</td>
				<td><input type="password" name="" value="" class="input_1"  maxlength="15"></td>
			</tr>
			<tr>
				<td class="td_1">性   别</td>
				<td class="td_2">
					      <input type="radio" name="sex" value="" checked="checked">男
					       
					<input type="radio" name="sex" value="">女
				</td>
			</tr>
			<tr>
				<td class="td_1">爱   好</td>
				<td style="font-size: 13px;">
					<input type="checkbox" name="" value="">唱歌
                	<input type="checkbox" name="" value="">跳舞
                	<input type="checkbox" name="" value="">绘画
                	<input type="checkbox" name="" value="">骑车
                	<input type="checkbox" name="" value="">书法
                	<input type="checkbox" name="" value="">运动
                	<input type="checkbox" name="" value="">跑步
                	<input type="checkbox" name="" value="">学习
				</td>
				<td rowspan="4" class="td_3">
					-----快速登录-----<br><br>
					<a href=""><img src="QQ_Logo.jpg" alt="QQ_Logo" class="img_1"></a>
					<a href=""><img src="微博_Logo.jpg" alt="微博_Logo" class="img_1"></a>
					<a href=""><img src="微信_Logo.jpg" alt="微信_Logo" class="img_1"></a>
					<a href=""><img src="支付宝_Logo.jpg" alt="支付宝_Logo" class="img_1"></a>
				</td>
			</tr>
			<tr>
				<td class="td_1">家   乡</td>
				<td>
					<select name="" id="">
						<optgroup label="四川">
                            <option value="广安">广安</option>
                            <option value="成都">成都</option>
                            <option value="自贡">自贡</option>
                            <option value="德阳">德阳</option>
                            <option value="绵阳">绵阳</option>
                            <option value="眉山">眉山</option>         
                        </optgroup>
                        <optgroup label="广东">
                            <option value="深圳">深圳</option>
                            <option value="广州">广州</option>
                            <option value="惠州">惠州</option>
                            <option value="珠海">珠海</option>
                            <option value="东莞">东莞</option>
                            <option value="汕头">汕头</option>
                            <option value="韶关">韶关</option>
                        </optgroup>
                        <optgroup label="湖南">
                            <option value="张家界">张家界</option>
                            <option value="长沙">长沙</option>
                            <option value="湘西">湘西</option>
                            <option value="岳阳">岳阳</option>
                            <option value="衡阳">衡阳</option>
                            <option value="韶山">韶山</option>
                            <option value="株洲">株洲</option>
                        </optgroup>
					</select>
				</td>
			</tr>
			<tr>
				<td class="td_1">自<br>我<br>介<br>绍</td>
				<td>
					<textarea name="" id="" cols="25" rows="10">
						
					</textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" name="" value="确认" style="font-size: 20px;color:blue;background-color: #adeaea;width: 70px;">     
					<form action="index.html">
						<input type="submit" name="" value="取消" style="font-size: 20px;color:blue;background-color: #adeaea;width: 70px;">
					</form>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

结果展示


八哥声动视界
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
结合html与css的简单注册界面
apple_53439775的博客
03-26 2346
初学java web，在eclipse中编译简单的注册界面 首先没有做修饰（纯html），只是简单的注册表，包含姓名(text)、性别(radio)、出生日期(date)、学校(text)、专业(select)、体育特长(checkbox)、上传照片(file)、密码(password)、个人介绍(textarea)、提交(submit)及重置(reset)。 照片文件的上传以及最终表单的提交都只是做出了一个形式，并没有真正上传到后台。 <!DOCTYPE html> <html&
HTML用户注册界面的实现
03-30
HTML用户注册界面的实现
HTML+CSS实现注册页面
好吗好的~的技术博客
01-11 6572
html> head> title>注册title> head> form action=""> fieldset> legend>信息注册:legend> 用户名: input type="text" name="user">br>br> 密 码: &nbsp; input type="password" name="password&q
使用HTML、CSS和JavaScript编写一个注册界面（一）
最新发布
阿常的博客
06-05 678
使用HTML、CSS和JavaScript编写一个注册界面（一），本篇文章先完成了HTML和CSS部分
html，css和js写的登录与注册界面
10-18
html，css和js写的登录与注册界面。本人菜水平，希望对初学者有帮助
HTML/CSS写的简单的注册页面
热门推荐
笑笑是一个码农
03-26 4万+
有任何问题加群讨论 群号：733899823 加群时请备注CSDN~ 还可以关注我的个人微信公众号，免费领取前端全栈学习资料呦~ 效果如图： 代码如下：(其实CSS代码可以简化很多) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计
02-09
注册界面设计 注册界面由一个简单的表单（Email、用户名、密码、重复密码、注册按钮、记住我、取消），创建了一个CSS3的缩放效果构成。同样需要做浏览器（Firefox、Safari and Chrome、Opera）兼容处理和 @media ...
html+css+js酷炫全屏的后台登录注册界面模板
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 ...
HTML+CSS+JavaScript实现登录注册源码
05-31
在源码中，界面一至界面十可能分别代表了不同设计风格的登录注册界面，每个界面的HTML结构会有所不同，但核心元素保持一致。 其次，CSS（Cascading Style Sheets）负责为HTML元素添加样式，使其看起来更美观。在...
HTML加CSS实现注册页面
weixin_44824500的博客
02-21 1514
（跟着视频学到了用css完善上一个页面，继续在这里更新一下代码。） ~HTML单独完成表单的代码可以看我上一篇文章HTML标签实现简单注册界面 —————————————————————————————————————— 页面效果图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta char...
用HTML控件实现注册与登录页面
05-17
1、用HTML控件实现简单的用户注册页面 要运用文本框、单选框、复选框、下拉列表、多行文本框、按钮、文件上传等控件实现注册页面，点击提交按钮后讲用户填写的信息以文本的形式显示出来。 2、用HTML控件实现简单的用户登录页面 运用文本框、label、按钮等控件实现简单的用户登录页面，登录按钮旁加上新用户注册按钮，连接到用户注册页面。将固定的用户名（admin）和密码（admin）写入代码中，输入正确则提示用户欢迎登录，并显示欢迎图片；否则提示用户名或密码错误，显示相应错误提示图片
html5,js所编写的一个精美的登陆以及注册界面
10-09
web前端,模仿阿里云注册界面,编写，登陆界面以及注册界面都有相应的注释很容易照着修改！
悬浮感，html+纯css注册页面
04-14
使用纯css+html完成制作。有需要的可以来拿，原理是盒子阴影，定位，和一些简单的css修饰
基于HTML5+css+JS_的精美登陆注册界面
08-13
基于HTML5+css+JS的精美登陆注册界面-------------------------------
基于HTML5+css+JS的精美登陆注册界面
03-22
基于HTML5+css+JS的精美登陆注册界面
html&css实现简单的注册页面
weixin_30768175的博客
08-05 384
使用HTML实现注册页面 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <form ac...
静态html+css注册页面
qq_42275455的博客
09-08 4336
纯静态登陆注册页面代码块（无API接口） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; 登陆注册 &lt;/title&gt; &lt;meta charset="utf-8" name="viewport" content="width=dev
HTML+CSS登录注册界面
m0_55586329的博客
05-26 1万+
目录一、效果演示1、注册界面2、登录界面二、代码实现2.1、HTML主页面2.2、CSS代码2.3、JS代码 一、效果演示 1、注册界面 2、登录界面 [注]: 这里需要我们创建三个文件，一个是index.html文件，一个是style.css文件还有一个是login.js文件，把代码copy上去 只要路径找好就能正常运行了。 二、代码实现 2.1、HTML主页面 <!DOCTYPE html> <html lang="en"> <head> <me
用户注册页面的设计与实现（html+css）
ZYCRY的博客
11-03 2万+
用户注册页面的设计与实现（html+css） 文章目录用户注册页面的设计与实现（html+css）1.目的2.内容3.步骤4.代码实现5.页面展示6.最后 1.目的 熟悉HTML+CSS 及表单知识的应用 2.内容 使用 HTML5 表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。 具体功能如下： 界面设计 表单设计 使用 input 标签的 email 类型实现电子邮箱验证 使用 input 标签的 autocomplete 属性实现内容自动记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值