目录
前言
效果展示
编辑 代码
思路分析
前言
上一期我们学习了弹性布局,那么这一期我们用弹性布局来写一个小案例,下面看代码(上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客)
效果展示
代码
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="title">我最喜欢的动漫</div>
<div class="box">
<div class="first">
<img src="https://p1.ssl.qhimg.com/t0115ce3cbc4015ec6a.jpg" alt="" width="380px" height="580px">
</div>
<div class="second">
<img src="https://pic2.zhimg.com/v2-12739c6fd519e482491c474c5d4c555d_r.jpg?source=172ae18b" alt="" width="380px" height="280px">
</div>
<div class="third">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.5bb547e5904c73e0fd6797f9d84fd385?rik=ZArey%2blfkd7qZg&riu=http%3a%2f%2fimg1.gtimg.com%2fent%2fpics%2fhv1%2f220%2f19%2f1897%2f123357490.jpg&ehk=p%2bq0rmM2VU56Zk8J9UED%2fkOsy06RWh5fYYO%2fuqkvj8o%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt="error" width="380px" height="280px">
</div>
<div class="forth">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6VInImvpRRAbGNLyA-O-7wHaEK?pid=ImgDet&rs=1" alt="000" width="380px" height="280px">
</div>
<div class="fifth">
<img src="https://pic1.zhimg.com/v2-eba5063f7938e90321291c220ab672b7_b.jpg" alt="" width="380px" height="280px">
</div>
</div>
</body>
</html>
CSS代码:
.box{
margin: 0 auto;
display: flex;
height: 600px;
width: 1200px;
justify-content: space-around;
flex-wrap: wrap;
flex-direction: column;
border: 2px solid yellow;
}
.title{
font-size: 40px;
color: blueviolet;
margin-left: 40%;
}
.first{
height: 580px;
width: 380px;
background-color: red;
background-image: url();
}
.second{
background-color: blue;
height: 280px;
width: 380px;
}
.third{
background-color: rgb(0, 255, 208);
height: 280px;
width: 380px;
}
.forth{
background-color: rgb(0, 255, 208);
height: 280px;
width: 380px;
}
.fifth{
background-color: rgb(0, 255, 208);
height: 280px;
width: 380px;
}
思路分析
首先我们去创建一个大盒子box,作为容器,里面放入5个项目(小盒子)。其中容器的主轴设置为y轴,然后设置为换行,还有对齐方式设置为所有间隔分均分配,即所有子元素拥有相同的左右(上下)间隔space-around,以上就可以实现每一个项目纵向排列不会出现超出边框的问题,然后就是依次放入小盒子在里面,最后就是放入图片了(图片均是网上资源可查阅)。
好了,以上就是今天的作品展示了,你们会了吗?我们下一期再见!
每日分享一张壁纸:文章来源:https://www.toymoban.com/news/detail-650154.html
文章来源地址https://www.toymoban.com/news/detail-650154.html
到了这里,关于html&CSS-----弹性布局案例展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!