【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

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

相关文章
|
2天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
[HTML、CSS]知识点
29 0
[HTML、CSS]知识点
|
2天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节、经验
[HTML、CSS]细节、经验
26 0
[HTML、CSS]细节、经验
|
4天前
|
移动开发 前端开发 数据可视化
分享63个Html后端模板,总有一款适合您
分享63个Html后端模板,总有一款适合您
15 3
|
4天前
|
移动开发 前端开发 HTML5
分享62个Html后端模板,总有一款适合您
分享62个Html后端模板,总有一款适合您
13 4
|
4天前
|
移动开发 前端开发 数据管理
分享83个Html后端模板,总有一款适合您
分享83个Html后端模板,总有一款适合您
13 2
|
4天前
|
移动开发 前端开发 HTML5
分享83个Html前端模板,总有一款适合您
分享83个Html前端模板,总有一款适合您
17 4
|
5天前
|
移动开发 前端开发 程序员
分享90个Html前端模板,总有一款适合您
分享90个Html前端模板,总有一款适合您
10 2
|
5天前
|
移动开发 前端开发 JavaScript
分享79个Html前端模板,总有一款适合您
分享79个Html前端模板,总有一款适合您
11 0
|
5天前
|
移动开发 开发框架 前端开发
分享78个Html前端模板,总有一款适合您
分享78个Html前端模板,总有一款适合您
9 0
|
5天前
|
移动开发 前端开发 JavaScript
分享76个Html前端模板,总有一款适合您
分享76个Html前端模板,总有一款适合您
16 5