当前位置： 首页 > news >正文

htmlCSS-----弹性布局案例展示

news 2026/4/3 15:57:33

目录

前言

效果展示

​编辑 代码

思路分析

前言

        上一期我们学习了弹性布局，那么这一期我们用弹性布局来写一个小案例，下面看代码（上一期链接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-----弹性布局案例展示

目录 前言 效果展示 ​编辑 代码 思路分析 前言 上一期我们学习了弹性布局&#xff0c;那么这一期我们用弹性布局来写一个小案例&#xff0c;下面看代码&#xff08;上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客&#xff09; 效果展示 代码 html代码&am…...

编程日记 2023/8/15 22:55:19

Fiddler模拟请求发送和修改响应数据

fiddler模拟伪造请求 方法一&#xff1a;打断点模拟HTTP请求 1、浏览器页面填好内容后&#xff08;不要操作提交&#xff09;&#xff0c;打开fiddler&#xff0c;设置请求前断点&#xff0c;点击菜单fiddler,”Rules”\”Automatic Breakpoints”\”Before Requests” 2、在…...

编程日记 2023/8/15 22:54:18

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的模板…...

编程日记 2023/8/15 22:53:17

ChatGPT收录

VSCode插件-ChatGPT 多磨助手 多磨助手 (domore.run) Steamship Steamship 免费合集 免费chatGPT - Ant Design Pro 免费AI聊天室 (xyys.one)...

编程日记 2023/8/15 22:52:16

Nginx随笔

Nginx下载链接 安装命令&#xff1a; apt update apt install nginx 一、基础命令&#xff08;Ubuntu&#xff09; 1、在全局 nginx -t //检查Nginx的配置文件是否有错 systemctl start nginx //启动Nginx systemctl stop nginx //停止Nginx systemctl status nginx //查…...

编程日记 2023/8/15 22:51:15

61. 旋转链表

61. 旋转链表 题目-中等难度示例1. 快慢指针找到分割位置2. 连成环后截断 题目-中等难度 相关企业 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出…...

编程日记 2023/8/15 22:50:15

Python实现动态调用Matlab自定义函数

首先需要下载与python版本对应的matlab&#xff0c;并成功执行matlab中的setup.py文件 参考流程如下 https://blog.csdn.net/s1k9y9/article/details/127793053 完成上述步骤即可开始实现动态调用matlab文件。 文件目录如下 D://call/ |–matlab |–test1 |–main.m |–test2 |…...

编程日记 2023/8/15 22:49:13

redis集群和分片-Redis Cluster：分布式环境中的数据分片、主从复制和 Sentinel 哨兵

当涉及到 Redis 中的集群、分片、主从复制和 Sentinel 哨兵时&#xff0c;这些是构建分布式 Redis 环境中非常重要的概念和组件。下面详细介绍这些概念以及它们在分布式环境中的作用。 Redis Cluster Redis Cluster 是 Redis 官方提供的分布式解决方案&#xff0c;用于管理和…...

编程日记 2023/8/15 22:48:11

【数据库基础】Mysql下载安装及配置

下载 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 当前最新版本为 8.0版本&#xff0c;可以在Product Version中选择指定版本&#xff0c;在Operating System中选择安装平台&#xff0c;如下 安装 MySQL安装文件分两种 .msi和.zip [外链图片转存失…...

编程日记 2023/8/15 22:47:10

iptables安全与防火墙

防火墙 防火墙主要作用是隔离功能&#xff0c;它是部署在网络边缘或主机边缘&#xff1b;另外在生产中防火墙的主要作用是&#xff1a;决定哪些数据可以被外网访问以及哪些数据可以进入内网访问&#xff1b;顾名思义防火墙处于TCP协议中的网络层。 防火墙分类&#xff1a; 软…...

编程日记 2023/8/15 22:46:09

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…...

编程日记 2023/8/15 22:45:07

React+Typescript清理项目环境

