HTML与CSS--HBulider

发疯的熏熏

已于 2023-12-26 10:40:43 修改

阅读量1k

点赞数 18

分类专栏： javaweb 文章标签： html css 前端

于 2023-12-26 10:36:43 首次发布

本文链接：https://blog.csdn.net/m0_58837398/article/details/135215634

版权

javaweb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、实验项目要求

实验目的

掌握常用的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的时候，总是位置不合理，导致出现这个出现不对齐的问题，说实话，最后选择调整合适位置，还是不太其中的含义，做实验就是在不断的调整合理位置。

实验效果

发疯的熏熏

关注

18
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS--HBulider

掌握常用的HTML标签，如表格、表单、层、列表等；掌握页面布局方式，如盒式布局、弹性盒子布局等；掌握常用的CSS选择器，如类选择器、id选择器、子元素选择器、后代选择器、过滤选择器、伪元素选择器等；掌握常用的CSS样式属性，如盒式布局相关属性、弹性盒子布局相关属性、位置相关属性。
复制链接

扫一扫

专栏目录