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

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | BackgroundSlider（背景滑块）

news 来源：原创 2025/8/19 6:07:00

📅 我们继续 50 个小项目挑战！—— BackgroundSlider组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

在这里插入图片描述

使用 Vue 3 的 Composition API 和 <script setup> 语法结合 TailwindCSS 构建一个全屏、背景模糊变暗、中间高亮显示的图片轮播组件。用户可以通过左右按钮切换图片，并带有缩放动画效果。

🎯 组件目标

展示一组全屏背景图
每张图中央有“高亮”展示区域
支持左右按钮切换图片
添加缩放动画提升视觉体验
使用 TailwindCSS 快速构建现代 UI 界面

⚙️ 技术实现点

技术点	描述
Vue 3 Composition API (`<script setup>`)	使用响应式变量管理组件状态
`ref` 响应式变量	控制当前图片索引与动画状态
`@click` 事件绑定	切换图片逻辑
`:class` 和 `:style` 动态绑定	控制背景图和动画效果
TailwindCSS 过渡与动画	构建美观的过渡动画
`@transitionend` 事件监听	监听动画结束以控制缩放重置

🧱 组件实现

模板结构 `<template>`

<template><div class="relative h-screen overflow-hidden text-white"><!-- 背景图片变暗效果 --><divclass="absolute inset-0 origin-center bg-cover bg-center brightness-50 transition-transform duration-500 ease-in-out":class="imageList[currentIndex].className":style="{ transform: isAnimating ? 'scale(1.2)' : 'scale(1)' }"@transitionend="isAnimating = false"></div><!-- 中间亮框 --><div class="absolute inset-0 flex items-center justify-center"><divclass="relative h-3/4 w-3/4 bg-cover bg-center brightness-100":class="imageList[currentIndex].className"></div></div><!-- 切换按钮 --><button@click="prevImage"class="absolute top-1/2 left-4 -translate-y-1/2 rounded-full bg-white/30 p-4 text-white transition-all hover:bg-white/50">&lt;</button><button@click="nextImage"class="absolute top-1/2 right-4 -translate-y-1/2 rounded-full bg-white/30 p-4 text-white transition-all hover:bg-white/50">&gt;</button></div>
</template>

脚本逻辑 `<script setup>`

<script setup>
import { ref } from 'vue'const currentIndex = ref(0)
const isAnimating = ref(false)const imageList = ref([{id: 1,className:'bg-[url(https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80)]',},{id: 2,className:'bg-[url(https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80)]',},{id: 3,className:'bg-[url(https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80)]',},
])const nextImage = () => {isAnimating.value = truecurrentIndex.value = (currentIndex.value + 1) % imageList.value.length
}const prevImage = () => {isAnimating.value = truecurrentIndex.value =(currentIndex.value - 1 + imageList.value.length) % imageList.value.length
}
</script>

🔍 重点效果实现

✅ 图片切换逻辑

通过 currentIndex 来决定当前显示哪一张图片：

const nextImage = () => {isAnimating.value = truecurrentIndex.value = (currentIndex.value + 1) % imageList.value.length
}

使用模运算 % 来循环数组。

💡 缩放动画实现

我们为背景图添加了动态 transform 样式和 transition：

:style="{ transform: isAnimating ? 'scale(1.2)' : 'scale(1)' }"

并在点击按钮时设置 isAnimating = true，动画结束后自动恢复。

同时监听 @transitionend 来关闭动画标志：

@transitionend="isAnimating = false"

🖼️ 图片背景设置

每张图片都使用 Tailwind 的 bg-[url(...)] 类来设置背景图路径：

className: 'bg-[url(https://...)]'

这种方式非常灵活，且无需额外引入图片资源。

🎨 TailwindCSS 样式重点讲解

类名	作用
`h-screen`, `overflow-hidden`	全屏高度并隐藏溢出内容
`absolute inset-0`	铺满整个父容器
`bg-cover`, `bg-center`	图片自适应铺满并居中
`brightness-50`, `brightness-100`	调整明暗对比度
`origin-center`	设置缩放中心点
`transition-transform duration-500 ease-in-out`	添加平滑的缩放动画
`flex items-center justify-center`	居中布局
`hover:bg-white/50`	鼠标悬停改变透明度
`rounded-full`	圆形按钮样式

