🌴 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~96
display: block;
使.msg-span-div下的span为块元素独自一行(学号、姓名、系别、爱好单独一行)- 98~103
display: 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;