文章目录

1.实验内容

综合应用 HTML，CSS 和 JavaScript 技术设计基本信息系统所包括的一组页面，包括登陆，注册，忘记密码，主页，信息页面等，所有的页面需要实现响应式布局，其中的链接，按钮需要可以点击，形成一个完整的系统。
（1） 登陆页面
要求：能够根据界面的大小自适应布局，当屏幕尺寸大于等于 650px 与当屏幕尺寸小于等于 650px 时显示效果应该有所区别。
（2） 注册页面和忘记密码页面
要求：能够根据界面的大小自适应，屏幕尺寸小于等于 650px 时，显示效果显示自适应大小。
①注册的时候，需要对电子邮箱和出生年月进行验证，用户名和密码也不能为空；
②修改密码的时候，需要对新密码和确认密码进行验证，两者必须一致才能提交。
（3） 主页面
要求：能够根据界面的大小自适应，屏幕尺寸大于等于 800px 仅显示菜单和具体内容；而当屏幕尺寸小于 800px 时不显示菜单，仅显示具体内容。
（4） 背景风格变换
要求：在菜单处增加两个背景风格菜单（颜色方案可自行设计），点击“橘黄”菜单显示橘黄风格，点击“深蓝”菜单显示深蓝风格。
提示：利用 JavaCript 语言动态加载不同的背景风格。
（5） 用户界面
要求：在菜单处增加一个“用户管理”菜单，点击该菜单，进入到用户管理页面，具体风格为呈现列表形式。

2.页面效果

2.1 登录

阿斯顿法国红酒

图1.登陆页面&&屏幕尺寸大于等于 650px 时

登陆页面&&屏幕尺寸小于等于 650px 时
图2.登陆页面&&屏幕尺寸小于等于 650px 时

2.2 注册

注册页面&&屏幕尺寸大于等于 650px 时

图3.注册页面&&屏幕尺寸大于等于 650px 时

注册页面&&屏幕尺寸小于等于 650px 时
图4.注册页面&&屏幕尺寸小于等于 650px 时

2.3 修改密码

修改密码页面&&屏幕尺寸大于等于 650px 时

图5.修改密码页面&&屏幕尺寸大于等于 650px 时

阿斯顿
图6.修改密码页面&&屏幕尺寸小于等于 650px 时

2.4 主页面

主页面&&屏幕尺寸大于等于 800px 时

图7.主页面&&屏幕尺寸大于等于 800px 时

主页面&&屏幕尺寸小于等于 800px 时
图8.主页面&&屏幕尺寸小于等于 800px 时

主页面&&尺寸大于800px 时&&用户管理栏&&橘黄风格
图9.主页面&&尺寸大于800px 时&&用户管理栏&&橘黄风格

3.源代码

3.1 代码目录

1.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <title>登录界面</title>
   <link rel="stylesheet" type="text/css" href="1.css">
   <link rel="stylesheet" href="http://at.alicdn.com/t/font_3309477_lwxq0b0b3qo.css">
</head>

<body>
<div class="img_1">
   <div class="screen">
      <div class="title">
         <h1>登录</h1>
      </div>

      <div class="login_1">
         <div class="login_2">
            <a href="new.html"><button class="QQ"><use class="iconfont icon-QQ" style="color:black;"></use>QQ 登录</button></a></br>
            <a href="new.html"><button class="WX"><use class="iconfont icon-weixin"></use>微信登录</button></a></br>
            <a href="new.html"><button class="ZFB"><use class="iconfont icon-zhifubaorenzheng" style="color: blue;"></use>支付宝登录</button></a>
         </div>

         <div class="line">
            <div>or</div>
         </div>
         <div class="or">或选择手动登录</div>

         <div>
            <div class="login_3">
               <input id="1" class="user" type="text" name="username" placeholder="用户名" required lay-verify="required" /></br>
               <input id="2" class="pwd" type="password" name="password" placeholder="密码" requiredlay-verify="required" /></br>
               <button class="btn-1" onclick="myFunction()">登录</button>
            </div>
         </div>
      </div>
      <div class="login_4">
         <a href="2.html"><input class="sub" type="submit" value="注册" /></a>
         <a href="3.html"><input class="sub" type="submit" value="忘记密码?" /></a>
      </div>
   </div>