这些 Tailwind 工具类帮助我们快速构建了一个极具视觉冲击力的全屏轮播组件。

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{id: 18,title: 'Background Slider',image: 'https://50projects50days.com/img/projects-img/18-background-slider.png',link: 'BackgroundSlider',},

router/index.js 中添加路由选项：

{path: '/BackgroundSlider',name: 'BackgroundSlider',component: () => import('@/projects/BackgroundSlider.vue'),},

🏁 总结

涵盖了 Vue 3 的响应式系统、动画控制、按钮交互以及 TailwindCSS 的强大样式能力。它非常适合用于网站主页、作品集展示、产品介绍等需要突出视觉表现的场景。

你可以进一步扩展的功能包括：

自动播放功能（定时切换）
添加底部导航圆点指示器
支持键盘左右键切换
支持移动端滑动手势切换
支持主题切换（暗色/亮色）

👉 下一篇，我们将完成ThemeClock组件，非常简约的始终组件可以切换主题以及显示时间。🚀

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | BackgroundSlider（背景滑块）

📅 我们继续 50 个小项目挑战！—— BackgroundSlider组件仓库地址：https://github.com/SunACong/50-vue-projects 项目预览地址：https://50-vue-projects.vercel.app/ 使用 Vue 3 的 Composition API 和 <script setup> …...

编程日记 2025/8/19 6:07:00

Wpf的Binding

前言 wpf的Binding就像一个桥梁，它的作用就是连接逻辑层与界面层，既能够把逻辑层的数据搬到界面层展示，又能将界面层的数据更改后传递到逻辑层，Binding的数据来源就是Binding的源，数据展示的地方就是Binding的目标。 …...

编程日记 2025/8/19 6:04:47

Redis—持久化

持久化在mysql当中，有4个比较关心的特性，分别是原子性、一致性、隔离性和持久性。这里的持久性和持久化是一回事。我们该如何判断是否具有持久性呢？答案就是看重启进程或者主机之后，数据是否存在。当我们把数据存储在硬盘上是就…...

编程日记 2025/8/19 6:06:59

Spring Boot中日志管理与异常处理

以下是Spring Boot中日志管理与异常处理的系统化实践指南，结合最佳实践与核心配置，确保应用健壮性与可维护性。 📊 一、日志管理核心配置默认框架与级别控制 Logback 是Spring Boot默认日志框架，通过application.yml快速配置&…...

编程日记 2025/8/15 5:46:04

基于MATLAB的BP神经网络的心电图分类方法应用

说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景心电图（ECG）是临床诊断心血管疾病的重要工具，能够反映心脏电活动的周期性变化。…...

编程日记 2025/8/17 20:01:11

【笔记】Docker 配置阿里云镜像加速（公共地址即开即用，无需手动创建实例）

2025年06月25日记【好用但慎用】Windows 系统中将所有 WSL 发行版从 C 盘迁移到非系统盘的完整笔记（附异常处理）-CSDN博客【笔记】解决 WSL 迁移后 Docker 出现 “starting services: initializing Docker API Proxy: setting up docker ap” 问题…...

编程日记 2025/8/19 4:36:16

Java 中LinkedList 总结

406.根据身高重建队列力扣题目链接(opens new window) 假设有打乱顺序的一群人站成一个队列，数组 people 表示队列中一些人的属性（不一定按顺序）。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi ，前面正好有 ki 个身高…...

编程日记 2025/8/18 3:22:48

微信小程序 / UNIAPP --- 阻止小程序返回（顶部导航栏返回、左 / 右滑手势、安卓物理返回键和调用 navigateBack 接口）

目录理解page-container的原理设置禁止点击遮盖层关闭？ 阻止左滑返回理解page-container的原理 page-container组件的所有属性，最重要的是show值。在页面上引入这个组件后，若show值为true，页面上所有各种方式触发的返回操作…...

编程日记 2025/8/19 6:06:59

Linux基本指令篇 —— mv指令

