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

纯CSS瀑布流

news 2026/3/27 18:22:49

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>/* 瀑布流容器 */.waterfall-container {column-count: 2; /* 列数 */column-gap: 20px; /* 列间距 */}/* 每个瀑布流项 */.waterfall-item {display: inline-block;width: 100%;margin-bottom: 20px; /* 项之间的垂直间距 */background-color: #f0f0f0;padding: 10px;box-sizing: border-box;}
</style>
</head>
<body><div class="waterfall-container"><div class="waterfall-item">项目 1项目 1项目 1项目 1项目 1</div><div class="waterfall-item">项目 2项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1</div><div class="waterfall-item">项目 3项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1</div><div class="waterfall-item">项目 4项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1</div><div class="waterfall-item">项目 5项目 1项目 1项目 1项目 1项目 1项目 1</div><div class="waterfall-item">项目 6项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1</div><!-- 添加更多项目 --></div>
</body>
</html>

相关文章：

纯CSS瀑布流

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>瀑布流布局</title> <style>/* 瀑布…...

编程日记 2024/7/10 16:14:57

vue3 路由跳转新页面并传递参数与获取参数

打开新标签页面传递参数&#xff08;useRouter &#xff09; import { useRouter } from vue-router const uRouter useRouter() let page uRouter.resolve({path:/mapRollerShutter,query:{type:Split,key:1}})window.open(page.href,_blank)页面接收&#xff08;useRoute …...

编程日记 2024/7/10 16:13:55

NSAT-8000电源检测软件测试砖式电源模块的方案及优势

砖式电源模块类型 砖式电源&#xff0c;顾名思义其外观尺寸像块砖&#xff0c;具有体积小、功率大、安装方便等特点。砖式电源模块具备高可靠性和高稳定性&#xff0c;能够为设备提供稳定的电力输出&#xff0c;在通信、工业、医疗等领域广泛应用。 根据尺寸大小&#xff0c;砖…...

编程日记 2024/7/10 16:11:53

短链接服务Octopus-搭建实战

[WARNING] The POM for cn.throwx:octopus-contract:jar:1.0-SNAPSHOT is missing, no dependency information available 解决方案&#xff1a; cd octopus-contract/ mvn install -------------- ➜ octopus-server git:(master) ✗ mkdir -p /data/log-center/octopus/s…...

编程日记 2024/7/10 16:09:51

STM32（二）：STM32工作原理

0、参考1、寄存器和存储器基本概念&#xff08;1&#xff09;基本概念&#xff08;2&#xff09;主要区别&#xff08;3&#xff09;联系&#xff08;4&#xff09;实际应用中的案例&#xff08;5&#xff09;总结&#xff08;6&#xff09;一些名词解释 2、STM32指南者板子-存…...

编程日记 2024/7/10 16:07:47

真实工作项目Java使用apache.poi生成word

加油&#xff0c;新时代打工人&#xff01; 将实体类利用poi转成Word文件 demo示例 package com.fqpais.util;import com.fqpais.business.domain.TestReportTemplate; import com.fqpais.common.utils.StringUtils; import org.apache.poi.xwpf.usermodel.*; import org.slf4…...

编程日记 2024/7/10 16:06:46

[Python自动化办公]--从网页登录网易邮箱进行邮件搜索并下载邮件附件

[Python自动化办公]–从网页登录网易邮箱进行邮件搜索并下载邮件附件 使用说明 ​ 本文使用Python的selenium库进行操作邮箱登录、固定名称搜索邮件并下载附件&#xff0c;Python版本&#xff1a;3.9.16, selenium版本&#xff1a;4.19.0&#xff0c;EdgeBrowser版本:126.0.2…...

编程日记 2024/7/10 16:05:45

mysql8多值索引

MySQL8新出了一个多值索引&#xff0c;我还没体验过呢&#xff0c;今天试一试。 建表 我先建个表试一试多值索引的效果。我粗略地看了下多值索引的介绍&#xff0c;发现是只适用于数组类型的。所以我建一个含有数组字段的表试一试。语法还是挺麻烦的&#xff1a; create tabl…...

编程日记 2024/7/10 16:03:42

MT3055 交换排列

1.思路 若数对为&#xff08;1&#xff0c;4&#xff09;和&#xff08;4&#xff0c;7&#xff09;&#xff0c;则说明14可以互换&#xff0c;47可以互换&#xff0c;并且17也可以互换。所以把可以交换的元素放到一个集合中。 例如样例1&#xff1a;有三个集合&#xff0c;…...

编程日记 2024/7/10 16:02:40

Zkeys三方登录模块支持QQ、支付宝登录

1&#xff0c;覆盖到根目录&#xff0c;并导入update.sql数据库文件到Zkeys数据库里 2. 后台系统权限管理&#xff0c;配置管理员权限-系统类别-找到云外科技&#xff0c;全部打勾 3&#xff0c;后台系统设置找到云外快捷登录模块填写相应的插件授权配置和登录权限配置&#x…...

编程日记 2024/7/10 16:01:37

数字探秘：用神经网络解密MNIST数据集中的数字！

用神经网络解密MNIST数据集中的数字&#xff01; 一. 介绍1.1 MNIST数据集简介1.2 MLP&#xff08;多层感知器&#xff09;模型介绍1.3 目标&#xff1a;使用MLP模型对MNIST数据集中的0-9数字进行分类 二.数据预处理2.1 数据集的获取与加载2.2 数据集的探索性分析&#xff08;E…...

编程日记 2024/7/10 16:00:36

11个IT运维领域必考证书，每一个都含金量极高

这几年&#xff0c;网络方向里&#xff0c;IT运维其实还是挺吃香的。 运维人员的职责不仅仅是确保系统的正常运行&#xff0c;还需要应对突发事件、优化性能以及保障信息安全。 面对如此复杂的工作环境&#xff0c;拥有专业认证不仅是对自身技能的肯定&#xff0c;更是提升职业…...

编程日记 2024/7/10 15:59:34

VScode 常用插件

基础开发插件 Chinese (Simplified)&#xff08;简体中文语言包&#xff09;&#xff1a;这是适用于VS Code的中文&#xff08;简体&#xff09;语言包&#xff0c;适用于英语不太流利的用户。Auto Rename Tag&#xff1a;这个插件可以同步修改HTML/XML标签&#xff0c;当用户修…...

编程日记 2024/7/10 15:57:32

299k stars利用Public APIs提升开发效率：探索APILayer提供的开源资源

299k stars利用Public APIs提升开发效率&#xff1a;探索APILayer提供的开源资源 在现代软件开发中&#xff0c;API&#xff08;应用程序接口&#xff09;是实现应用间通信和功能扩展的关键工具。公共API&#xff08;Public APIs&#xff09;则为开发者提供了宝贵的资源&#…...

编程日记 2024/7/10 15:56:30

在目标检测数据集上微调Florence-2

Florence-2是由微软开源的轻量级视觉-语言模型，采用MIT许可。该模型在任务如图像描述、目标检测、定位和分割中展示了强大的零样本和微调能力。 图1。图示展示了每个任务所表达的空间层次和语义细粒度水平。来源：Florence-2：推进多种视觉任务的统一表示。 该模型将图…...

编程日记 2024/7/10 15:54:25

AI提示词：AI辅导「数学作业」

辅导孩子作业对许多家长来说可能是一件头疼的事&#xff0c;但这部分工作可以在一定程度上交给AI来完成。 打开ChatGPT4,输入以下内容&#xff1a; # Role 数学辅导专家## Profile - author: 姜小尘 - version: 02 - LLM: Kimi - language: 中文 - description: 专门为小学生…...

编程日记 2024/7/10 15:46:16

odoo文档的安装

步骤 1: 安装必要的软件 确保你已经安装了Git和Python 3.6、3.7或3.8之一。 步骤 2: 克隆 Odoo 文档存储库 打开终端&#xff0c;然后使用Git克隆Odoo的文档存储库。 git clone https://github.com/odoo/documentation.git cd documentation步骤 3: 安装 Python 依赖项 …...

编程日记 2024/7/10 15:44:13

02STM32软件安装新建工程

STM32软件安装&新建工程 1.软件安装&#xff1a;1.1Keil5 MDK安装1.2安装器件支持包离线安装支持包在线安装支持包 1.3软件注册&#xff1a;1.4安装驱动STLINK驱动JLink驱动在此文件夹下USB转串口 2.新建工程2.1STM32开发方式&#xff1a;1.寄存器2.标准库3.HAL库 固件库压…...

编程日记 2024/7/10 15:43:11

社区6月月报 | Apache DolphinScheduler重要修复和优化记录

各位热爱Apache DolphinScheduler的小伙伴们&#xff0c;社区6月月报更新啦&#xff01;这里将记录Apache DolphinScheduler社区每月的重要更新&#xff0c;欢迎关注。 月度Merge Stars 感谢以下小伙伴上个月为Apache DolphinScheduler所做的精彩贡献&#xff08;排名不分先后…...

编程日记 2024/7/10 15:42:10

Docker 使用基础（2）—镜像

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;秒針を噛む—ずっと真夜中でいいのに。 0:34━━━━━━️&#x1f49f;──────── 4:20 &#x1f504; ◀️ ⏸ …...

编程日记 2024/7/10 15:40:07

SDMatte抠图实战教程：玻璃/薄纱/羽毛一键去背景，保姆级Web部署指南

SDMatte抠图实战教程&#xff1a;玻璃/薄纱/羽毛一键去背景&#xff0c;保姆级Web部署指南 1. 为什么选择SDMatte进行专业抠图 在日常设计工作中&#xff0c;抠图是最基础也最耗时的环节之一。特别是遇到玻璃制品、薄纱材质、羽毛边缘这类复杂对象时&#xff0c;传统Photosho…...

编程新知 2026/3/27 17:17:55

Dify 文本语意识别与智能补全实战指南

1. 认识Dify平台与文本语意识别 第一次接触Dify时&#xff0c;我就被它的"零代码"特性惊艳到了。这个平台把复杂的AI能力封装成了像搭积木一样简单的模块&#xff0c;特别是它的文本语意识别功能&#xff0c;能准确理解用户输入的半句话甚至几个关键词。比如用户输入…...

编程新知 2026/3/27 16:41:30

OpenClaw技能开发入门：为Qwen3-VL:30B编写图片翻译插件

OpenClaw技能开发入门&#xff1a;为Qwen3-VL:30B编写图片翻译插件 1. 为什么需要自定义技能开发 去年冬天&#xff0c;我接手了一个跨国团队的文档协作项目&#xff0c;每天需要处理大量包含多语言图片的飞书消息。当我在深夜第三次手动将日文截图粘贴到翻译软件时&#xff…...

编程新知 2026/3/27 14:44:45

用了Qoder写代码飞快，联调时却总因字段不一致返工，问题出在哪？

发版前夜&#xff0c;前端字段对不上后端接口&#xff0c;联调卡了整晚。这种场景在 AI Coding 普及后并不罕见&#xff0c;不少团队用了 Qoder 觉得生成快、跑通快&#xff0c;可一旦要改需求&#xff0c;系统就僵住了。看似工具背锅&#xff0c;其实根子往往不在速度&#xf…...

编程新知 2026/3/27 14:34:32

ESP WiFi中继器终极配置指南：从零开始打造智能无线网络扩展器

ESP WiFi中继器终极配置指南&#xff1a;从零开始打造智能无线网络扩展器 【免费下载链接】esp_wifi_repeater A full functional WiFi Repeater (correctly: a WiFi NAT Router) 项目地址: https://gitcode.com/gh_mirrors/es/esp_wifi_repeater 想要轻松扩展WiFi覆盖范…...

编程新知 2026/3/27 13:19:05

HTML2Canvas终极指南：快速将网页内容转为精美图片的完整方案

HTML2Canvas终极指南&#xff1a;快速将网页内容转为精美图片的完整方案 【免费下载链接】html2canvas Screenshots with JavaScript 项目地址: https://gitcode.com/gh_mirrors/ht/html2canvas HTML2Canvas是一款强大的JavaScript库&#xff0c;能够直接在浏览器中把网…...

编程新知 2026/3/27 12:56:53

GitHub Desktop中文汉化工具：让Git操作变得像聊天一样简单

GitHub Desktop中文汉化工具&#xff1a;让Git操作变得像聊天一样简单 【免费下载链接】GitHubDesktop2Chinese GithubDesktop语言本地化(汉化)工具 项目地址: https://gitcode.com/gh_mirrors/gi/GitHubDesktop2Chinese 还在为GitHub Desktop满屏的英文而头疼吗&#x…...

编程新知 2026/3/27 12:22:29

6_Harness驾驭工程可靠性层：混沌工程与服务可靠性管理

6_Harness驾驭工程可靠性层&#xff1a;混沌工程与服务可靠性管理 关键字&#xff1a; Chaos Engineering、混沌工程、SRM、服务可靠性管理、SLI、SLO、错误预算、韧性评分、故障模拟、事件响应、事后分析、韧性验证、自动故障注入、最小爆炸半径、Datadog、New Relic、Prometh…...

编程新知 2026/3/27 12:14:27

HunyuanVideo-Foley效果展示：AI生成的量子计算实验室环境音效（科技感）

HunyuanVideo-Foley效果展示&#xff1a;AI生成的量子计算实验室环境音效&#xff08;科技感&#xff09; 1. 核心能力概览 HunyuanVideo-Foley是一款专为视频与音效生成设计的AI模型&#xff0c;其私有部署镜像经过RTX 4090D 24GB显卡的深度优化。这个镜像最令人惊艳的能力之…...

编程新知 2026/3/27 10:43:49

OneAPI 百度文心一言ERNIE-Bot接入：千帆平台Key对接指南

OneAPI 百度文心一言ERNIE-Bot接入&#xff1a;千帆平台Key对接指南 安全提示&#xff1a;使用 root 用户初次登录系统后&#xff0c;务必修改默认密码 123456&#xff01; 1. 引言&#xff1a;为什么需要统一的API管理平台 在当今AI技术快速发展的时代&#xff0c;企业和开发…...

编程新知 2026/3/27 9:20:54