优惠券 波浪 效果css
JavaScript学习笔记：操作CSS
## 操作CSS类 Element对象的classList属性是一个DOMTokenList对象，它是一个类数组对象，可迭代；有可以像Set对象那样添加和移除元素。 ``` ELement.classList.add('hidden'); Element.classList.remove('hidd ......
css+html案例
css+html案例 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co ......
Nginx代理静态界面资源后，浏览器端CSS、JS不起作用
现象说明： VUE项目打包后通过Nginx代理访问时，JS、CSS等资源都加载到浏览器端了，但是不起作用。 经过分析后，发现对于JS、CSS在浏览器端显示的资源类型为：Content-Type=text/plain。 发现Nginx没有配置：include mime.types; 当Nginx服务器 ......
css文字换行white-space属性
> 这个文章解释的很细致：[](https://juejin.cn/post/7123521272964710436) white-space属性被指定为从下面的值列表中选择的单个关键字。 - normal 连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子 (line boxe ......
HTML & CSS 学习总结
@[TOC](HTML & CSS 学习总结) # HTML HTML（超文本标记语言）是一种用于创建网页的标记语言。它允许我们使用标签来描述网页的结构和内容。 简单示例（如何使用标签来创建一个简单的网页）： ```html 我的网页 Hello, World! 这是一级标题 ``` 在上面的示例中 ......
css小技巧
1. 文字水平垂直居中 ###### 文字行高 = 盒子高 ``` 文字垂直居中 ``` ``` div { height: 40px; width: 250px; font-size: 16px; background-color: aqua; line-height: 40px; text-al ......
实现背景透明，文字不透明的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; /* 消除边界*/ padding: 0; } body{ position: rela ......
css常用选择器
1.常用子元素选择器-选择特定子元素 :nth-of-type(n) 选择其父级下的第n个元素 例如：p:nth-child(2):last-of-type 选择其父级下的最后一个元素:nth-child(n) 选择其父级下的第n个子元素:nth-last-child(n) 选择其父级下的第n个子元 ......
CSS 如何根据背景色自动切换黑白文字？
在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样： 一、CSS 滤镜实现 使用滤镜对文字单独处理，所以需要额外一层标签。然后容器和文字用同一种颜色表示，目的是让文字颜色和背 ......
vue+vant实现浮动导航栏点击定位到模块，且选中效果随滚动切换
1.主页面中导入浮动导航栏（使用vant的粘性布局sticky组件，使首屏下方的导航栏随页面滚动浮动在想要的位置）： <template> <div class="app-container"> <!-- 浮动导航 --> <van-sticky style=" z-index: 1; positi ......
web worker进程和线程的区别，Chrome 中有哪些常⻅进程，如果我有⼀个耗时很⻓的同步计算任务，如何让 JS 代码达到多线程并发执⾏的效果
进程（Process）和线程（Thread）都是操作系统中用于多任务处理的概念。简单地说，一个进程就是一个程序的执行空间，而一个线程则是在执行空间内独立运行的执行路径。 区别： 1. 进程是系统分配资源的最小单位，线程是操作系统调度的最小单位。 2. 各个进程之间是独立的，各个线程之间共享一些资源。 ......
浅析CSS实现超过3行折叠并显示...查看详情
要实现效果如下：尾部带查看详情，前面有三个点省略号。之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，然后 append 上三个点和查看详情。vue-clamp 就是这么做的，包括很多博客也是这么讲的，但是讲真，如果是个列表，这种不断的判断，肯定 ......
2023-06-15 css伪类before、after制作文字两边横线
<div class="box">测试</div> ··· .box{ color: #ccc; text-align: center; position: relative; &::after { position: absolute; left: 24rpx; top: 52%; content ......
手势导航--快捷菜单左右滑动无效果
bug问题：设置--系统导航--手势导航（设置） 现象：上滑菜单无法左右滑动 解决方案： 修改文档： vendor/mediatek/proprietary/packages/apps/MtkSettings/src/com/android/settings/gestures/GestureNavi ......
CSS(语义化标签、多媒体标签、新表单元素、属性选择器、结构伪类选择器、伪元素选择器、盒子模型、滤镜、calc函数、过渡)
一、HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 1 语义化标签 （★★） 以前布局，我们基本用 div 来做。 ......
CSS的基本使用
## 1. 初始css ### 1.1 引入方式 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。有三种： - 行内样式表（在 HTML 元素内部） ```html 学习HTML好简单 ``` - 内部样式表（位于 `` 标签内部） ```html ``` - 外部样式表 ```html ......
vue+css: 引用的组件快速改变滚动条样式
在a组件页面内有b组件，b组件产生的滚动条太丑不好看但是又不想改变b组件（b组件公共用的地方很多）又不想专门复制份在此基础上改。 只要在使用的组件上增加css代码即可同时让组件内滚动条生效，原理是因为此滚动条相当于未定义类的当前组件全局。所以可以直接使用并生效 comp.vue <style sco ......
【unity】TextMeshPro文本抖动效果
# 文本抖动效果 ## 前言 在部分电子游戏中，当角色处于狂喜、紧张或恐惧等激动情绪时，角色对话框中的文字会触发抖动等效果，这为游戏增色不少，如下。 ![image](https://img2023.cnblogs.com/blog/2346211/202306/2346211-2023061417 ......
css边框斜角
为实现下面图形形状 <style> .box{width:200px;height:100px;} </style> <div class="box" ></div> 1、利用linear-gradient .box{ background: linear-gradient(135deg, tran ......
vue3 css ts 双重弹跳加载动画
/双重弹跳加载动画 */ 效果如同页面 https://codepen.io/yjx123/pen/zYMvbML ``` ``` ......
直播源码开发，vue 简单的tab切换滑动效果
直播源码开发，vue 简单的tab切换滑动效果 js部分： 利用computed属性计算位移距离 data() { return { value: '0' }; }, computed: { sty() { let num = Number(this.value) * 100 return `tra ......
CSS动画和过渡的区别
CSS动画和过渡都是用来实现网页元素的动态效果，但它们在实现方式和应用场景上有一些区别。 CSS过渡（CSS Transitions）是在元素状态改变时实现平滑过渡效果的一种机制。过渡通过指定元素的属性变化，使元素从一个状态平滑地过渡到另一个状态。过渡通常用于响应用户操作、交互效果或状态变化，可以控 ......
CSS选择器的优先级和权重。
**定义：CSS选择器的优先级和权重是用来确定当多个选择器应用于同一个元素时，哪个选择器的规则将会生效。以下是CSS选择器优先级和权重的解释：** **CSS选择器的优先级：** 1.内联样式：应用于HTML元素内部的style属性，具有最高的优先级。如 2.ID选择器：通过元素的id属性选择元素， ......
CSS常用属性
## 颜色 1. **RGB** （红，绿，蓝）三种颜色的集合，最低值是0（十六进制00）到最高值255（十六进制FF） 2. **HSL** H色相（0-360），S饱和度（百分比），L亮度（百分比） 3. （不）透明度 **rgba、hsla** （新版浏览器可不写a，直接写4个值） ## li ......
用纯HTML，JS，CSS实现横向滚动标签页
### 前言 前不久，在我的一个项目中，需要展示一个横向滚动的标签页，它支持鼠标横向拖动和点击切换。在实现的过程中，我发现这个小功能需要同时用到前端的三辆马车，但是实现难度不高，而且最终效果还不错，是个难得的初学者项目，于是萌生了写这篇文章的想法，希望对初学者有所帮助。同时为了避免初学者学习框架，我 ......
CSS中常见的场景实现
## 如何实现两栏布局 实现两栏布局一般指的是左边固定,右边自适应,这里给出几个案例给大家参考 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ba3f53026e842dfa8690e286bf6c690~tplv-k ......
css实现向上滚动动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content ......