在Windows中我们经常使用CtrlX和CtrlV将一个地方的文件或目录移动到另一个地方，我们若是要在Linux当中完成此操作，则需要使用mv指令。mv 是 Linux 系统中用于移动或重命名文件和目录的基本命令之一，是 "move" 的缩写。下面将详细介…...

编程日记 2025/8/19 6:04:51

基于STM32的智能节能风扇的设计

基于STM32的智能节能风扇的设计内容:1.摘要本设计旨在解决传统风扇能耗高、功能单一的问题，提出一种基于STM32的智能节能风扇。通过结合温度传感器、人体红外传感器等多种传感器，利用STM32微控制器实现对风扇的智能控制。经过实际测试，该智…...

编程日记 2025/8/16 15:53:56

HCIA-IP路由基础

前言：本博客仅作记录学习使用，部分图片出自网络，如有侵犯您的权益，请联系删除本篇笔记是根据B站上的视频教程整理而成，感谢UP主的精彩讲解！如果需要了解更多细节，可以参考以下视频&#xf…...

编程日记 2025/8/18 10:06:54

Linux 内存管理之page cache

文章目录一、page cache1.1 File-backed pages和Anonymous pages1.2 page cache/slab cache1.3 读/写路径1.4 脏页回写1.5 drop_caches1.6 时间局部性与空间局部性1.7 Page Cache 的两种类型1.8 关键数据结构二、Page Cache 的产生2.1 Buffered I/O（标准 I/O&…...

编程日记 2025/8/18 16:38:18

uniApp实战四：网络请求封装

文章目录 1.最终效果预览2.请求封装3.创建config配置文件4.创建api请求5.页面调用说明：当前笔记基于Vue3开发，HbuilderX版本4.66 1.最终效果预览 2.请求封装在util/request.js下创建js文件，代码如下 import config from /configconst tim…...

编程日记 2025/8/16 5:47:40

sentinel 自定义 dashboard 用户名密码

默认情况下，sentinel dashboard 用户名密码为 sentinel / sentinel ，这里我使用重写镜像的方式： // 定义 Dockerfile $ cat Dockerfile # 基于现有 Sentinel Dashboard 镜像 FROM bladex/sentinel-dashboard:1.8.4# 重新定义 ENTRYPOINT&…...

编程日记 2025/8/19 6:06:58

Fisco Bcos学习 - 搭建星形拓扑组网

文章目录一、前言二、环境准备与依赖安装2.1 系统要求2.2 依赖安装三、星形拓扑设计与节点规划四、使用build_chain.sh构建星形拓扑4.1 创建操作目录并获取脚本4.2 生成星形拓扑配置文件4.3 执行构建命令4.4 查看生成的节点文件五、启动节点与共识验证5.1 启动所有节点5.2 查…...

编程日记 2025/8/16 5:49:40

深度学习入门--（二）感知机

一.感知机是什么简单的输入和输出，感觉（输入），知道（输出，作出反应） 二.简单逻辑电路 2.1与门 import numpy as np #AND def AND(X1,X2):w1,w2,thera0.5,0.5,0.7tmpX1*w1X2*w2if tmp>the…...

编程日记 2025/8/18 22:52:19

LeetCode 3298.统计重新排列后包含另一个字符串的子字符串数目2

给你两个字符串 word1 和 word2 。如果一个字符串 x 重新排列后，word2 是重排字符串的前缀 ，那么我们称字符串 x 是合法的。请你返回 word1 中合法子字符串的数目。注意 ，这个问题中的内存限制比其他题目要小 ，所以你…...

编程日记 2025/8/19 6:04:52

【nRF52832】【环境搭建 1】【ubuntu下搭建nRF52832开发环境】

本文讲述如何在 ubuntu 22.04 下开发 nRF52832. host 环境说明: $ uname -a Linux leo 6.8.0-60-generic #63~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Tue Apr 22 19:00:15 UTC 2 x86_64 x86_64 x86_64 GNU/Linux1. 安装软件 sudo apt install gcc-arm-none-eabisudo apt-get i…...

编程日记 2025/8/18 14:48:19

Django

1. Django 和 Tornado 的关系 Django 是一个高级 Python Web 框架，它鼓励快速开发和干净、实用的设计。Django 遵循 MVC（模型-视图-控制器）设计模式的一个变种，称为 MTV（模型-模板-视图）。Django 框架提供…...

