【HTML界面设计（一）】底层模板、管理员界面、注册界面

云端new守夜人

已于 2023-05-30 20:13:04 修改

阅读量5.7k

点赞数 14

分类专栏：前端文章标签： html css 前端

于 2023-05-21 23:17:24 首次发布

本文链接：https://blog.csdn.net/weixin_48916759/article/details/130798279

版权

前端专栏收录该内容

3 篇文章 2 订阅

订阅专栏

记录2020年写的HTML模板。（需要自己下jQuery文件）

一、底层模板

自适应屏幕大小，左右分层。

在这里插入图片描述

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>Document</title>
    <style>
        body {
            background-color: black;
            padding: 0px;
            margin: 0px;
        }
        
        .admin-main {
            width: 98%;
            height: 96%;
            position: absolute;
            top: 0px;
            bottom: 0px;
            /* 取消块限制 */
            display: flex;
            margin: 1%;
        }
        /* 导航栏 */
        
        .navigation-bar {
            width: 20%;
            height: 100%;
            background-color: #FFFFFF;
        }
        /* 功能模块 */
        
        .function-module {
            width: 80%;
            height: 100%;
            background-color: #F2F2F2;
        }
    </style>
</head>

<body>
    <div class="admin-main">
        <div class="navigation-bar"></div>
        <div class="function-module"></div>
    </div>
</body>

</html>

二、管理员界面

触摸事件（修改背景颜色），点击事件（打开二级目录）

在这里插入图片描述

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>管理员界面</title>
    <link rel="stylesheet" href="css/a003.css">
    <script src="js/Jquery.js"></script>
    <script src="js/a003.js"></script>
</head>

<body>
    <div class="admin-main">
    <!-- 导航栏 -->
    <div class="navigation-bar">
        <!-- 管理员信息 -->
        <div class="admin-information">
            <span class="adminName">Hello Admin</span>
        </div>
        <div class="list-information">
            <ul class="nav-ul">
                <li>
                    <div class="nav-li-div">人事调动</div>
                    <ul class="div-ul">
                        <li>人事信息</li>
                    </ul>
                </li>
                <li>
                    <div class="nav-li-div">院系信息</div>
                    <ul class="div-ul">
                        <li>专业信息</li>
                        <li>专业申请</li>
                    </ul>
                </li>
                <li>
                    <div class="nav-li-div">课程安排</div>
                </li>
            </ul>
        </div>
    </div>
    <div class="function-module">
        <div class="module-index">
            <div id="mIndex"></div>
            <div class="admin-permiss">Permissions-->1</div>
        </div>
    </div>
</div>
</body>

</html>

css代码 a003.css

body {
    background-color: black;
    padding: 0px;
    margin: 0px;
}

.admin-main {
    width: 98%;
    height: 96%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    /* 取消块限制 */
    display: flex;
    margin: 1%;
}


/* 导航栏 */

.navigation-bar {
    width: 20%;
    height: 100%;
    background-color: #FFFFFF;
}

.admin-information {
    background-color: pink;
    height: 50px;
}

.admin-information>.adminName {
    background-color: ivory;
    position: absolute;
    padding: 10px;
    top: 4px;
    border-radius: 0 20px 20px 0;
}

.nav-li-div {
    padding: 8px;
}

.nav-ul,
.div-ul {
    list-style-type: none;
    padding: 0px;
    cursor: pointer;
}

.nav-ul>li {
    margin: 5px;
}

.div-ul>li {
    padding: 10px;
    margin-left: 10px;
    /* 子菜单弧度 */
    border-radius: 0 20px 20px 0;
}


/* 功能模块 */

.function-module {
    width: 80%;
    height: 100%;
    background-color: #F2F2F2;
}

.module-index {
    /* 功能模块索引 */
    background-color: #FFFFFF;
    height: 50px;
}

#mIndex {
    float: left;
    position: relative;
    padding: 10px;
    top: 4px;
}

.admin-permiss {
    /* 权限div */
    float: right;
    position: relative;
    padding: 10px;
    top: 4px;
    /* 设置弧度 */
    border-radius: 20px 0 0 20px;
    background-color: pink;
}

js代码 a003.js

// 参数
var indexText; //功能模块索引文本变量

$(document).ready(main)

function main() {
    $(".div-ul").hide();
    navUl();
    divUl();
    listClick();
}

/* -----------导航栏子菜单事件处理函数集------------ */
function navUl() {
    var navUl = $(".nav-ul").children(); //导航栏元素数组
    for (var i = 0; i < navUl.length; i++) {
        /* 弹出处理 */
        navUlClick(navUl.eq(i));
        /* 触摸处理 */
        navUlHover(navUl.eq(i));
    }
}

// 导航栏点击事件
function navUlClick(navUiThis) {
    $(".nav-li-div", navUiThis).click(function() {
        listClick($(this));
        if ($(".div-ul", navUiThis).is(':hidden')) {
            $(".div-ul", navUiThis).show();
        } else {
            $(".div-ul", navUiThis).hide();
        }
        indexVal($(this), 1);
    });
}

