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

简介: 写一个简单的注册页面

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

image.gif编辑

image.gif编辑

源码如下:

<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>

image.gif

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

相关文章
|
5天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
16 0
|
6天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
10 0
|
25天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
15 0
springboot从控制器请求至页面时js失效的解决方法
|
25天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
15 0
|
23小时前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
7天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
8天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
10 0
|
14天前
|
JavaScript 前端开发
JS:如何创建新元素并添加到页面中
JS:如何创建新元素并添加到页面中
21 1
|
25天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
26天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
13 0

相关实验场景

更多