【HTML+CSS+JS】注册页面模板

利用基本的html+css逻辑实现一个简易的注册页面

源码如下：

<html>
<style>
body{background-image:url("/i/paper.jpg");
}
</style>
<body>
<h1 style="background-color:hsl(39, 100%, 50%)" align=center>注&nbsp册</h1>
<style>
div{text-align:center;color:black;font-size:18;font-weight:900;
}
.button {background-color:#555555;border-radius: 4px;transition-duration: 0.4s;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 18px;margin: 4px 2px;cursor: pointer;
}
.button1:hover {background-color: #4CAF50;color: white;
}
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;border: 1px solid #e7e7e7;background-color: #f3f3f3;
}li {float: left;
}li a {display: block;color: #666;text-align: center;padding: 14px 16px;text-decoration: none;
}li a:hover:not(.active) {background-color: #ddd;
}li a.active {color: white;background-color: #4CAF50;
}
input[type=text1] {width: 30%;padding:20px ;margin:10px 0;box-sizing: border-box;text-align:left;
}
</style>
<ul><li><a class="active" href="###">首页</a></li><li><a href="###">公告</a></li><li><a href="###">客服</a></li><li><a href="###">关于我们</a></li><li style="float:right"><a class="active" href="###">退出</a></li>
</ul>
<script>
window.alert("欢迎注册，编程猿！");
</script>
<div>
<form  method="get" action="login.jsp">
设置用户名：<br>
<input type="text" name="beginNum" value="请输入用户名" maxlength="10" size="40" ><br><br>
性别：
<input type="radio" name="sexy" value="男" checked="true">男
<input type="radio" name="sexy" value="女" >女<br><br>
设置密码：<br>
<input type="text" name="endNum" value="请输入密码" maxlength="10" size="40" ><br><br>
确认密码：<br>
<input type="text" name="endNum" value="请输入密码" maxlength="10" size="40" ><br><br>
学历：
<select ><option value="volvo">初中</option><option value="saab">高中</option><option value="opel">专科</option><option value="audi">本科</option>
</select><br>
就业方向:
<input type="radio" name="subject" value="java" checked="true">Java后端
<input type="radio" name="subject" value="web" >web前端
<input type="radio" name="subject" value="C#" >C#
<input type="radio" name="subject" value="python">python<br><br>
期望薪资：
<input list="money" name="money">
<datalist id="money"><option value="5k以上"><option value="8-10k"><option value="10k-12k"><option value="12-15k"><option value="15k以上">
</datalist>
<input  type="submit"><br>
备注：
<input type="text1" name="beginNum" value="说点什么吧....."   maxlength="1000" size="40" ><br><br>
<button class="button button1" type="button" onclick="alert('注册成功')" align=center>点击完成注册</button>
<input class="button button1" type="reset" value="退出">
</div>
</form></body>
</html>

如果觉得起到帮助，帮忙一键三连哦~~~

【HTML+CSS+JS】注册页面模板相关推荐

web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)
web网页设计期末课程大作业~粉色的服装购物商城页面模板临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系 ...
HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)...
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
css+js校验实现仿网易邮箱注册界面和校验功能
css+js校验实现仿网易邮箱注册界面和校验功能先来看看最终的效果图吧ヾ(≧▽≦*)o 代码如下: <!DOCTYPE html> <html lang="en& ...
【HTML+CSS+JS】简单的登录注册验证
登录注册验证简单的小说明效果源码 HTML 登录注册.html loginSuccess.html CSS JS pageChange.js Click.js 简单的小说明本文是基于https ...
使用html+css+js实现的登录注册页面
使用html+css+js实现的登录注册页面这学期学了web,按照自己的想法实现下面的登录注册页面. 在注册页面里,使用js实现对邮箱格式.密码强度和密码一致性的检查. 源码放在github上,顺带 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...

【HTML+CSS+JS】注册页面模板

【HTML+CSS+JS】注册页面模板相关推荐

最新文章

热门文章