使用bootstrap写一个注册页面

效果是这样，其中后面的小方块是可以移动的，用css animation写的动画，专业二级联动也已经实现：

具体html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bootstrap注册页面</title><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/bootstrap.min.css"><script src="./js/bootstrap.min.js"></script>
</head><body><div id="main"><div id="main-top"><form action=""><div class="row mb-3"><label class="label col-sm-2 col-form-label">UserName</label><div class="col-sm-10"><input type="text" class="input"></div></div><div class="row mb-3"><label class="label col-sm-2 col-form-label">password</label><div class="col-sm-10"><input type="password" class="input"></div></div><div class="row mb-3"><label class="label col-sm-2 col-form-label" style="white-space:nowrap">repeat password</label><div class="col-sm-10"><input type="password" class="input" style="width: 80%;margin-left: 4.3em;"></div></div><div class="row mb-3"><label class="label col-sm-2 col-form-label">city</label><div class="col-sm-10"><select class="input"><option selected>Chongqing</option><option value="1">Beijing</option><option value="2">Shanghai</option><option value="3">Guangdong</option></select></div></div><div class="row mb-3"><label class="label col-sm-2 col-form-label">Sex</label><div class="col-sm-10 form-check" style="margin-top: 5px;"><input class="check-input" type="radio" name="sex"><label class="form-check-label">boy</label><input class="check-input" type="radio" name="sex"><label class="form-check-label">girl</label></div></div><div class="row mb-3"><label class="label col-sm-2 col-form-label">interest</label><div class="col-sm-10 form-check" style="margin-top: 5px;"><input class="check-input" type="checkbox" name="sex"><label class="form-check-label">ball</label><input class="check-input" type="checkbox" name="sex"><label class="form-check-label">eat</label><input class="check-input" type="checkbox" name="sex"><label class="form-check-label">sing</label></div></div><div class="row mb-3"><label class="label col-sm-2 col-form-label">major</label><div class="col-sm-10"><select class="input col-5" style="display: inline;" id="faculty" onchange="change()"><option selected>faculty</option><option value="1">faculty1</option><option value="2">faculty2</option><option value="3">faculty3</option></select><select class="input col-5" style="display: inline;" id="major"><option selected>major</option><option value="1">ShuangQiao</option><option value="2">Zhucheng</option><option value="3">Guangdong</option></select></div></div></form></div></div><ul class="w3lsg-bubbles"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><script>// 表单二级联动function change() {var faculty = document.getElementById("faculty");fValue = faculty.value;console.log(fValue)var major = document.getElementById("major");console.log(major.innerHTML)switch (fValue) {case "1":major.innerHTML = "<option>major1</option><option>major1</option><option>major1</option>";break;case "2":major.innerHTML = "<option>major2</option><option>major2</option><option>major2</option>";break;case "3":major.innerHTML = "<option>major3</option><option>major3</option><option>major3</option>";break;}}</script>
</body></html>

css代码（我是写在单独的文件引入的，）