// 导航栏触摸事件
function navUlHover(navUiThis) {
    $(".nav-li-div", navUiThis).hover(function() {
        $(this).css("background", "pink");
    }, function() {
        $(this).css("background", "#FFFFFF");
    });
}

//子菜单处理函数
function divUl() {
    var divUl = $(".div-ul").children(); //子菜单元素数组
    for (var i = 0; i < divUl.length; i++) {
        //触摸事件
        divUlHover(divUl.eq(i));
        //点击事件
        divUlClick(divUl.eq(i));
    }
}

//子菜单触摸事件
function divUlHover(divUlThis) {
    divUlThis.hover(function() {
        $(this).css("background", "pink");
    }, function() {
        $(this).css("background", "#FFFFFF")
    })
}

//子菜单点击事件
function divUlClick(divUlThis) {
    divUlThis.click(function() {
        indexVal(divUlThis, 2);
    })
}

/* -----------功能模块处理函数集------------ */
//索引html文本逻辑处理
function indexVal(valThis, i) {
    switch (i) {
        case 1:
            indexText = valThis.html();
            break;
        case 2:
            var a = valThis.parents("li").children().eq(0).html();
            indexText = a + ">" + valThis.html();
            break;
    }
    $("#mIndex").html(indexText);
}

//ul点击切换list-style-type
function listClick(listThis) {
    var a = listThis.parents("li");
    if (a.css("list-style-type") == "disclosure-closed") {
        a.css("list-style-type", "disclosure-open");
    } else {
        a.css("list-style-type", "disclosure-closed");
    }
}

3、注册界面

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/d002.css">
		<script src="js/Jquery.js"></script>
		<script src="js/d002.js"></script>
		<!-- 时间选择模块 -->
		<link rel="stylesheet" type="text/css" href="css/My97DatePicker/skin/WdatePicker.css"/>
		<script type="text/javascript" src="css/My97DatePicker/WdatePicker.js"></script>
	</head>
	<body>
		<div class="main">
		        <div class="reg-title">
		            用 户 注 册
		        </div>
		        <div class="input-data">
		            <input type="text" required="" id="userName" name="userName" />
		            <div class="underlineN"></div>
		            <label>Name</label>
		        </div>
		        <div class="input-data">
		            <input type="text" required="" id="userPass" name="userPass" />
		            <div class="underlineP"></div>
		            <label>Password</label>
		        </div>
		        <div class="input-data">
		            <input type="text" required="" id="userRepeatPass" name="userRepeatPass" />
		            <div class="underlineP"></div>
		            <label>Password Repeat</label>
		        </div>
		        <div class="input-data">
		            <input type="text" required="" id="userPhone" name="userPhone"/>
		            <div class="underlineP"></div>
		            <label>Phone</label>
		        </div>
		        <div class="input-data">
		            <input type="text" required="" id="userEmail" name="userEmail"/>
		            <div class="underlineP"></div>
		            <label>Email</label>
		        </div>
		        <div class="email-yzm">
		            <input type="text" required="" id="yzm" name="yzm"/>
		            <input type="submit" id="btn-yzm" value="获取验证码" />
		        </div>
		        <div class="input-data">
		            <input list="source" type="text" required="" id="userSex" onfocus="blur()" name="userSex"/>
		            <datalist id="source">
		                <option>男</option>
		                <option>女</option>
		            </datalist>
		            <div class="underlineP"></div>
		            <label>Sex</label>
		        </div>
		        <div class="input-data">
		            <input class="Wdate" type="datetime"/>
		            <div class="underlineP"></div>
		            <label>Date of birth</label>
		        </div>
		        <div class="reg-btn">
		            <input class="btn-zc" type="submit" value="注册"></input>
		        </div>
		    </div>
	</body>
</html>

css代码 d002.css

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}


/* 设置自适应屏幕大小 */

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(-135deg, #50c8c2, #4158d0);
}


/* 标题设计 */

.reg-title {
    text-align: center;
    font-size: 20px;
    padding-bottom: 20px;
}


/* 输入框设计 */

.main {
    width: 450px;
    background-color: #fff;
    padding: 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}


/* 模块规格 */

.main .input-data,.email-yzm {
    width: 100%;
    height: 40px;
    margin: 10px;
    position: relative;
}

/* 二维码模块 */
.email-yzm{
    text-align: center;
    padding: 10px;
}

.email-yzm #yzm{
    height: 30px;
    width: 120px;
}

.email-yzm #btn-yzm{
    padding: 5px;
}


/* 输入框规格设计 */

.main .input-data input {
    width: 100%;
    height: 100%;
    border: none;
    border-bottom: 2px solid silver;
    font-size: 17px;
}


/* 动画效果 */

.input-data input:focus~label,
.input-data input:valid~label {
    transform: translateY(-20px);
    font-size: 15px;
    color: #4158D0;
}


/* 输入框文本提醒动画 */

