JAVA WEB开发技术作业 学生信息列表效果(display布局)

🌴 2022.3.24 作业

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

🚀 前言

🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏 传送门
📽本节主要内容：灵活使用div、span的页面布局

🚀 要求

编写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布局，剩下应该都能看懂，就不解释了

🚀 代码

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

.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;