编程日记 2025/8/16 5:52:04

51c嵌入式~CAN~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/14016935 一、CAN总线常见信号干扰问题定位干扰原因当总线有干扰时，有经验的工程师能够迅速定位，但是对于新手来说却很麻烦。造成总线干扰的原因有很多，比如通过电磁辐射耦合到通…...

编程日记 2025/8/18 19:26:10

【iOS】iOS崩溃总结

【iOS】iOS崩溃总结一、前言之前写了一篇博文《【Flutter】程序报错导致的灰屏总结》，浏览量、收藏率和点赞量还挺高，还被收录了，就想着总结一下iOS崩溃，这个也是在iOS面试中经常被问到的。在 iOS 开发过程中，导致…...

编程日记 2025/8/16 5:52:54

npm 报错：“无法加载文件 ...npm.ps1，因为在此系统上禁止运行脚本” 解决方案（附执行策略说明）

在使用 npm 命令时，部分 Windows 用户可能会遇到如下错误： npm : 无法加载文件 D:\nvm4w\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https://go.microsoft.com/fwlink/?LinkID135170 中的 about_Executi…...

编程日记 2025/8/16 5:48:18

AES加密：为你的PDF文档加上一道钢铁防线

在数字化时代，确保敏感数据的安全性至关重要。加密技术在保护信息免受未经授权访问方面起着关键作用。而在众多加密标准中，AES（高级加密标准）因其强大的安全性和广泛的应用而脱颖而出。那么，AES加密如何应用到PDF文档中…...

编程日记 2025/8/18 1:43:41

2025学年湖北省职业院校技能大赛 “信息安全管理与评估”赛项样题卷（一）

2025学年湖北省职业院校技能大赛 “信息安全管理与评估”赛项样题卷（一） 第一部分：网络平台搭建与设备安全防护任务书DCRS:DCFW:DCWS:WAF: 第二部分：网络安全事件响应、数字取证调查、应用程序安全任务书任务 1：应急响…...

编程日记 2025/8/18 16:46:57

1688商品发布API：自动化上架与信息同步

一、1688商品发布API的核心功能与技术架构 1.1 API功能全景 1688商品发布API是1688开放平台的核心组件之一，支持商品信息的自动化发布、编辑、上下架及库存同步。其核心功能包括： 商品信息管理：支持商品标题、描述、价格、库存、SKU&#…...

编程日记 2025/8/17 9:04:45

鸿蒙ArkUI---基础组件Tabs（Tabbar）

