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 条路线。因此，要想在两座不同城市之间旅行只有唯一一条路线可供选择（路线网形成一颗树）。去年，交通运输部决定重新规划路线，以…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
LLMs 系列实操科普（1）
写在前面： 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容，原视频时长 ~130 分钟，以实操演示主流的一些 LLMs 的使用，由于涉及到实操，实际上并不适合以文字整理，但还是决定尽量整理一份笔…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么？它的作用是什么？ Spring框架的核心容器是IoC（控制反转）容器。它的主要作用是管理对…...