【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天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
15 0
HTML5/CSS3粒子效果进度条代码
|
3天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
11 0
|
5天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
11 1
|
6天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
11天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
11天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
11天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
11天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
Web App开发 JavaScript 前端开发
javascript模板插件amaze.js
javascript模板插件amaze.js
|
12天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握