基础页面组件 Tabs 作用： 快速创建Tabbar 个人理解： 快速的创建Tabar。效果图： 代码：interface TabItem {icon: Resource; //未选中activeIcon: Resource; //选中name: string; //文字 }Entry Component struct Index {// st…...

编程日记 2025/8/18 23:38:04

50. Pow(x, n)快速幂算法

实现 pow(x, n) ，即计算 x 的整数 n 次幂函数（即，xn ）。此函数应将 x 作为浮点数（意味着它可以是十进制数）和 n 作为整数（可以是正数、负数或零）一起使用。快速幂（Expo…...

编程日记 2025/8/18 22:44:24

Python函数

三.函数进阶 0.定义函数三要素：函数名，参数，返回值，其中只有函数名是必须要的，参数，返回值可以没有语法： def 函数名（参数）： 函数体 return 返回值 1.…...

编程日记 2025/8/18 16:26:50

7.Spring框架

# spring框架Spring3.0开启了纯注解开发模式，使用Java类替代配置文件，开启了Spring快速开发赛道## 为什么要使用 **Spring** 框架？ Spring 是一个轻量级应用框架，它提供了 IoC 和 AOP 这两个核心的功能。它的核心目的是为了…...

编程日记 2025/8/17 21:45:53

计算机网络-----详解HTTP协议

✏️1. 什么是HTTP HTTP (全称为 “超⽂本传输协议”) 是⼀种应⽤⾮常⼴泛的应⽤层协议（所谓 “超⽂本” 的含义, 就是传输的内容不仅仅是⽂本(⽐如 html, css 这个就是⽂本), 还可以是⼀些其他的资源, ⽐如图⽚, 视频, ⾳频等⼆进制的数据）。 HTTP 诞⽣…...

编程日记 2025/8/17 14:31:17

解决npm安装依赖报错ERESOLVE unable to resolve dependency tree

在使用 npm 安装项目依赖时，有时会遇到错误信息 “npm ERR! code ERESOLVE”，该错误通常发生在依赖版本冲突或者依赖解析问题时。本文将详细介绍出现这个错误的原因，并提供解决方法，确保正确安装项目依赖并避免该错误的发生。一…...

编程日记 2025/8/16 12:51:04

微信小程序安卓手机输入框文字飘出输入框

最近在开发微信小程序遇到一个问题，安卓手机输入框文字飘出输入框，但是ios系统的手机则正常。使用情景：做了一个弹窗，弹窗内是表单，需要填写一些信息，但是在填写信息时光标不显示，输入的内容飘…...

编程日记 2025/8/18 14:51:57

python网络自动化-数据格式与数据建模语言

数据格式在Python网络运维自动化最基本是JSON、YAML和XML这3种数据格式。除了这3种常用的数据格式，还有一种深受网络工程师喜爱且在网络运维自动化中常用的数据承载方式——表格需要注意的是JSON的键必须用双引号包裹，JSON的对象数据键值对的值和数组…...

编程日记 2025/8/16 4:36:57

C++ 中的 atan2 函数：深入解析与应用

在 C 编程中，数学计算是许多应用场景的核心，例如几何问题、物理模拟和游戏开发等。atan2 函数作为数学库中的一个重要工具，提供了比普通反正切函数更强大的功能。本文将深入解析 atan2 函数的原理、使用方法以及实际应用场景，并通…...

编程日记 2025/8/17 14:05:13

云计算-Azure Functions ：构建事件驱动的云原生应用报告

云计算导论课程研究报告 Azure Functions ：构建事件驱动的云原生应用摘要： Azure Functions 是一种无服务器解决方案，是由微软 Azure 平台提供的，可以使用户专注于业务逻辑，减少代码的编写，减少需要维护…...

编程日记 2025/8/17 4:52:29

【笔记——李沐动手学深度学习】2.3 线性代数

2.3.1 标量标量由只有一个元素的张量表示。下面的代码将实例化两个标量，并执行一些熟悉的算术运算，即加法、减、乘法、除法和指数。 2.3.2 向量人们通过一维张量表示向量。一般来说，张量可以具有任意长度，取决于机器的内存限…...

编程日记 2025/8/16 4:36:39

多个 Job 并发运行时共享配置文件导致上下文污染，固化 Jenkins Job 上下文

基于 context.py 固化 Jenkins Job 上下文的完整方案，适用于你当前的工作流（Python Jenkins Pipeline），解决： 多个 Job 并发运行时共享配置文件导致上下文污染；读取环境变量或 JSON 文件时被其他 Job 修改…...

编程日记 2025/8/16 4:36:54

github 上的php项目

github 上的php项目项目的网址 （Loong1996/LikeGirlSite: 情侣网站、情侣网页、恋爱记录网站） # 修改 # admin/Config_DB.php//localhost 为数据库地址一般使用默认的即可或（127.0.0.1） $db_address "mysql_php";/…...

编程日记 2025/8/17 21:45:22

防火墙快速管理软件，66K超小巧

软件介绍今天为大家推荐一款轻量级的Windows防火墙管理工具，这款工具能帮助用户快速开启或关闭系统防火墙功能，操作比系统原生设置更加便捷高效。软件优势相比通过系统设置层层点击的操作方式，这款仅66KB大小的微型工具只需单击按钮…...

编程日记 2025/8/16 5:01:25

入门级STM32F103C8T6无人机遥控(原理图)

一、STM32主控电路一、STM32 主控电路把 STM32 想象成 “机器人的大脑”，核心电路是 “大脑的基础保障”：让大脑有电、有心跳（时钟 ）、能复活（复位 ）。 1. 电源引脚（VDD、VDDA、VSS 等 &#…...

编程日记 2025/8/18 15:46:32

无人机灯光驱动模块技术解析

一、运行方式 1. 核心流程： 指令接收：灯光控制模块通过无线通信链路（如WiFi, 数传电台，或专用的表演控制链路）接收来自地面站或中央控制系统的灯光指令。指令包含：颜色（RGB/RGBW值&#xff0…...

编程日记 2025/8/18 19:22:47

React + Umi（Umijs/Max）搭建项目及配置

文章标题 01 环境准备02 快速构建2.1 参数选项2.2 umix 还是 umijs/max2.3 使用 pnpm （推荐）2.4 使用 npm 和 yarn2.5 启动项目2.6 启用 Prettier（可选）2.7 打包部署发布 03 Tailwind CSS 插件（可选）3.1 安…...

编程日记 2025/8/18 21:27:40

React 第六十四节Router中HashRouter的使用详细介绍及案例分析

前言 HashRouter 是 React Router 提供的一种路由实现方案，它使用 URL 的 hash 部分（# 后面的内容）来实现客户端路由功能。一、HashRouter 的核心用途客户端路由：在不刷新页面的情况下管理应用导航兼容性：支持不支…...

编程日记 2025/8/15 17:54:38

Linux RDMA网络配置手册

一、配置前准备工作在进行 RDMA 网络配置之前，请确保以下准备工作已完成： 硬件环境确保服务器支持 RDMA 功能，例如支持 InfiniBand 或 RoCE（RDMA over Converged Ethernet）的网卡。确保网络交换设备支持 RDMA 协议…...

编程日记 2025/8/15 22:34:51

sentinel与seata组件在微服务中的基本作用

微服务基础内容： 在微服务中，首先学习了微服务的横向拆分与纵向拆分，纵向拆分指按照功能拆分模块，横向拆分指将高复用的模块单独拆分，使纵向拆分的模块去调用这部分内容。学习了基本拆分后，需要知道微服…...

编程日记 2025/8/17 6:57:53

Springboot 集成多数据源pgSql+mysql,启动报错

一.错误信息： 2025-06-25 20:25:50.870 ERROR [ai-manage-center,,] --- [ruid-ConnectionPool-Create-1057240219] DruidDataSource : create connection SQLException, url: jdbc:postgresql://10.10.60.227:5432/ai_dify1?sslmodedisable&currentSchemapub…...

编程日记 2025/8/17 21:09:23

南宫28NG相信品牌力量/Vue 3 中的组合式 API（Composition API）进阶实战

南宫28NG相信品牌力量【罔丨止：MGTY.PW】点击此处复制到浏览器打开随着 Vue 3 的普及，Composition API 已成为现代 Vue 开发的主流。本节我们将深入掌握组合式 API 的进阶用法，涵盖响应式工具、生命周期钩子封装、自定义逻辑抽离等关键技术…...

编程日记 2025/8/19 3:20:06

实战使用 Docker Compose 搭建 Redis Cluster 集群

文章目录前言技术积累Docker Compose简介Redis Cluster简介Redis Cluster 解决的问题实战演示部署环境创建目录编写Redis配置文件编写Docker-Compose.yml执行yml文件，启动容器查看容器状态创建集群验证集群集群数据验证总结前言随着互联网技术的发展&#xff…...

编程日记 2025/8/18 14:57:04

Tauri(2.5.1)+Leptos(0.8.2)开发自用桌面小程序--DeepSeek辅助编程（俄罗斯方块）

在之前工作基础上（Tauri(2.5.1)Leptos(0.8.2)开发自用桌面小程序-CSDN博客），继续进行自用桌面小程序的开发，这次完全使用DeepSeek辅助编程做一个俄罗斯方块游戏，大部分代码由DeepSeek自主完成，Bug扔给DeepS…...

编程日记 2025/8/17 10:01:53

flex布局实例：把色子放进盒子里

目录一、flex布局实例：把色子放进盒子里 1、基础样式二、justify-content 属性三、flex-direction 属性四、align-items 属性五、flex-wrap 属性二、flex布局应用到常见场景非常详细的讲解flex布局，看一看，练一练！ …...

编程日记 2025/8/18 19:52:48