上文 创建一个 ReactTypescript 项目 我们创建出了一个 React配合Ts开发的项目环境 那么 本文 我们先将环境清理感觉 方便后续开发 我们先来聊一下React的一个目录结构 跟我们之前开发的React项目还是有一些区别 public 主要是存放一些静态资源文件 例如 html 图片 icon之类的 …...

编程日记 2023/8/15 22:44:04

【linux学习】linux的模块机制

文章目录 前言模块的Hello World&#xff01; 前言 Linux允许用户通过插入模块&#xff0c;实现干预内核的目的。一直以来&#xff0c;对linux的模块机制都不够清晰&#xff0c;因此本文对内核模块的加载机制进行简单地分析。 ref:https://www.cnblogs.com/fanzhidongyzby/p/…...

编程日记 2023/8/15 22:43:02

用 oneAPI 实现 AI 欺诈检测：一款智能图像识别工具

简介 虚假图像和视频日益成为社交媒体、新闻报道以及在线内容中的一大隐患。在这个信息爆炸的时代&#xff0c;如何准确地识别和应对这些虚假内容已经成为一个迫切的问题。为了帮助用户更好地辨别虚假内容&#xff0c;我开发了一款基于 oneAPI、TensorFlow 和 Neural Compress…...

编程日记 2023/8/15 22:42:00

云计算的发展前景怎么样

云计算是当前科技领域中最受关注的领域之一,它的出现改变了传统的计算模式,使得企业和个人能够更加便捷地访问和使用计算资源。随着云计算技术的不断发展,它的前景也变得更加光明。 以下是云计算的发展前景: 云计算的市场份额将继续增长:根据市场研究机构的报告,云计算的市场份…...

编程日记 2023/8/15 22:40:58

opencv实战项目 手势识别-手势音量控制（opencv）

本项目是使用了谷歌开源的框架mediapipe&#xff0c;里面有非常多的模型提供给我们使用&#xff0c;例如面部检测&#xff0c;身体检测&#xff0c;手部检测等。 手势识别系列文章 1.opencv实现手部追踪&#xff08;定位手部关键点&#xff09; 2.opencv实战项目 实现手势跟踪…...

编程日记 2023/8/15 22:39:58

Mac下编译32位Qt

不建议&#xff0c;MAC新版不支持32位程序&#xff01;&#xff01;&#xff01; Mac下编译32位Qt 关于Mac10.11.4下编译32bit Qt5.6.1的问题...

编程日记 2023/8/15 22:38:57

企业数据库遭到360后缀勒索病毒攻击，360勒索病毒解密

在当今数字化时代&#xff0c;企业的数据安全变得尤为重要。随着数字化办公的推进&#xff0c;企业的生产运行效率得到了很大提升&#xff0c;然而针对网络安全威胁&#xff0c;企业也开始慢慢引起重视。近期&#xff0c;我们收到很多企业的求助&#xff0c;企业的服务器遭到了…...

编程日记 2023/8/15 22:37:55

C++11时间日期库chrono的使用

chrono是C11中新加入的时间日期操作库&#xff0c;可以方便地进行时间日期操作&#xff0c;主要包含了&#xff1a;duration, time_point, clock。 时钟与时间点 chrono中用time_point模板类表示时间点&#xff0c;其支持基本算术操作&#xff1b;不同时钟clock分别返回其对应…...

编程日记 2023/8/15 22:36:54

每天一道leetcode：1466. 重新规划路线（图论中等广度优先遍历）

今日份题目&#xff1a; n 座城市&#xff0c;从 0 到 n-1 编号&#xff0c;其间共有 n-1 条路线。因此&#xff0c;要想在两座不同城市之间旅行只有唯一一条路线可供选择&#xff08;路线网形成一颗树&#xff09;。去年&#xff0c;交通运输部决定重新规划路线&#xff0c;以…...

编程日记 2023/8/15 22:35:53

AI Agent学习日记 Day2

今天继续实现word翻译功能&#xff0c;上次的代码翻译完后会丢失图片等元素&#xff0c;让deepseek改了好几版代码都还是有问题&#xff0c;我决定先搞懂根本原因再改代码。经调查&#xff0c;Word 的文档结构&#xff08;通过 COM 对象模型&#xff09;如下&#xff1a;Docume…...

