网页前端：考查大作业

sky-stars

已于 2024-08-27 20:30:02 修改

阅读量1.3k

点赞数 9

分类专栏：网页前端文章标签： html css html5 bootstrap

于 2021-11-25 17:03:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51917985/article/details/121463558

版权

文章目录

前言
具体操作
总结

前言

实验目的：
1：对网站开发有较全面的了解，掌握网页制作原理的基本理论知识和基本方法，能够分析网页制作过程中的问题，给出其解决方案并能分析方案的合理性；
2：掌握常用的网页开发技术，并能够运用于解决互联网网站开发领域的设计问题，通过综合利用这些技术能设计出符合需求的网页；
3：具有利用Photoshop和Webstorm等开发工具完成相关网页的设计与编程实现的能力。
实验内容：
按照下列要求完成大作业：
1.认真查看网页部分，整体网站分为2部分：登录页面和主页。
2.登录页面完成类似布局，单击登录操作打开网站主页。
3.登录后主页如图所示，整体布局按照要求完成；上边为log区域，左边为菜单区域，右边为操作区域；右上角为退出操作，退出后返回登录页面。
4.整体页面要求美观、大方、简洁，可以使用HTML+CSS+JAVASCRIPT完成，也可以使用自己熟悉的前端框架完成。

具体操作

代码引用了Bootstrap前端框架，关于它的下载与使用请参考以下文章
https://blog.youkuaiyun.com/qq_51917985/article/details/121519817

考查大作业-登录页面.css

body {
   
    background-size: cover;
    background-image: linear-gradient(100deg, #0F7BB1, dodgerblue);/*渐变角度100°*/
}

.first{
   
    border: 20px outset #2AA5E6;
    border-radius: 20px;
    background-color: #EFF8FD;
    width: 850px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    padding-top: 30px;
}

.second{
   
    border: 10px outset #46B1EA;
    border-radius: 20px;
    background-color: #46B1EA;
    width: 650px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}
.container{
   
    font-size: 20px;
}
.tex{
   
    float: left;
    padding-top: 3px;
}

.form-control{
   
    border-radius: 15px;
    float: left;
    width: 390px;
}

.form-group{
   
    padding-top: 15px;
    padding-bottom: 15px;
}

.error {
   
    float: right;
    padding-top: 5px;
    font-size: 20px;
}

.glyphicon-ok{
   
    color: green;
}

.glyphicon-remove{
   
    color: red;
}

考查大作业-登录页面.js

window.onload = function () {
   

    document.getElementById("form").onsubmit = function () {
   
        return checkUsername() && checkPassword() &&checkEmail() && checkTelephone();
    };
    document.getElementById("username").onblur = checkUsername;
    document.getElementById("password").onblur = checkPassword;
};

function checkUsername() {
   
    var username = document.getElementById("username").value;
    var reg_username = /^([a-zA-Z0-9_-])/;//字母数字下划线组成
    var flag = reg_username.test(username);
    var s_username = document.getElementById("s_username");
    if (flag) {
   
        s_username.innerHTML ="<span class='glyphicon glyphicon-ok' aria-hidden='true'></span>";
    } else {
   
        s_username.innerHTML = "<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>"
    }
    return flag;
}

function checkPassword(){
   
    var password = document.getElementById("password").value;
    var reg_password = /^\w{6,12}$/;//数字6-12位
    var flag = reg_password.test(password);
    var s_password = document.getElementById("s_password");

    if(flag){
   
        s_password.innerHTML = "<span class='glyphicon glyphicon-ok' aria-hidden='true'></span>";
    }else{
   
        s_password.innerHTML = "<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>"
    }
    return flag;
}

考查大作业-登录页面.html，代码中使用到了jQuery库，关于它的下载与介绍请参考以下文章
https://blog.youkuaiyun.com/qq_51917985/article/details/121462896

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>登录页面</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <!--4. 导入自定义的css样式-->
    <link rel="stylesheet" href="../css/考查大作业-登录页面.css">
</head>
<body>
<div class="first">
    <div class="second">
        <div class="container" style="width: 500px;">
            <h3 style="text-align: center;">管理员登录</h3>
            <form action="考查大作业-主页面.html" method="post" id="form">
                <div class="form-group">
                    <label for="username" class="tex">账户：</label>
                    <input type="text" name="username" class="form-control" id="username" placeholder="请输入账户"/>
                    <span id="s_username" class="error"></span>
                </div>

                <div class="form-group">
                    <label for="password" class="tex">密码：</label>
                    <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
                    <span id="s_password" class="error"></span>
                </div>

                <div class="form-group">
                    <label for="vcode" class="tex">验证码：</label>
                    <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码"
                           style="width: 120px;"/>
                    <img src="../image/checkCode.jpg" title="看不清点击刷新" id="vcode" width="80px" height="35px">
                </div>
                <hr>
                <div class="form-group" style="text-align: center;">
                    <input class="btn btn btn-primary" type="submit"