文章目录

1.实验内容
2.页面效果
- 2.1 登录
- 2.2 注册
- 2.3 修改密码
- 2.4 主页面
3.源代码
- 3.1 代码目录
- - 1.html
  - 2.html
  - 3.html
  - 4.html
  - new.html
  - 1.css
  - color.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

<!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{undefinedalert('用户名或密码错误');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;}elsealert('注册成功');}
};
</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;}elsealert('修改成功');}
};
</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;
}
};

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

WEB前端大作业HTML静态网页设计旅游景点区主题——三亚旅游网页设计
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
html+jsp 简单静态网页设计
实验一简单静态网页设计一.实验目的 1. 复习使用记事本编辑网页的方法. 2. 熟悉不同表单控件类型的应用. 3. 练习使用记事本在网页中添加表单与表单元素. 二.实验内容根据提供 ...
HTML期末大作业学生DW静态网页设计动画漫展学习资料电影模板(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源
HTML5期末大作业`动画漫影视网站设计--动画漫展学习资料电影模板(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wHTML期末大作业学生DW静态网页设计 html大作 ...
div+css静态网页设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:电影网站设计--迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游 ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
什么叫动态网页？什么叫静态网页设计？
什么叫动态网页?什么叫静态网页设计? 所谓静态网页就是说网页文件中没有程序,只有HTML代码,一般以.html或.htm为后缀名的网页,静态网站内容不会在制作完成后发生变化,任何人访问都显示一样的内容 ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
期末作业成品代码——红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:婚庆网站设计--红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
静态网页设计课程设计-周杰伦网站包含源码以及文档，可直接使用
本网站是静态网页设计,网站设计是周杰伦网站,本人是周杰伦粉丝,所以完成的是一个周杰伦专辑和电影介绍的作品. 源码地址如下: 详细资源含网页内容源码地址静态网页设计-周杰伦网站-可用于大学课程设计和实验 ...
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript
web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

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