编程新知 2026/4/3 15:15:14

突破3大核心优势：Path of Building革新流放之路Build规划体验

突破3大核心优势&#xff1a;Path of Building革新流放之路Build规划体验 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding 在《流放之路》复杂的角色构建系统中&#xff0…...

编程新知 2026/4/3 15:11:09

如何快速提升Python开发效率：VS Code扩展终极指南

如何快速提升Python开发效率&#xff1a;VS Code扩展终极指南 【免费下载链接】pylance-release Documentation and issues for Pylance 项目地址: https://gitcode.com/gh_mirrors/py/pylance-release Python开发工具在当今编程世界中扮演着至关重要的角色&#xff0c;…...

编程新知 2026/4/3 13:53:22

新手零基础入门：用快马AI生成你的第一个互联网个人主页

作为一个刚接触编程的新手&#xff0c;想要制作个人主页却不知从何下手是很常见的情况。最近我在InsCode(快马)平台上尝试用AI生成我的第一个网页&#xff0c;整个过程比想象中简单很多&#xff0c;特别适合零基础入门。下面分享我的学习过程和收获。 明确需求很关键 在开始前&…...

编程新知 2026/4/3 13:17:02

HY-MT1.5-1.8B网络隔离环境安装：离线部署完整方案

HY-MT1.5-1.8B网络隔离环境安装&#xff1a;离线部署完整方案 想象一下&#xff0c;在一个完全与互联网隔绝的服务器机房或保密研发中心&#xff0c;你需要一个高质量的翻译工具来处理多语言文档。传统的在线翻译API用不了&#xff0c;商业软件又笨重且昂贵。这时候&#xff0…...

编程新知 2026/4/3 13:17:02

如何让老旧Mac重获新生？OpenCore Legacy Patcher终极改造指南

如何让老旧Mac重获新生&#xff1f;OpenCore Legacy Patcher终极改造指南 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher OpenCore Legacy Patcher是一款开源…...

编程新知 2026/4/3 9:26:40

终极指南：如何将Python PEG语法轻松迁移到Ohm解析器

终极指南&#xff1a;如何将Python PEG语法轻松迁移到Ohm解析器 【免费下载链接】ohm A library and language for building parsers, interpreters, compilers, etc. 项目地址: https://gitcode.com/gh_mirrors/oh/ohm 想要将Python的PEG语法迁移到Ohm解析器框架吗&…...

编程新知 2026/4/3 7:58:41

【QuantDev必藏】：为什么92%的C++交易系统仍在用malloc——深度剖析jemalloc/tcmalloc/mimalloc在L3缓存穿透场景下的失效临界点

第一章&#xff1a;金融高频交易系统内存分配的底层挑战与现实困境在纳秒级竞争的金融高频交易&#xff08;HFT&#xff09;场景中&#xff0c;内存分配不再是语言运行时的“黑盒服务”&#xff0c;而是决定订单延迟、吞吐一致性与系统可预测性的关键路径。传统堆分配器&#x…...

编程新知 2026/4/3 7:26:32

MusePublic Art Studio部署步骤：bash /root/build/star.sh 启动全链路解析

MusePublic Art Studio部署步骤&#xff1a;bash /root/build/star.sh 启动全链路解析 1. 项目概述与核心价值 MusePublic Art Studio 是一款专为艺术家和设计师打造的AI图像生成工具&#xff0c;它基于业界顶尖的Stable Diffusion XL&#xff08;SDXL&#xff09;技术构建。…...

编程新知 2026/4/3 7:02:03

论文答辩智能化：10款AI辅助工具推荐（附爱毕业aibiye使用技巧）

工具对比速览表 工具名称 核心功能 适用场景 特色优势 Aibiye 智能成文、文献查找、数据分析 社科/金融/理工类论文 融合多模型架构&#xff0c;精准把握高校规范 Aicheck 初稿生成、大纲定制、图表插入 快速完成初稿需求 全学科覆盖&#xff0c;20-30分钟极速生成 …...

编程新知 2026/4/3 7:02:03