使用bootstrap写一个注册页面

最新推荐文章于 2024-06-30 12:00:24 发布

php的绯闻女友

最新推荐文章于 2024-06-30 12:00:24 发布

阅读量3.1k

点赞数 2

分类专栏：前端文章标签： bootstrap 注册页面

本文链接：https://blog.csdn.net/Moxi099/article/details/117787479

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果是这样，其中后面的小方块是可以移动的，用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;
}