.main .input-data label {
    position: absolute;
    bottom: 10px;
    left: 0;
    color: grey;
    pointer-events: none;
    transition: all 0.3s ease;
}


/* 动画设计 */

.main .input-data .underlineN {
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
}

.input-data .underlineN::before {
    background: #4158D0;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.input-data input:focus~.underlineN:before,
.input-data input:valid~.underlineN:before {
    transform: scaleX(1);
}

.main .input-data .underlineP {
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
}

.input-data .underlineP::before {
    background: #4158D0;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.input-data input:focus~.underlineP:before,
.input-data input:valid~.underlineP:before {
    transform: scaleX(1);
}


/* 按钮设计 */

.reg-btn {
    text-align: center;
}

.reg-btn input {
    background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
    border: none;
    color: #fff;
    font-family: 'Lato', sans-serif;
    border-radius: 10px;
    cursor: pointer;
    padding: 10px 30px;
    position: relative;
    top: 20px;
}


/* 按钮触摸和移出 */

.reg-btn input:hover {
    background: transparent;
    color: #76aef1;
}

.reg-btn input::before,
.reg-btn input::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3);
    transition: all 0.8s ease;
    padding: 0;
}

.reg-btn input::before {
    top: 0;
    right: 0;
}

.reg-btn input::after {
    bottom: 0;
    left: 0;
}

.reg-btn input:hover::before,
.reg-btn input:hover::after {
    height: 100%;
}

.reg-btn input span::before,
.reg-btn input span::after {
    position: absolute;
    content: '';
    width: 0px;
    box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3);
    transition: all 0.8s ease;
}

.reg-btn input span::before {
    top: 0;
    left: 0;
}

.reg-btninput span::after {
    bottom: 0;
    right: 0;
}

.reg-btn input span:hover::before,
.reg-btn input span:hover::after {
    width: 100%;
}

js代码 d002.js

//参数
var countdown = 60;
var code;

$(document).ready(main)

// 主函数
function main() {
    yzm();
    reg();
}

//发送验证码
function yzm() {
    $("#btn-yzm").click(function() {
        $.ajax({
            url: "http://localhost:8080/ecosystem_war_exploded/tool/sendMail",
            data: {
                userMail: $("input[name='userEmail']").val()
            },
            type: "post",
            dataType: "text",
            async: false,
            success: function(data) {
                if (data == 0) {
                    alert("邮箱格式错误!")
                } else {
                    code = data;
                }
            }
        })
        sendVerificationCode($("#btn-yzm"));
    })
}

//倒计时
function sendVerificationCode(obj) {
    if (countdown == 0) {
        obj.removeAttr("disabled");
        obj.val("重新获取");
        countdown = 60;
        return;
    } else {
        obj.attr('disabled', "disabled");
        obj.val("重新(" + countdown + ")");
        countdown--;
    }
    setTimeout(function() {
        sendVerificationCode(obj)
    }, 1000)
}

//注册
function reg() {
    $(".btn-zc").click(function() {
        var userName = $("#userName").val();
        var userPass = $("#userPass").val();
		var userRepeatPass = $("#userRepeatPass").val();
        var userPhone = $("#userPhone").val();
        var userEmail = $("#userEmail").val();
        var yzm = $("#yzm").val();
        var userSex = $("#userSex").val();
        var userDate = $("#userDate").val();
        if (userName.length < 8) {
            alert("用户名应控制在8~15个字符!");
        } else if(userName.length > 15){
            alert("用户名应控制在8~15个字符!");
        } else if (userPass.length < 8) {
            alert("密码应控制在8~15个字符!");
        } else if(userPass.length > 15){
            alert("密码应控制在8~15个字符!");
        } else if(userRepeatPass.length == 0){
			alert("请再次输入密码!")
		} else if(userRepeatPass != userPass){
			alert("两份密码不一致!")
		} else if (userPhone.length != 11) {
            alert("正常的大陆手机号码为十一位数!")
        } else if (!/^[0-9]*$/.test(userPhone)){
			alert("请输入正确的电话号码!")
		} else if (userEmail.length == 0) {
            alert("邮箱不能为空!")
        } else if (yzm != code) {
            alert("验证码错误!")
        } else if (userSex.length == 0) {
            alert("请选择性别!")
        } else if (userDate.length == 0) {
            alert("请选择出生日期!")
        } else {
            $.ajax({
                url: "http://localhost:8080/ecosystem_war_exploded/user/reg",
                data: {
                    user_name:userName,
                    user_pass:userPass,
                    user_phone:userPhone,
                    user_mail:userEmail,
                    user_sex:userSex,
                    user_date_birth:userDate
                },
                type: "post",
                dataType: "text",
                async: false,
                success: function(data) {
                    if (data == 0) {
                        alert("邮箱已被注册!")
                    } else if (data == 1) {
                        alert("注册成功!")
                        window.location.href = "http://localhost:8080/ecosystem_war_exploded/user/loginMain";
                    } else {
                        alert("注册失败!")
                    }
                }
            })
        }
    })
}