三个测试占位图链接地址

官网地址占位图片示例说明https://placeholder.comhttps://via.placeholder.com/400x200.png/3c9cff/fff400x200 - 宽高,3c9cff - 背景颜色,fff - 文本颜色https://dummyimage.comhttps://dummyimage.com/400x200/3c9cff/fff400x200 - 宽高,3c

- 阅读全文 -

H5 苹果系统底部安全区

先在头部加上下面的代码<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover" />然后就可以使用以下变量了,直接

- 阅读全文 -

Vue3等比例缩放图片组件

今天遇到一个需求,设计需要我无论什么情况都要保持图片比例不变,于是顺手写了个这个组件,组件基于vue3+ts,其实核心代码就是那几句css<template> <div style="position: relative" :style="ratioStr"> <div style="posit

- 阅读全文 -

写一套拟物风格的UI组件

准备写一套拟物风格的UI组件,先发篇文章后续慢慢补充吧😎大概以后会长这样:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=&

- 阅读全文 -

一个简单的数字滚动特效

直接贴代码食用Tips:此代码会读取将页面中所有带counter类名的元素,使用时设置 data-start(起始值) 和 data-end(结束值) 两个自定义属性值即可<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

- 阅读全文 -

pre溢出换行

white-space: pre-wrap; /* 保留空白符序列,并正常进行换行 */ white-space: -moz-pre-wrap; /* 兼容火狐浏览器 */ white-space: -webkit-pre-wrap; /* 兼容谷歌浏览器 */ white-space: -o-pre-wra

- 阅读全文 -

当一个元素出现在视口时添加css样式

假设只需要当元素出现在视口,无论出现多少的话,使用 IntersectionObserver 这个API即可满足需求,代码示例如下: // 创建一个 IntersectionObserver 实例 const observer = new IntersectionObserver(entries => { entries.forEach(entry => {

- 阅读全文 -

下拉菜单点击展开点击其他地方关闭

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

- 阅读全文 -

前端项目中的拖拽排序实现

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

- 阅读全文 -

CSS实现平滑滚动

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

- 阅读全文 -