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 条路线。因此，要想在两座不同城市之间旅行只有唯一一条路线可供选择（路线网形成一颗树）。去年，交通运输部决定重新规划路线，以…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...
Go语言多线程问题
打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...