</div>
      <script>
         function myFunction() {
            var username = document.getElementById('1').value;
            var password = document.getElementById('2').value;
            if (username == "123" && password == "123") {
               alert("登录成功");
               window.location.href = "4.html";
            } else if(username == ""||password == ""){
               alert("用户名或密码不能为空");
               return false;
            }
            else{undefined
               alert('用户名或密码错误');
               return false;
            }
         }
      </script>
</body>

</html>

2.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" type="text/css" href="1.css">
    <script type="text/javascript" src="color.js"></script>
</head>
<body>
<div class="img_2">
<div class="title">
    <h1>注册</h1>
</div>
<form action="1.html" method="post">
    <div class="mainbody">
        <input class="user" type="text" name="username" placeholder="用户名" required lay-verify="required"/></br>
        <input class="pwd" type="password" name="password" placeholder="密码" required lay-verify="required"/></br>
        <input class="e" type="text" name="e-mail" placeholder="电子邮箱" required lay-verify="required"/></br>
        <input class="date" type="date"/></br>
        <button class="register" id="register">注册</button>
    </div>
</form>
<div class="return">
    <button class="btn"><a href="1.html">返回登录界面</a></button>
</div>

</div>
<script>
window.onload=function(){
    var inputs = document.querySelectorAll('.mainbody input');
    var btn1 =document.getElementById('register');

    btn1.onclick = function(){
        var username = inputs[0].value;
        var password = inputs[1].value;
        var email = inputs[2].value;
        if(username == '' || password == '' ){
            alert('用户名和密码不能为空');
            return false;
        }
        var pattern = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        if( !pattern.test(email)){
            alert('请输入正确的邮箱');
            return false;
        }
        else
        alert('注册成功');
    }
};
</script>

</body>
</html>

3.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" type="text/css" href="1.css">
    <script type="text/javascript" src="color.js"></script>
    
</head>
<body>
<div class="img_3">
<div class="title">
    <h1>修改密码</h1>
</div>

<form action="1.html" method="post">
    <div class="mainbody">
        <input class="user" type="text" name="username" placeholder="用户名" required lay-verify="required"/></br>
        <input class="pwd" type="password" name="password" placeholder="密码" required lay-verify="required"/></br>
        <input class="pwd" type="password" name="password" placeholder="确认密码" required lay-verify="required"/></br>
        <button class="register" id="confirm">确认</button>
    </div>
</form>
<div class="return">
    <button class="btn"><a href="1.html">返回登录界面</a></button>
</div>
</div>
<script>
window.onload=function(){
    var inputs = document.querySelectorAll('.mainbody input');
    var btn2 =document.getElementById('confirm');
    btn2.onclick = function(){
        var username = inputs[0].value;
        var password1 = inputs[1].value;
        var password2 = inputs[2].value;
        if(username == '' || password1 == '' || password2 == ''){
            alert('用户名和密码不能为空');
            return false;
        }
        if( password1 != password2){
            alert('请使两次密码保持一致');
            return false;
        }
        else
        alert('修改成功');
    }
};
</script>
</body>
</html>

4.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <link rel="stylesheet" type="text/css" href="1.css">
    <script type="text/javascript" src="color.js"></script>
</head>
<body>

<div class="manage">
    <div class="manage_1">
        <h1 href="" class="icon" ><img src="https://s1.ax1x.com/2022/04/03/qTZ9u4.png" height="22"/>WEB技术课程演示系统</h1>
    </div>

    <div class="left">
            <button class="btn1">首页</button>
            <hr/>
            <input type="submit" id="theme1" value="深蓝色" class="btn2"/></br>
            <input type="submit" id="theme2" value="橘黄色" class="btn3"/>
            <hr/>
            <button class="btn4">用户管理</button></br>
            <a href="1.html"><button class="btn5">退出</button></a>
    </div>

    <div class="right">
        <div class="right1">
            <h2>欢迎使用本系统</h2>
        </div>
        <div class="right2">            
            <table border="1" cellspacing = 0 cellpadding="0">
                <tr>
                    <th colspan="7" class="t-head">
                         <h2>用户信息管理</h2> 
                         <button style="position:relative;float:right;margin-right: 80px;">搜索</button>
                         <input type="text" placeholder="请输入学生姓名" style="float:right;"/>
                    </th>
                </tr>
                <tr>
                    <th></th>
                    <th>学生姓名</th>
                    <th>学生密码</th>
                    <th>学生邮箱</th>
                    <th>学生生日</th>
                    <th>学生余额</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>1 </td>
                    <td>李四</td>
                    <td>*****</td>
                    <td>zhangsan@qq.com</td>
                    <td>2000-01-10</td>
                    <td>10</td>
                    <td class="t-tail">
                        <button class="btn-edit">编辑</button>
                            <button class="btn-delete">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>张三</td>
                    <td>***</td>
                    <td>xx@qq.com</td>
                    <td>1999-10-20</td>
                    <td>3</td>
                    <td class="t-tail">
                        <button class="btn-edit">编辑</button>
                            <button class="btn-delete">删除</button>
                    </td>
                </tr>             

                <tr>
                    <td>3</td>
                    <td>李四</td>
                    <td>***</td>
                    <td>7@qq.com</td>
                    <td>2002-01-15</td>
                    <td>9</td>
                    <td class="t-tail">
                        <button class="btn-edit">编辑</button>
                            <button class="btn-delete">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>李四</td>
                    <td>******</td>
                    <td>hua@qq.com</td>
                    <td>2000-09-09</td>
                    <td>100</td>
                    <td class="t-tail">
                        <button class="btn-edit">编辑</button>
                            <button class="btn-delete">删除</button>
                    </td>
                </tr>

            </table>
        </div>
    </div>
    <div class="manage_2">
        <p>WEB@2022</p>
    </div>
