前言
实验目的：
1：对网站开发有较全面的了解，掌握网页制作原理的基本理论知识和基本方法，能够分析网页制作过程中的问题，给出其解决方案并能分析方案的合理性；
2：掌握常用的网页开发技术，并能够运用于解决互联网网站开发领域的设计问题，通过综合利用这些技术能设计出符合需求的网页；
3：具有利用Photoshop和Webstorm等开发工具完成相关网页的设计与编程实现的能力。
实验内容：
按照下列要求完成大作业：
1.认真查看网页部分，整体网站分为2部分：登录页面和主页。
2.登录页面完成类似布局，单击登录操作打开网站主页。
3.登录后主页如图所示，整体布局按照要求完成；上边为log区域，左边为菜单区域，右边为操作区域；右上角为退出操作，退出后返回登录页面。
4.整体页面要求美观、大方、简洁，可以使用HTML+CSS+JAVASCRIPT完成，也可以使用自己熟悉的前端框架完成。
具体操作
代码引用了Bootstrap前端框架，关于它的下载与使用请参考以下文章
https://blog.csdn.net/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.csdn.net/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" value="登录">
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../js/考查大作业-登录页面.js"></script>
</html>
界面效果
考查大作业-主页面.css
td, th {
text-align: center;
border: 1px solid black;
}
body {
background-size: cover;
background-color: lightskyblue;
}
table {
border: 2px solid black;
margin: auto;
border-collapse: collapse;
}
.img1 {
margin-left: 1%;
width: 10%;
float: left;
}
.butt{
float: right;
margin-top: 4%;
margin-right: 9%;
}
.a1 {
float: left;
text-align: center;
width: 31.1%;
margin-top: 4%;
margin-left: 22%;
border: 2px solid black;
}
.aa{
width: 100%;
float: left;
}
.a2 {
text-align: center;
width: 6%;
margin-left: 3%;
float: left;
margin-top: 3%;
border: 2px solid black;
}
.center {
text-align: center;
float: left;
margin-left: 5%;
margin-top: 2%;
width: 70%;
}
.fir{
zoom: 150%;
}
.inpu {
border-radius: 30px;
}
.a3{
float: left;
margin-right: 5px;
margin-left: 15%;
}
.a4{
float: left;
}
考查大作业-主页面.js
/*使用jQuery进行编写*/
$(document).ready(function () {
$("#delSelected").click(function () {/*为btn1绑定单击事件*/
var value;
confirm("您确定要删除选中条目吗？");
//遍历每一个class为fir的复选框，其中选中的执行函数
$('input[name="uid"]:checked').each(function () {
$(this).parent().parent().remove();
});
});
});
//1.在页面加载完后绑定事件
window.onload = function () {
//2.给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function () {
//全选
//1.获取所有的checkbox
var firstCd = document.getElementById("firstCb");
firstCd.checked = true;
var uids = document.getElementsByName("uid");
//2.遍历
for (var i = 0; i < uids.length; i++) {
//3.设置每一个uid的状态为选中 checked
uids[i].checked = true;
}
};
document.getElementById("unSelectAll").onclick = function () {
//全不选
//1.获取所有的checkbox
var firstCd = document.getElementById("firstCb");
firstCd.checked = false;
var cbs = document.getElementsByName("uid");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为未选中 checked
cbs[i].checked = false;
}
};
document.getElementById("selectRev").onclick = function () {
//反选
//1.获取所有的checkbox
var firstCd = document.getElementById("firstCb");
firstCd.checked = !firstCd.checked;
var cbs = document.getElementsByName("uid");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为相反
cbs[i].checked = !cbs[i].checked;
}
};
document.getElementById("firstCb").onclick = function () {
//点击第一个cb,全选
//1.获取所有的checkbox
var firstCd = document.getElementById("firstCb");
var cbs = document.getElementsByName("uid");
//获取第一个cb
/*this*/
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态和第一个cb的状态一样
cbs[i].checked = firstCd.checked;
}
};
};
//使用innerHTML添加
document.getElementById("btn_add").onclick = function () {
//获取文本框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
if (id != "" && name != "" && gender != "") {
//获取table
var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += "<tr>\n" +
" <td><input name='uid' type='checkbox'></td>" +
" <td>" + id + "</td>\n" +
" <td>" + name + "</td>\n" +
" <td>" + gender + "</td>\n" +
" <td><a href=\"javascript: void(0);\" οnclick=\"delete delTr(this);\">删除</a></td>\n" +
" </tr>";
} else {
alert("输入不能为空！");
}
};
//删除方法
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
考查大作业-主页面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="aa">
<div class="img1">
<a href="考查大作业-登录页面.html"><img src="../image/STARS.png" alt="logo" width="150px" height="150px"></a>
</div>
<div class="butt">
<a href="考查大作业-登录页面.html">
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</button>
</a>
</div>
<div class="a1">
<ul class="nav nav-tabs">
<li><a href="#Home">我的面板</a></li>
<li><a href="#Home">设置</a></li>
<li><a href="#Home">模块</a></li>
<li><a href="#Home">内容</a></li>
<li><a href="#Home">用户</a></li>
<li><a href="#Home">扩展</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="a2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
应用<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
<li><a href="#Home">尽请期待</a></li>
</ul>
</li>
</ul>
</div>
<div class="center">
<div class="a3">
<input id="id" placeholder="请输入编号" type="text" class="inpu">
<input id="name" placeholder="请输入姓名" type="text" class="inpu">
<input id="gender" placeholder="请输入性别" type="text" class="inpu">
<input id="btn_add" type="button" value="添加" class="btn btn-primary">
</div>
<div class="a4">
<input id="selectAll" type="button" value="全选" class="btn btn-primary">
<input id="unSelectAll" type="button" value="全不选" class="btn btn-primary">
<input id="selectRev" type="button" value="反选" class="btn btn-primary">
<input id="delSelected" type="button" value="删除选中" class="btn btn-primary">
</div>
<form action="#" id="form">
<table class="table table-bordered table-hover">
<tr class="success">
<th><input id="firstCb" type="checkbox"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr class="b">
<td><input name="uid" type="checkbox"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript: void(0);" onclick="delete delTr(this);">删除</a></td>
</tr>
<tr class="b">
<td><input name="uid" type="checkbox"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript: void(0);" onclick="delete delTr(this);">删除</a></td>
</tr>
<tr class="b">
<td><input name="uid" type="checkbox"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript: void(0);" onclick="delete delTr(this);">删除</a></td>
</tr>
<tr class="b">
<td><input name="uid" type="checkbox"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript: void(0);" onclick="delete delTr(this);">删除</a></td>
</tr>
<tr class="b">
<td><input name="uid" type="checkbox"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript: void(0);" onclick="delete delTr(this);">删除</a></td>
</tr>
<tr class="b">
<td><input name="uid" type="checkbox"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript: void(0);" onclick="delete delTr(this);">删除</a></td>
</tr>
<tr class="b">
<td><input name="uid" type="checkbox"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript: void(0);" onclick="delete delTr(this);">删除</a></td>
</tr>
<tr class="b">
<td><input name="uid" type="checkbox"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript: void(0);" onclick="delete delTr(this);">删除</a></td>
</tr>
</table>
</form>
</div>
</body>
<script type="text/javascript" src="../js/考查大作业-主页面.js"></script>
</html>
界面效果
目录结构
总结
1：对网站开发有较全面的了解，掌握网页制作原理的基本理论知识和基本方法，能够分析网页制作过程中的问题，给出其解决方案并能分析方案的合理性；
2：掌握常用的网页开发技术，并能够运用于解决互联网网站开发领域的设计问题，通过综合利用这些技术能设计出符合需求的网页；
3：具有利用Photoshop和Webstorm等开发工具完成相关网页的设计与编程实现的能力。
扫一扫
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