body {font-family: Verdana;background: #673AB7;background: -webkit-linear-gradient(to bottom right, #673AB7 50%, #6231b9 50%);background: linear-gradient(to bottom right, #673AB7 50%, #6231b9 50%);background-size: cover;background-attachment: fixed;overflow: hidden;
}body,
html,
.wrapper {height: 100%;
}.w3lsg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;
}.w3lsg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 25s infinite;-moz-animation: square 25s infinite;-o-animation: square 25s infinite;-ms-animation: square 25s infinite;animation: square 25s infinite;-webkit-transition-timing-function: linear;-moz-transition-timing-function: linear;-o-transition-timing-function: linear;-ms-transition-timing-function: linear;transition-timing-function: linear;
}.w3lsg-bubbles li:nth-child(1) {left: 10%;
}.w3lsg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;-moz-animation-delay: 2s;-o-animation-delay: 2s;-ms-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;-moz-animation-duration: 17s;-o-animation-duration: 17s;animation-duration: 17s;
}.w3lsg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;-moz-animation-delay: 4s;-o-animation-delay: 4s;-ms-animation-delay: 4s;animation-delay: 4s;
}.w3lsg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;-moz-animation-duration: 22s;-o-animation-duration: 22s;-ms-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);
}.w3lsg-bubbles li:nth-child(5) {left: 70%;
}.w3lsg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;-moz-animation-delay: 3s;-o-animation-delay: 3s;-ms-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);
}.w3lsg-bubbles li:nth-child(7) {left: 32%;width: 160px;height: 160px;-webkit-animation-delay: 7s;-moz-animation-delay: 7s;-o-animation-delay: 7s;-ms-animation-delay: 7s;animation-delay: 7s;
}.w3lsg-bubbles li:nth-child(8) {left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;-moz-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;-moz-animation-duration: 40s;animation-duration: 40s;
}.w3lsg-bubbles li:nth-child(9) {left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3);
}.w3lsg-bubbles li:nth-child(10) {left: 90%;width: 160px;height: 160px;-webkit-animation-delay: 11s;animation-delay: 11s;
}@-webkit-keyframes square {0% {-webkit-transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);-moz-transform: translateY(-700px) rotate(600deg);-o-transform: translateY(-700px) rotate(600deg);-ms-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}
}@keyframes square {0% {-webkit-transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);-moz-transform: translateY(-700px) rotate(600deg);-o-transform: translateY(-700px) rotate(600deg);-ms-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}
}#main {z-index: 999;width: 35%;margin: 3.5em auto;background: rgba(41, 5, 105, 0.43);background-size: cover;border: 1px solid blanchedalmond;
}#main-top {padding: 2em 3em 3em;
}.label,
label {color: #fff;
}.input {margin-left: 1em;margin-top: -10px;height: 40px;font-size: 1em;color: #fff;font-weight: 100;width: 93%;display: block;border: none;border-bottom: solid 1px #fff;transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);background-position: -800px 0;background-size: 100%;background-repeat: no-repeat;color: #fff;
}option {background-color: rosybrown;
}.check-input {background: #4c2395;cursor: pointer;width: 1.2em;height: 1.2em;box-sizing: border-box;margin: 3px 3px 3px 4px;
}

使用bootstrap写一个注册页面相关推荐

如何用spring boot写一个注册页面
环境准备: java集成开发环境:IDEA 数据库:Mysql Maven 最好在安装有个navicat(数据库可视化界面) 安装好上述几个软件后总结下:五步 1.创建新的工程 2.创建建appli ...
用java写注册表单_利用HTML表单标签编写一个注册页面
今天我们来写一个注册页面 form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构: 页面结构大体就是这样子的~ 利用HTML表单标签编写一个注册页面表单标签: 所有需要提交到服务 ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
用bootstrap写一个简洁的网页
在最近两周,我学习了bootstrap前端开发框架来快速制作一个网页,以往自己用html,css等学习的网页知识来写一个网页,往往需要挺长的时间.这次用bootstrap写的这个demo前后大概用了2 ...
[js] 写一个获取页面中所有checkbox的方法
[js] 写一个获取页面中所有checkbox的方法 function getAllCheckbox() {return [...document.querySelectorAll('input[ty ...
一个注册页面的前端模板（html+css+javascript）可自适应屏幕
一个注册页面的前端模板(html+css+javascript)可自适应屏幕,修改样式即可用. 截图代码 <!DOCTYPE html> <html><head> ...
uniapp写一个登录页面
很高兴为您解答,可以参考以下步骤来写一个登录页面: 创建一个uniapp项目,并在项目中创建一个登录页面: 在登录页面中添加用户名和密码输入框,以及一个登录按钮: 在登录按钮的点击事件中,添加验证用户 ...
h5 php登录注册页面验证,H5制作一个注册页面的代码实例
HTML5写的注册页面,正在学习html5的朋友可以参考下代码如下: register.html function play(){ document .getElementById("me ...
html 写一个注册和登录页面
先写注册页面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
使用Vue写一个登录页面
上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面. 1.构建项目的目录 2.App.vue <template><div id="app"&g ...

使用bootstrap写一个注册页面

使用bootstrap写一个注册页面相关推荐

最新文章

热门文章