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 条路线。因此，要想在两座不同城市之间旅行只有唯一一条路线可供选择（路线网形成一颗树）。去年，交通运输部决定重新规划路线，以…...
从零开始将Taotoken接入静态网站实现动态AI交互
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 从零开始将Taotoken接入静态网站实现动态AI交互 1. 场景与核心思路 对于使用 Hugo、Hexo、VuePress 等工具生成的静态网站&#x…...
题解：AcWing 271 杨老师的照相排列
本文分享的必刷题目是从蓝桥云课、洛谷、AcWing等知名刷题平台精心挑选而来，并结合各平台提供的算法标签和难度等级进行了系统分类。题目涵盖了从基础到进阶的多种算法和数据结构，旨在为不同阶段的编程学习者提供一条清晰、平稳的学习提升路径。 欢迎大…...
SketchUp STL插件终极指南：3步实现3D打印模型无缝转换
SketchUp STL插件终极指南：3步实现3D打印模型无缝转换 【免费下载链接】sketchup-stl A SketchUp Ruby Extension that adds STL (STereoLithography) file format import and export. 项目地址: https://gitcode.com/gh_mirrors/sk/sketchup-stl 你是否曾经…...
终极Windows进程内存操控指南：Xenos DLL注入器深度实战解析
终极Windows进程内存操控指南：Xenos DLL注入器深度实战解析 【免费下载链接】Xenos Windows dll injector 项目地址: https://gitcode.com/gh_mirrors/xe/Xenos 在Windows系统开发与安全研究领域，DLL注入技术一直是连接应用程序与系统底层的关键桥…...
2026年腾讯云OpenClaw/Hermes Agent配置Token Plan部署保姆级
2026年腾讯云OpenClaw/Hermes Agent配置Token Plan部署保姆级。OpenClaw是开源的个人AI助手，Hermes Agent则是一个能自我进化的AI智能体框架。阿里云提供计算巢、轻量服务器及无影云电脑三种部署OpenClaw 与 Hermes Agent的方案、百炼Token Plan兼容主流 AI 工具&am…...
别再为单细胞数据批次效应发愁了！手把手教你用Harmony算法搞定整合分析（附Seurat实战代码）
单细胞数据整合实战：用Harmony算法高效消除批次效应当我们面对来自不同实验室、不同测序平台或不同实验条件的单细胞RNA测序数据时，一个无法回避的挑战就是批次效应。这种技术性变异会掩盖真实的生物学差异，导致细胞聚类混乱、跨样本比较失效…...
近场通信连续孔径阵列技术与波传播建模
1. 近场通信中的连续孔径阵列技术在无线通信领域，近场通信技术正经历着从传统离散天线阵列向连续孔径阵列的范式转变。这种技术演进的核心在于对电磁波前进行前所未有的精细控制，特别是在6G及未来通信系统的研发中展现出巨大潜力。连续孔径阵列与传统天线…...
物理信息机器学习在声场估计中的应用：原理、实践与前沿
1. 物理信息机器学习：当声学物理遇上数据智能 如果你在声学、音频信号处理或者空间音频领域工作，那么“声场估计”这个词对你来说一定不陌生。简单来说，它就像是用有限的几个“耳朵”（传声器）去“猜”出整个空间里每一…...
Vaultwarden同步失败排查指南：日志诊断与5分钟修复
1. 这不是Bitwarden客户端的问题，而是你本地运行的Vaultwarden服务“断联”了很多人看到手机App里点“同步”没反应、网页端新建密码点保存后刷新就消失、或者浏览器插件提示“无法连接到服务器”，第一反应是重装客户端、清缓存、换网络——结果折腾半天…...
C#中Activator的具体使用
Activator 是 C# 中用于动态创建对象实例的核心类，位于 System 命名空间。它通过**反射（Reflection）**机制，在运行时根据类型信息创建对象，而无需在编译时知道具体类型。🔍 一、Activator的核心作用在不知道…...