html&CSS-----弹性布局案例展示

目录

前言

效果展示

[​编辑 代码](#编辑 代码)

思路分析


前言

上一期我们学习了弹性布局,那么这一期我们用弹性布局来写一个小案例,下面看代码(上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客

效果展示

代码

html代码:

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代码:

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,以上就可以实现每一个项目纵向排列不会出现超出边框的问题,然后就是依次放入小盒子在里面,最后就是放入图片了(图片均是网上资源可查阅)。

好了,以上就是今天的作品展示了,你们会了吗?我们下一期再见!

每日分享一张壁纸:

相关推荐
EndingCoder16 分钟前
Electron 跨平台兼容性:处理 OS 差异
前端·javascript·electron·前端框架·node.js·chrome devtools
秋田君32 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人32 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin32 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO32 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_8035545235 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn36 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤37 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523543 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子1 小时前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui