投稿
  1. 首页
  2. html-js-css

【Web技术】（实验一）HTML静态网页设计

智能巡更系统 • 2022-6-10 • html-js-css • 阅读 75

【Web技术】（实验一）HTML静态网页设计,第1张

文章目录 1.实验内容2.页面效果2.1 登录2.2 注册2.3 修改密码2.4 主页面 3.源代码3.1 代码目录1.html2.html3.html4.htmlnew.html1.csscolor.js

1.实验内容

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

2.页面效果 2.1 登录

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

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

2.2 注册

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

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

2.3 修改密码

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

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

2.4 主页面

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

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

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

3.源代码 3.1 代码目录

1.html 



   
   登录界面
   
   




   
      
         登录
      

      
         
            

            

            
         

         
            or
         
         或选择手动登录
2.html 



    
    注册界面
    
    




    注册
3.html 



    
    修改密码
    
    
    




    修改密码
4.html 



    
    管理系统
    
    




    
        WEB技术课程演示系统
    

    
            
            

            

            
            

            

            
    

    
        
            欢迎使用本系统
        
                    
            

                

                    
                         用户信息管理 
                         
                         
                    
                

                

                    
                    学生姓名
                    学生密码
                    学生邮箱
                    学生生日
                    学生余额
                     *** 作
                

                

                    1 
                    李四
                    *****
                    zhangsan@qq.com
                    2000-01-10
                    10
                    
                        
                            
                    
                

                

                    2
                    张三
                    ***
                    xx@qq.com
                    1999-10-20
                    3
                    
                        
                            
                    
                
             

                

                    3
                    李四
                    ***
                    7@qq.com
                    2002-01-15
                    9
                    
                        
                            
                    
                

                

                    4
                    李四
                    ******
                    hua@qq.com
                    2000-09-09
                    100
                    
                        
                            
                    
                


            

        
    
    
        
WEB@2022
new.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("http://www.kaotop.com/file/tupian/20220523/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("http://www.kaotop.com/file/tupian/20220523/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("http://www.kaotop.com/file/tupian/20220523/Oq8xFs.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}

.img_3{
    background-image:url("http://www.kaotop.com/file/tupian/20220523/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;
}
};

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1295559.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
智能巡更系统 智能巡更系统 一级用户组
0 0
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表（0条）

保存