htmlCSS-----弹性布局案例展示
目录
前言
效果展示
编辑 代码
思路分析
前言
上一期我们学习了弹性布局，那么这一期我们用弹性布局来写一个小案例，下面看代码（上一期链接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，以上就可以实现每一个项目纵向排列不会出现超出边框的问题，然后就是依次放入小盒子在里面，最后就是放入图片了（图片均是网上资源可查阅）。
好了，以上就是今天的作品展示了，你们会了吗？我们下一期再见！
每日分享一张壁纸：
相关文章：
htmlCSS-----弹性布局案例展示
目录 前言 效果展示 编辑 代码 思路分析 前言 上一期我们学习了弹性布局，那么这一期我们用弹性布局来写一个小案例，下面看代码（上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客） 效果展示 代码 html代码&am…...
Fiddler模拟请求发送和修改响应数据
fiddler模拟伪造请求 方法一：打断点模拟HTTP请求 1、浏览器页面填好内容后（不要操作提交），打开fiddler，设置请求前断点，点击菜单fiddler,”Rules”\”Automatic Breakpoints”\”Before Requests” 2、在…...
RH850从0搭建Autosar开发环境【23】- Davinci Configurator之DCM实操实现DID的读取写入
配置DID 一、Developer中创建SWC1.1 创建Application Component Type1.2 实例化Component二、在SWC中创建接口以及Runnable2.1 创建DID的Service Ports2.2 创建DID的Service Runnable三、在Configurator连接接口以及生成代码3.1 连接DCM与SWC3.2 生成RTE3.3 生成SWC的DID的模板…...
ChatGPT收录
VSCode插件-ChatGPT 多磨助手 多磨助手 (domore.run) Steamship Steamship 免费合集 免费chatGPT - Ant Design Pro 免费AI聊天室 (xyys.one)...
Nginx随笔
Nginx下载链接 安装命令： apt update apt install nginx 一、基础命令（Ubuntu） 1、在全局 nginx -t //检查Nginx的配置文件是否有错 systemctl start nginx //启动Nginx systemctl stop nginx //停止Nginx systemctl status nginx //查…...
61. 旋转链表
61. 旋转链表 题目-中等难度示例1. 快慢指针找到分割位置2. 连成环后截断 题目-中等难度 相关企业 给你一个链表的头节点 head ，旋转链表，将链表每个节点向右移动 k 个位置。 示例 示例 1： 输入：head [1,2,3,4,5], k 2 输出…...
Python实现动态调用Matlab自定义函数
首先需要下载与python版本对应的matlab，并成功执行matlab中的setup.py文件 参考流程如下 https://blog.csdn.net/s1k9y9/article/details/127793053 完成上述步骤即可开始实现动态调用matlab文件。 文件目录如下 D://call/ |–matlab |–test1 |–main.m |–test2 |…...
redis集群和分片-Redis Cluster：分布式环境中的数据分片、主从复制和 Sentinel 哨兵
当涉及到 Redis 中的集群、分片、主从复制和 Sentinel 哨兵时，这些是构建分布式 Redis 环境中非常重要的概念和组件。下面详细介绍这些概念以及它们在分布式环境中的作用。 Redis Cluster Redis Cluster 是 Redis 官方提供的分布式解决方案，用于管理和…...
【数据库基础】Mysql下载安装及配置
下载 下载地址：https://downloads.mysql.com/archives/community/ 当前最新版本为 8.0版本，可以在Product Version中选择指定版本，在Operating System中选择安装平台，如下 安装 MySQL安装文件分两种 .msi和.zip [外链图片转存失…...
iptables安全与防火墙
防火墙 防火墙主要作用是隔离功能，它是部署在网络边缘或主机边缘；另外在生产中防火墙的主要作用是：决定哪些数据可以被外网访问以及哪些数据可以进入内网访问；顾名思义防火墙处于TCP协议中的网络层。 防火墙分类： 软…...
Linux 内核线程启动以及内核调用应用层程序
#include <linux/kthread.h> //内核线程头文件 static task_struct *test_task; test_task kthread_run(thread_function, NULL, "test_thread_name"); if(IS_ERR(test_task)) { pr_err("test_thread_name create fail\n"); } static int th…...
React+Typescript清理项目环境
上文 创建一个 ReactTypescript 项目 我们创建出了一个 React配合Ts开发的项目环境 那么 本文 我们先将环境清理感觉 方便后续开发 我们先来聊一下React的一个目录结构 跟我们之前开发的React项目还是有一些区别 public 主要是存放一些静态资源文件 例如 html 图片 icon之类的 …...
【linux学习】linux的模块机制
文章目录 前言模块的Hello World！ 前言 Linux允许用户通过插入模块，实现干预内核的目的。一直以来，对linux的模块机制都不够清晰，因此本文对内核模块的加载机制进行简单地分析。 ref:https://www.cnblogs.com/fanzhidongyzby/p/…...
用 oneAPI 实现 AI 欺诈检测：一款智能图像识别工具
简介 虚假图像和视频日益成为社交媒体、新闻报道以及在线内容中的一大隐患。在这个信息爆炸的时代，如何准确地识别和应对这些虚假内容已经成为一个迫切的问题。为了帮助用户更好地辨别虚假内容，我开发了一款基于 oneAPI、TensorFlow 和 Neural Compress…...
云计算的发展前景怎么样
云计算是当前科技领域中最受关注的领域之一,它的出现改变了传统的计算模式,使得企业和个人能够更加便捷地访问和使用计算资源。随着云计算技术的不断发展,它的前景也变得更加光明。 以下是云计算的发展前景: 云计算的市场份额将继续增长:根据市场研究机构的报告,云计算的市场份…...
opencv实战项目 手势识别-手势音量控制（opencv）
本项目是使用了谷歌开源的框架mediapipe，里面有非常多的模型提供给我们使用，例如面部检测，身体检测，手部检测等。 手势识别系列文章 1.opencv实现手部追踪（定位手部关键点） 2.opencv实战项目 实现手势跟踪…...
Mac下编译32位Qt
不建议，MAC新版不支持32位程序！！！ Mac下编译32位Qt 关于Mac10.11.4下编译32bit Qt5.6.1的问题...
企业数据库遭到360后缀勒索病毒攻击，360勒索病毒解密
在当今数字化时代，企业的数据安全变得尤为重要。随着数字化办公的推进，企业的生产运行效率得到了很大提升，然而针对网络安全威胁，企业也开始慢慢引起重视。近期，我们收到很多企业的求助，企业的服务器遭到了…...
C++11时间日期库chrono的使用
chrono是C11中新加入的时间日期操作库，可以方便地进行时间日期操作，主要包含了：duration, time_point, clock。 时钟与时间点 chrono中用time_point模板类表示时间点，其支持基本算术操作；不同时钟clock分别返回其对应…...
每天一道leetcode：1466. 重新规划路线（图论中等广度优先遍历）
今日份题目： n 座城市，从 0 到 n-1 编号，其间共有 n-1 条路线。因此，要想在两座不同城市之间旅行只有唯一一条路线可供选择（路线网形成一颗树）。去年，交通运输部决定重新规划路线，以…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...