</div>

</body>
</html>

new.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部账号登录</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div class="img_new">
    <div class="login-re">
        <h3>账号登录</h3>
        <div class="login-top"> 
            <form>
                <input type="text" placeholder="请输入账号" required lay-verify="required">
                 &emsp;&emsp;&emsp;&emsp;
                <input type="password" placeholder="请输入密码" required lay-verify="required">
                </br>
                </br>
                <div class="checkbox">&emsp;&emsp;&emsp;
                <input type="checkbox" checked>下次自动登录
                 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                <span><a href="https://www.bytedance.com" style="color:green">找回密码?</a></span>
                </div>
                <a href="4.html"><input type="submit" value="登录" style="width:85%" onclick="alert('抱歉！功能尚在开发中，请耐心等待')"></a>
                <div style="margin-left: 35px;"><span>登录即代表您 已阅读并同意<a style="color: rgb(77, 52, 19);">《服务协议条款》</a></span></div>   
            </form> 
            <button><a href="1.html">返回登录界面</a></button>   
        </div>
    </div> 
</div>           
</body>
</html>

1.css

* {
    margin: 0;
    padding: 0
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: lightgray;
    overflow-y: hidden;
}

a {
    text-decoration: none;
    color: white;
}

.screen {
    height: 100%;
    width: 100%;
}

