一、实验项目要求
实验目的
- 掌握常用的HTML标签,如表格、表单、层、列表等;
- 掌握页面布局方式,如盒式布局、弹性盒子布局等;
- 掌握常用的CSS选择器,如类选择器、id选择器、子元素选择器、后代选择器、过滤选择器、伪元素选择器等;
- 掌握常用的CSS样式属性,如盒式布局相关属性、弹性盒子布局相关属性、位置相关属性。
实验题目
创建HTML文件,使用HTML标签及CSS样式表实现如下图所示页面。
二、理论分析或算法分析
实验步骤
- 创建index.html页面,编写实现左侧菜单列表,右侧上方系统名称及相关按钮,右侧下方学生信息列表通过iframe页面引入list.html实现;
- 创建list.html页面实现学生信息卡片列表页面;
- 编写index.css文件在index.html中引入用来设置index.html页面中相关元素的样式;
- 编写list.css文件在list.html中引入用来设置list.html页面中相关元素的样式;
三、实验方法
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css" />
<title></title>
</head>
<!-- 左侧为菜单menu,右侧为主体body -->
<body>
<!-- 左侧菜单,上方为显示logo的区域,下方为菜单列表 -->
<div id="menu-div">
<!-- logo区域 -->
<div class="logo-div">
<img src="1.png" width="100px" height="100px" style="border-radius: 200px;" />
<span>小孙</span>
</div>
<!-- 菜单列表div,所有菜单包含在一个ul中 -->
<div class="menu-ul-div">
<!-- 其中的一个li对应一个一级菜单,若包含二级菜单其中再包含ul -->
<ul class="first-menu-ul">
<!-- li中包含active类表示其为活动菜单 -->
<li class="first-menu-li acitve">信息管理^
<ul>
<li>学生信息管理</li>
<li>班级信息管理</li>
<li>宿舍信息管理</li>
</ul>
</li>
<li class="first-menu-li">事务管理</li>
<li class="first-menu-li">个人设置</li>
</ul>
</div>
</div>
<!-- 左侧主体,上方为top-div,显示系统名称、退出按钮等;下方为main-div,通过iframe显示菜单对应的页面 -->
<div id="body-div">
<div id="top-div">
<!-- 系统标题 -->
<span class="title-span">学生信息管理系统</span>
<!-- 右侧按钮 -->
<div id="xixi">
<div id="message-list-div">
<ul>
<li>张三 2021-05-11 10:25:30</li>
<li>张三峰 2021-05-08 14:55:38</li>
<li>李思文 2021-05-01 08:00:18</li>
</ul>
</div>
<button id="message-btn" type="button" class="top-btn">
站内信
<span style="background-color: #AACCFF;">3</span>
</button>
<!-- 退出按钮 -->
<button id="logout-btn" type="button" class="top-btn">退出</button>
</div>
</div>
<div id="main-div">
<iframe src="list.html"></iframe>
</div>
</div>
<div></div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
index.css
#menu-div{
background-color: #2299ff;
width: 20%;
height: 1600px;
float: left;
}
#body-div{
width: 80%;
float: left;
}
#message-btn{
border-radius: 20px;
font-size: 20px;
padding-top: 10px;
color: #AAAAAA;
}
#logout-btn{
border-radius: 20px;
font-size: 20px;
margin-top: 10px;
}
#xixi{
float: right;
}
#top-div{
background-color: #AAEE33;
float: left;
width: 100%;
}
iframe{
width: 100%;
height: 740px;
}
.title-span{
font-size: 40px;
float: left;
color: blue;
margin-top: 75px;
margin-left: 75px;
}
#menu-div > div.logo-div > span{
margin-top: 30px;
margin-right: 65px;
float: right;
background-color: #AACCFF;
border-radius: 20px;
font-size: 20px;
}
img{
width: 70px;
height: 70px;
margin-left: 70px;
}
.menu-ul-div ul{
list-style-type: none;
}
.menu-ul-div>ul>li{
position: relative;
margin-right: 30px;
}
.menu-ul-div>ul>li:hover{
border-bottom: 3px solid green;
background-color: white;
}
.menu-ul-div>ul>li>ul{
display: none;
position: absolute;
}
.menu-ul-div>ul>li>ul>li{
font-size: 20px;
text-decoration: none;
color: green;
display: block;
width: 120px;
line-height: 30px;
}
.menu-ul-div>ul>li>ul>li:hover{
color: black;
}
.menu-ul-div>ul>li:hover>ul{
display: block;
position: relative;
}
li{
margin-bottom: 10px;
font-size: 30px;
color: white;
}
#message-list-div{
background-color: #0000FF;
float: left;
font-size: 15px;
}
#message-list-div > ul>li{
list-style-type: none;
}
.top-btn{
float: left;
margin-top: 75px;
}
#logout-btn{
margin-top: 75px;
}
List.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息列表</title>
<link rel="stylesheet" type="text/css" href="list.css" />
</head>
<body>
<div class=" main-div">
<div class="head-div">
<div id="right-search">
<input type="text" class="textt" />
<button type="button" class="seacher" id="seach-btn">搜索</button>
</div>
<div id="left-search">
<button type="button" class="sucess" id="add-btn">新增</button>
<button type="button" class="danger" id="del-btn">删除</button>
<button type="button" class="waring" id="modify-btn">修改</button>
</div>
</div>
<div class="body-div">
<ul id="msgList-ul">
<li class="female">
<div class="img-div">
<img class="img" src="4.png" />
</div>
<div class="msg-span-div">
<span class="num-span">182056101</span>
<span>
<span class="name-span">张伞</span>
<span class="sex-span">女</span>
</span>
<span class="depart-span">计算机工程系</span>
<span class="like-span">
<span>读书</span>
<span>运动</span>
</span>
</div>
</li>
<li class="male">
<div class="img-div">
<img class="img" src="3.png">
</div>
<div class="msg-span-div">
<span class="num-span">182056102</span>
<span>
<span class="name-span">李斯</span>
<span class="sex-span">男</span>
</span>
<span class="depart-span">电子工程系</span>
<span class="like-span">
<span>读书</span>
<span>音乐</span>
<span>学习</span>
</span>
</div>
</li>
<li class="male">
<div class="img-div">
<img class="img" src="1.png">
</div>
<div class="msg-span-div">
<span class="num-span">172056103</span>
<span>
<span class="name-span">王武</span>
<span class="sex-span">男</span>
</span>
<span class="depart-span">计算机工程系</span>
<span class="like-span">
<span>读书</span>
<span>运动</span>
<span>音乐</span>
</span>
</div>
</li>
<li class="female">
<div class="img-div">
<img class="img" src="2.png">
</div>
<div class="msg-span-div">
<span class="num-span">172056101</span>
<span>
<span class="name-span">赵柳</span>
<span class="sex-span">女</span>
</span>
<span class="depart-span">计算机工程系</span>
<span class="like-span">
<span>读书</span>
<span>学习</span>
<span>音乐</span>
</span>
</div>
</li>
</ul>
<div id="form-div" class="modal-div" style="display: none;">
<form action="" name="msgForm">
<button class="modal-close-btn danger" type="button" id="close-modal-btn">×</button>
<h2 style="text-align: center;" class="form-title">学生信息</h2>
<div>
<label>学号:</label>
<div>
<input type="text" name="number" maxlength="9" />
</div>
</div>
<div>
<label>姓名:</label>
<div>
<input type="text" name="name" />
</div>
</div>
<div>
<label>性别:</label>
<div>
<label>
<input type="radio" name="sex" value="male" checked />
<span>男</span>
</label>
<label>
<input type="radio" name="sex" value="female" />
<span>女</span>
</label>
</div>
</div>
<div>
<label>兴趣爱好:</label>
<div>
<label>
<input type="checkbox" name="like" value="music" />
<span>音乐</span>
</label>
<label>
<input type="checkbox" name="like" value="sport" />
<span>运动</span>
</label>
<label>
<input type="checkbox" name="like" value="read" />
<span>读书</span>
</label>
<label>
<input type="checkbox" name="like" value="study" />
<span>学习</span>
</label>
</div>
</div>
<div>
<label>所属院系:</label>
<div>
<select name="department">
<option value="无">无</option>
<option value="计算机工程系">计算机工程系</option>
<option value="电子工程系">电子工程系</option>
<option value="机械工程系">机械工程系</option>
</select>
</div>
</div>
<div>
<label>个人简介:</label>
<div>
<textarea name="detail" cols="30" rows="4"></textarea>
</div>
</div>
<div>
<label>个人主页:</label>
<div>
<a href="http://baidu.com" target="_blank">个人主页地址</a>
</div>
</div>
<div>
<button type="button" id="submit-button">确定</button>
<button type="reset" id="reset-button">重置</button>
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript" src="list.js"></script>
</html>
List.css
#msgList-ul{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.head-div{
height: 2rem;
background-color: #AACCFF;
box-shadow: 0 0.5rem 0.5rem #bbbbbb;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 1rem;
}
.head-div button{
margin: 0.2rem 0.4rem;
padding: 0.2rem 0.4rem;
border-radius: 0.2rem;
font-size: 1rem;
font-weight: 600;
}
.head-div button:hover{
cursor: pointer;
transform: scale(1.1);
}
#right-search{
width: 300px;
float: left;
}
#left-search{
width: 700px;
float: right;
}
.sucess{
background-color: #AAEE33;
color: #555;
border: #AAEE99 solid 0.1rem;
box-shadow: 0 0 0.2rem 0.2rem #aaee99;
}
.seacher{
background-color: #AAEE33;
color: #555;
border: #AAEE99 solid 0.1rem;
box-shadow: 0 0 0.2rem 0.2rem #aaee99;
}
.danger{
background-color: #FFD9D8;
color: #FFFFF1;
border:#FFD4D6 solid 0.1rem;
box-shadow: 0 0 0.2rem 0.2rem #FFD9D8;
}
.waring{
background-color: #FF8844;
color: #555555;
border:#FF8877 solid 0.1rem;
box-shadow: 0 0 0.2rem 0.2rem #FF8844;
}
ul{
list-style: none;
}
li{
list-style: none;
}
.female{
width: 300px;
height: 400px;
border: 3px solid #AACCFF;
border-radius: 15px;
background-color: #FFD4D6;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
box-shadow:10px 10px 20px #888888;
text-align: center;
}
.male{
width: 300px;
height: 400px;
border: 3px solid #FFD4D6;
border-radius: 15px;
background-color: #AACCFF;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
box-shadow:10px 10px 20px #888888;
text-align: center;
}
.img{
width: 250px;
height: 200px;
border: 2px solid white;
border-radius: 15px;
box-shadow: 0 0 0.1rem 0.1rem white;
margin-top: 10px;
}
.msg-span-div{
font-size: 20px;
width: 250px;
margin-top: 5px;
margin-left: 20px;
text-align: left;
display: flex;
flex-wrap: wrap;
}
.msg-span-div span{
margin-top: 10px;
}
.name-span{
font-weight: bold;
margin-right: 80px;
}
.sex-span{
margin-right: 100px;
}
.depart-span{
margin-right: 50px;
}
.female .like-span{
font-weight: bold;
color: #FFD4D6;
}
.male .like-span{
font-weight: bold;
color: #AACCFF;
}
.female .like-span span{
background-color: #FF8844;
border-radius: 5px;
}
.male .like-span span{
background-color: #FF8844;
border-radius: 5px;
}
ul li{
transition: all 1s;
}
ul li:hover{
transform: scale(1.1);
}
#msgList-ul>li.active-li{
box-shadow: 0.5rem 0.5rem 0.5rem #AAEE99;
transform: scale(1.1);
}
.modal-div{
position: absolute;
top: 0;
left: 0;
background-color: #111111;
opacity: 0.8; /*透明度*/
}
#form-div{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-size: 18px;
}
form{
position: relative;
border: solid 1px #ff8888;
background-color: #ffddaa;
padding: 1rem;
margin: 1rem;
border-radius: 1rem;
box-shadow: 0 0 0.5rem 0.5rem #aaa;
width: 30rem;
display: flex;
flex-direction: column;
}
.modal-close-btn{
position: absolute;
top: -1rem;
right: -1rem;
height: 2rem;
line-height: 1rem;
width: 2rem;
font-size: 2rem;
cursor: pointer;
border-radius: 1rem;
background-color: #ff7777;
}
form>div{
display: flex;
margin: 0.2rem;
padding: 0.2rem;
}
form>div>label{
flex: 1;
text-align: right;
font-weight: 700;
}
form>div>div{
flex: 2;
}
form>div>button{
margin: 0.2rem 4rem;
padding: 0.2rem 2rem;
background-color: #ff6666;
color: #FFFFF1;
font-size: 1rem;
border-radius: 0.2rem;
border: solid 1px #bbb;
}
form>div>button:hover{
cursor: pointer;
transform: scale(1.1);
}
form>div>div>input{
border-radius: 0.3rem;
border: solid 1px #ff8888;
padding: 0.2rem 1rem;
font-size: 18px;
font-family: "Microsoft soft"
}
form>div>div>select{
border-radius: 0.3rem;
border: solid 1px #ff8888;
padding: 0.2rem 1rem;
}
.textt{
height: 30px;
}
四、实验结果分析
总结
在这个实验中,使用div的时候,总是位置不合理,导致出现这个出现不对齐的问题,说实话,最后选择调整合适位置,还是不太其中的含义,做实验就是在不断的调整合理位置。