html+css实现了简单的注册页面

直接上代码
（注册页面：简单修改就可用）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>注册页面</title><link rel="stylesheet" href="css/zhuce.css" /><script src="js/zhuce.js"></script></head><body><div class="head"><div class="zc"><form method="get"><table class="teble" cellspacing="0" width="100%"><h2>用户注册</h2><tr><td><input class="ex" type="text" placeholder="请输入用户名" name="yer"/></td></tr><tr><td><span class="span">支持中文，字母，数字的组合</span></td></tr><tr><td><input class="ex" type="password"  placeholder="请输入密码" name="h"/></td></tr><tr><td><span class="span">建议使用数字，字母和符号</span></td></tr><tr><td><input class="ex" type="password"  placeholder="请确认密码" name="c"/></td></tr><tr><td><span class="span">两次密码不一致</span></td></tr><tr><td><input class="ex" type="number"  placeholder="验证手机号" name="df"/><a href="#">验证</a></td></tr><tr><td><span class="span">请输入用户名</span></td></tr><tr><td><input class="zcsd" type="submit" value="立即注册" /></td></tr><tr><td><sapn><input class="xz" type="checkbox"/><a href="http://www.baidu.com" onclick="fn()">我已经阅读相关文件并以知晓</a></sapn></td></tr></table></form></div></div></body>
</html>

zhuce.css

body {font-family: "隶书";
}.head {width: 2000px;height: 1060px;margin: 0 auto;margin-right: 14px;background-image: url("../img/x2.jpg");background-repeat: no-repeat;
}
.zc {width: 410px;height: 500px;position: absolute;top: 39%;left: 57%;}h2{text-align: center;color: antiquewhite;}form {width: 397px;height: 623px;border: 1px solid azure;border-radius: 20px;margin-top: -167px;}.ex {width: 295px;height: 44px;margin-top: 30px;border-radius: 6px;border: none;font-size: 18px;margin-left: 52px;text-indent: 20px;font-family: "隶书";}.zcsd {width: 270px;height: 43px;margin-top: 44px;margin-left: 68px;border-radius: 6px;border: none;background-color: #ff000094;color: aliceblue;font-size: 18px;}.xz {margin-left: 86px;margin-top: 14px;}.span {font-size: 15px;color: brown;margin-left: 77px;}
}

1.2 登录页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>登录界面</title><link rel="stylesheet" href="css/denglu.css" /></head><body><div class="head"><div class="zc"><form method="get"><table class="teble" cellspacing="0" width="100%"><h2>用户登录</h2><tr><td><input class="ex" type="text" placeholder="请输入用户名" name="yer"/></td></tr><tr><td><input class="ex" type="password"  placeholder="请输入密码"/></td></tr><tr><td><input class="zcsd" type="submit" value="登录" /><input class="zcsd sed" type="submit" value="取消" /></td></tr><tr><td><sapn><input class="xz" type="checkbox"/><a href="http://www.baidu.com" onclick="fn()">我已经阅读相关文件并以知晓</a></sapn></td></tr></table></form></div></div></body>
</html>

denglu.css

body {font-family: "隶书";
}.head {width: 2000px;height: 1060px;margin: 0 auto;margin-right: 14px;background-image: url("../img/x2.jpg");background-repeat: no-repeat;
}
.zc {width: 410px;height: 500px;position: absolute;top: 39%;left: 57%;}h2{text-align: center;color: antiquewhite;}form {width: 397px;height: 452px;border: 1px solid azure;border-radius: 20px;margin-top: -167px;}.ex {width: 295px;height: 44px;margin-top: 30px;border-radius: 6px;border: none;font-size: 18px;margin-left: 52px;text-indent: 20px;font-family: "隶书";}.zcsd {width: 88px;height: 43px;margin-top: 44px;margin-left: 68px;border-radius: 6px;border: none;background-color: #ff000094;color: aliceblue;font-size: 18px;}.xz {margin-left: 86px;margin-top: 14px;}.span {font-size: 15px;color: brown;margin-left: 77px;}.sed {background-color: #173f75c7;}
}背景图片
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021060109223756.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU4OTk5MA==,size_16,color_FFFFFF,t_70#pic_center)(js逻辑代码后期再添加)

html+css实现了简单的注册页面相关推荐

HTML/CSS写的简单的注册页面
有任何问题加群讨论群号:733899823 加群时请备注CSDN~ 还可以关注我的个人微信公众号,免费领取前端全栈学习资料呦~ 效果如图: 代码如下:(其实CSS代码可以简化很多) <!DOC ...
一个简单的注册页面制作
一个简单的网页–流水哗啦啦购物平台: 点击注册新用户后,出现的注册页面: 当密码少于八位时出现的提示: 当密码格式不正确时出现的提示: 当年龄格式不正确时出现的提示:(年龄有效格式为1-120之间的数 ...
php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
HTML实现简单的注册页面
HTML是一种标记语言,用于创建网页,这里使用HTML创建了一个简单的注册页面,其中包含表单元素,如文本框.密码框.单选按钮.下拉列表.文件上传和文本域. 先看看效果图: 代码如下: <!DO ...
实现简单QQ注册页面
HTML实现简单QQ注册页面今天突发奇想,仿一个QQ注册页面哈哈!! 效果如图: 按钮功能都还没实现,只是一个简单的网页界面! 实现代码如下 <!DOCTYPE html> <ht ...
使用html+css+js实现的登录注册页面
使用html+css+js实现的登录注册页面这学期学了web,按照自己的想法实现下面的登录注册页面. 在注册页面里,使用js实现对邮箱格式.密码强度和密码一致性的检查. 源码放在github上,顺带 ...
AJAX实现简单的注册页面异步请求
AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更 ...
HTML css——哔哩哔哩注册页面简易制作
学完表单之后的一次小练习~ 明天解封回家啦! 效果图 1. reg.css .clearfix::after{content: "";display: block;clear: b ...
一个HTML实例:写一个简单的注册页面
<!-- 暂时还没学CSS,只能是用表格进行页面布局,但是实际开发的时候不要这样写,这个题还是挺不错的,能够检验前面所学知识是否牢固,但是对于实际开发的时候不可这样使用做这个网页的时候遇到两个 ...

html+css实现了简单的注册页面

html+css实现了简单的注册页面相关推荐

最新文章

热门文章