.img_1{
    background-image:url("https://s1.ax1x.com/2022/05/19/OqcC5t.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}

.title {
    position: absolute;
    top: 90px;
    width: 100%;
    text-align: center;
}

.login_1 {
    height: 140px;
    width: 100%;
    clear: both;
    margin-top: 160px;
}

.login_2 {
    float: left;
    width: 40%;
    text-align: center;
    margin-left: 120px;
}

.QQ {
    width: 260px;
    color: white;
    background-color: dodgerblue;
    border: none;
    height: 40px;
    border-radius: 5px;
}

.WX {
    width: 260px;
    color: white;
    background-color: lightgreen;
    margin-top: 10px;
    border: none;
    height: 40px;
    border-radius: 5px;
}

.ZFB {
    width: 260px;
    background-color: darkgray;
    margin-top: 10px;
    border: none;
    height: 40px;
    border-radius: 5px;
}

.line {
    height: 160px;
    float: left;
    border-left: 5px solid lightslategray;
    margin-left: 25px;
}

.line div {
    border: 3px solid darkgray;
    color: darkgray;
    border-radius: 100%;
    text-align: center;
    margin-left: -16px;
    margin-top: 65px;
    width: 20px;
    background-color: lightgray;
}

.or {
    float: left;
    margin-left: 185px;
    margin-bottom: 20px;
}

.login_3 {
    width: 40%;
    text-align: center;
    float: left;
    margin-left: 120px;
}

.user {
    margin-top: auto;
    border: none;
    border-radius: 5px;
    height: 35px;
    width: 260px;
}

.pwd,
.e,
.date {
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    height: 35px;
    width: 260px;
}

.btn-1 {
    width: 260px;
    height: 35px;
    margin-top: 15px;
    background-color: green;
    color: white;
    border-radius: 5px;
    border: none;
}

.login_4 {
    color: white;
    width: 100%;
    height: 40px;
    text-align: center;
     margin-top: 310px; 

}

.sub {
    background-color: gray;
    color: white;
    height: 100%;
    border: none;
    float: left;
    justify-content: center;
}


.img_new{
    background-image:url("https://s1.ax1x.com/2022/05/20/OOJp4J.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}

.login-re {
    width: 480px;
    height: 400px;
    margin: 200px auto;
    position: relative;
    background-color: rgba(76, 72, 72, 0.148);
}

.login-top {
    width: 480px;
    height: 400px;
    margin: 10px auto;
    position: relative;
    padding-left: 40px;
    border-radius: 5px;
}

.login-re h3 {
    line-height: 110px;
    color: black;
    text-align: center;
}

.checkbox {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}

.login-top button {
    background-color: darkslategray;
    width: 25%;
    margin-top: 40px;
    margin-left: 130px;
    border-radius: 5px;
}


.img_2{
    background-image:url("https://s1.ax1x.com/2022/05/19/Oq8xFs.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}

.img_3{
    background-image:url("https://s1.ax1x.com/2022/05/20/OO3VHg.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}

.mainbody {
    position: absolute;
    top: 40%;
    width: 100%;
    text-align: center;
}

.register {
    width: 260px;
    background-color: lightgreen;
    color: white;
    margin-top: 20px;
    border: none;
    border-radius: 5px;
    height: 35px;
}

.return {
    position: absolute;
    bottom: 15%;
    width: 100%;
    height: 40px;
}

.btn {
    background-color: dimgray;
    color: white;
    width: 100%;
    height: 100%;
    border: none;
}

hr {
    border: 1px dashed white
}

.manage {
    width: 100%;
    height: 100%;
}

.manage_1 {
    width: 100%;
    background-color: dodgerblue;
    color: white;
    text-align: center;
}

.left {
    background-color: blue;
    color: white;
    width: 10%;
    height: 100%;
    float: left;
}

.btn1,
.btn2,
.btn3,
.btn4,
.btn5 {
    color: white;
    background-color: blue;
    width: 100%;
    border: none;
    text-align: left;
}

.right {
    background-color: white;
    color: blue;
    height: 100%;
    text-align: center;
    position: relative;
    width: 90%;
    float: left;
}

.manage_2 {
    background-color: dodgerblue;
    color: white;
    height: 25px;
    width: 100%;
    position: fixed;
    bottom: 0;
    text-align: center;
}

.t-head {
    color: dimgray;
    height: 50px;
}

.btn-edit {
    background-color: red;
    color: white;
}

.btn-delete {
    background-color: green;
    color: white;
}

div table {
    position: relative;
    margin-top: 60px;
    margin-left: 90px;
    border: 1px solid lightgrey;
    color: black;
    font-size: small;
}

div table th {
    width: 115px;
    overflow: hidden;
    height: 30px;
}

@media screen and (max-width:800px) {
    .left { display: none;}
    .right {width: 100%;}
}

@media screen and (max-width: 650px) {
    .line { visibility: hidden;}
    .sub {width: 100%;}
}
@media screen and (min-width: 650px) {
    .or {display: none;}
    .sub {width: 50%;}
}

color.js

window.onload=function(){
    var head = document.querySelector('.manage_1');
    var left = document.querySelector('.left');
    var bottom = document.querySelector('.manage_2')
    var lanse=document.getElementById('theme1');
    var chengse=document.getElementById('theme2');
    var button = document.querySelectorAll('.left button');
    var right1 = document.querySelector('.right1');
    var right2 = document.querySelector('.right2');
    right1.style.display = 'block';right2.style.display = 'none';
    button[0].onclick = function(){
        right1.style.display = 'block';right2.style.display = 'none';
    }
    button[1].onclick = function(){
        right1.style.display = 'none';right2.style.display = 'block';
    }
    lanse.onclick = function(){
        changeColor('blue','dodgerblue');
}
    chengse.onclick = function(){
        changeColor('orange','brown');
}
    function changeColor(color,color2){
        head.style.backgroundColor = color2;
        bottom.style.backgroundColor = color2;
        left.style.backgroundColor = color;
        button[0].style.backgroundColor=color;
        lanse.style.backgroundColor=color;
        chengse.style.backgroundColor=color;
        button[1].style.backgroundColor=color;
        button[2].style.backgroundColor=color;
}
};
# 前端 # html # javascript # css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

Python文本统计与分析：从基础到进阶

avatar 华为云开发者联盟
cover

教你用Perl实现Smgp协议

avatar 华为云开发者联盟