CSS按要求实现学生信息列表效果

🌴 2022.3.24 作业

🚀 要求

编写CSS，使得所给的学生列表页面实现要求的样式效果，要用到的主要属性如下，自己查阅相关资料进行学习

  • 主要用flex布局，查阅flex布局相关属性
  • 元素布局相关box-shadow、padding、margin、border、border-radius
  • 颜色相关background-color、color等
  • 字体相关font-size、font-weight等
  • 动画相关transition、tranform等

🚀 效果图

  • 1~8将四个信息放在四个块元素中，使用display: flex;让页面块元素占用同一行。flex-wrap: wrap;让块元素随页面大小变化
  • 62~89使用display: inline-block;行内块元素使兴趣爱好单独占一个块(读书和篮球分开显示)
  • 91~96display: block;使.msg-span-div下的span为块元素独自一行(学号、姓名、系别、爱好单独一行)
  • 98~103display: inline-block;单独设置姓名和性别为行内块，在同一行

主要就是display布局，剩下应该都能看懂，就不解释了

JAVA WEB开发技术14

🚀 代码

小张自己的代码，仅供参考。源文件

.css

/* ul */
#msgList-ul {
	margin: 100px;
	display: flex;/* 设置flex容器 */
	flex-wrap: wrap;/* 允许li块元素随页面大小换行 */
	white-space: nowrap;/* 文本不换行 */
	list-style-type: none;/* 去除列表样式 */
}

/* 女生背景 */
.female {
	height: 400px;
	width: 330px;
	margin-top: 40px;
	background-color: #ffccdd;
	border-radius: 20px;
	box-shadow: 0 0 0.5rem 0.5rem #999;
	margin-left: 50px;
}

/* 男生背景 */
.male {
	height: 400px;
	width: 330px;
	margin-top: 40px;
	background-color: #abccff;
	border-radius: 20px;
	box-shadow: 0 0 0.5rem 0.5rem #999;
	margin-left: 50px;
}

/* 图片 */
.img-div {
	margin: 20px 30px;
}

.img {
	height: 200px;
	border-radius: 20px;/* 边框圆角 */
	border: 2px solid #F2F2F2;/* 边框粗细风格颜色 */
}

/* 个人信息div */
.msg-span-div {
	margin-left: 35px;
	margin-top: -20px;
}

/* 姓名 */
.name-span {
	font-size: 20px;
	font-weight: 1000;
}

/* 性别 */
.sex-span {
	font-size: 20px;
	margin-left: 150px;
}

/* 女兴趣爱好 */
.female .like-span span {
	width: 50px;
	height: 30px;
	color: #F0FFFF;
	font-weight: 1000;
	border-radius: 10px;/* 设置盒子为行内块 */
	display: inline-block;
	background-color: #ff8844;
	/* 设置盒子内元素水平居中 */
	text-align: center;
	/* 设置盒子内容垂直居中 */
	line-height: 30px;
}

/* 男兴趣爱好 */
.male .like-span span {
	width: 50px;
	height: 30px;
	color: #F0FFFF;
	border-radius: 10px;
	/* 设置盒子为行内块 */
	display: inline-block;
	background-color: #4488ff;
	/* 设置盒子内元素水平居中 */
	text-align: center;
	/* 设置盒子内容垂直居中 */
	line-height: 30px;
}

/* 使.msg-span-div下的span为块元素独自一行 */
.msg-span-div span {
	width: 10px;
	display: block;
	margin-top: 6px;
}

/* 单独设置姓名和性别为行内块，在同一行 */
.msg-span-div span span {
	width: 10px;
	display: inline-block;
	margin-top: 6px;
}

/* 设置触发样式 */
li:hover{
	transform: scale(1.1);
	cursor: pointer;/* 鼠标样式 */
}

.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息列表</title>
		<link rel="stylesheet" type="text/css" href="../css/3.24%20学生信息列表.css" />
	</head>
	<body>
		<ul id="msgList-ul">
            
			<li class="female">
				<div class="img-div">
					<img class="img" src="https://img.zhsher.cn/9901.png">
				</div>
				<div class="msg-span-div">
					<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="https://img.zhsher.cn/9902.png">
				</div>
				<div class="msg-span-div">
					<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="https://img.zhsher.cn/9903.png">
				</div>
				<div class="msg-span-div">
					<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="https://img.zhsher.cn/9904.png">
				</div>
				<div class="msg-span-div">
					<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>
	</body>
</html>

🚀 知识总结

上一节作业刚自己学了一下flex属性这节就用到了嘿嘿，首先搞清div默认是块级元素即独占一行，span默认是行内块元素即共占一个块，以上代码主要用到：

  • display: flex;让页面div块级元素占用同一行
  • display: inline-block;使每一个span单独占一个块(“读书”、”篮球”默认是连在一起的一个块，所以用这个属性来分开)
  • display: block;使span为块元素独自一行