Fish's Blog

<style> /* 下拉菜单按钮样式 */ .dropbtn { background-color: #ffffff; color: #333333; padding: 10px; font-size: 16px; border: none; cursor: pointer; } /* 下拉菜单容器样式（隐藏） */

- 阅读全文 -

在前端项目中，拖拽排序是一个常见的需求。本文将详细讲解如何实现拖拽排序。实现步骤首先，需要给每个可拖拽的元素添加一个 draggable 属性，值为 true，表示该元素可以被拖拽。接着，需要监听每个可拖拽元素的 dragstart 事件，该事件在拖拽开始时触发。在该事件的回调函数中，需要设置拖拽数据，可以使用 event.dataTransfer.setData() 方法。然后，需要监听每个可拖

- 阅读全文 -

什么是平滑滚动？平滑滚动是指当用户点击页面内的链接时，页面会平滑地滚动到目标位置，而不是瞬间跳转。如何实现平滑滚动？实现平滑滚动的关键是使用CSS属性scroll-behavior。将scroll-behavior设置为smooth即可实现平滑滚动。scroll-behavior: smooth;

- 阅读全文 -

// vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, css: { loaderOptions: { sass: {

- 阅读全文 -

animation-fill-mode: forwards;

- 阅读全文 -

在 vue 项目的开发过程，会遇到在父组件中想要修改子组件的样式，如：官网地址：Scoped CSS | Vue Loader (vuejs.org)父组件：father.vue<script> import child from "./child.vue" </script> <template> <child cla

- 阅读全文 -

首先简单介绍一下 : 和 :: ：: 指的是伪类，例如:visited或:hover:: 用于伪元素，例如::first-of-type或::after下面让我们深入研究一些示例。“伪”是什么意思？伪这个词的英文定义是“假的”或“不真实的”。那么伪类和伪元素表示什么意思呢？伪类和伪元素不手动写入HTML，也不会出现在DOM（或文档树）中，而由CSS创建！什么是伪类？伪类允许你根据页面上编写的HTM

- 阅读全文 -

效果演示HTML代码<div class="container-slider"> <!-- Slider Container with images... --> <div class="slides"></div> <!-- Previous Button

- 阅读全文 -

一、初识Grid布局 网格布局（Grid）是强大的CSS布局方案，它将网页划分为一个个的网格，通过任意组合这些网格来实现不同需求的布局方式。 上图这种布局，Grid可以轻松的实现（代码量少）Grid布局与Flex布局的相似处： 都是容器 + 项目，都是可以指定项目在容器内部的位置。 Grid布局与Flex布局的不同处： Flex布局是轴线布局，只能指定项目针对轴线的位置；Grid布局则是将容器分成

- 阅读全文 -

效果展示HTML代码<div class="center"> <div class="mountains"></div> <div class="train"> <div class="engine-front">

- 阅读全文 -