CSS
How to fix Tailwind CSS colors not work in Next.js All In One
How to fix Tailwind CSS colors not work in Next.js All In One
Tailwind CSS & Next.js 13
......
熟练掌握并充分利用CSS3的新特性，持续更新中。。。
1.1 尝试新颖的CSS3特性 首先，我们来看一个具体的案例。 https://code.juejin.cn/pen/7277536985772720139 1.2 CSS3新特性简介和浏览器支持情况 1、新特性简介： 1）强大的CSS3选择器 2）抛弃图片的视觉效果 3）盒模型变化(多列布局和弹性 ......
Css开发：解决在less中动画效果失效的问题
一、问题如下 在vue的style样式中使用了less，而在less中直接使用普通的动画效果时效果会失效，无法对样式呈现出应有的效果。 这个是在less编译为css时，添加的动画效果和其他的附加样式一同被进行了编译操作，导致原本定义的动画名称无法被查到，所以不生效。 要解决这个问题，就得绕过动画名称 ......
界面控件DevExpress WinForms HTML-CSS模板：预设计UI模板加速.NET应用开发
在过去的一年里，DevExpress官方引入了两个强大的功能来加速/简化.NET桌面应用的开发，当一起使用时，您可以创建优雅/个性化的用户界面，减少重复的代码，从而节省更多的项目时间。 DevExpress WinForms有180+组件和UI库，能为Windows Forms平台创建具有影响力的业 ......
PostCSS received undefined instead of CSS string
问题 npm run serve启动项目后，报错Syntax Error: Error: PostCSS received undefined instead of CSS string 解决 node-sass 版本兼容问题导致,按照应用使用的node-sass版本 切换（可使用nvm）到对应的n ......
CSS中的变量
前言 在 CSS 中，有很多需要反复使用的属性值，如果每个使用的地方都直接写死这个值，而没有使用变量去定义这个值的话，后期修改起来会很麻烦。有很多人忽略了在 CSS 中也可以定义变量这个事情，相信你会爱上它 ！ CSS 使用变量有很多好处: 可以减少样式代码的重复性，增加样式代码的扩展性和灵活性 声 ......
动态修改el-input样式，css变量形式外层修改input样式
背景：正常我们在修改样式的时候，直接在样式表里写死，但是如果我们想要动态的修改样式，例如el-input字体颜色时，我们需要修改的实际是.el-input__inner这个样式的color，既然是动态，我们就不能在样式表里写死了，而是使用CSS变量修改。 一、CSS变量是什么？ 1.css变量 注意 ......
全栈工程师必须要掌握的前端CSS技能
作为一名全栈工程师，在日常的工作中，可能更侧重于后端开发，如：C#，Java，SQL ，Python等，对前端的知识则不太精通。在一些比较完善的公司或者项目中，一般会搭配前端工程师，UI工程师等，来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师，在一些小型项目或者初创公... ......
CSS之实现视频背景
1.新增<video> <video class="video-background" autoplay muted loop> <source src="../../assets/starry-sky.mp4" type="video/mp4" /> Your browser does not s ......
CSS
CSS (Cascading Style Sheets，层叠样式表） 是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css 选择器通常是您需要改变样式的 HTML 元素 每条声明由一个属性和一个值组成 CSS声明总是以 ......
css中文字太多显示方法
第一种方法：“溢出省略号”，即当文字超出一定宽度时，将其省略，并显示“...”。p { overflow: hidden; /* 将超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ white-space: nowrap; /* 禁止换行 */ } 第二种 ......
css基础
CSS引用 如何在html中使用css?有三种方式 外链式 通过在head标签里 使用link引入写好的css文件(推荐使用) 内嵌式 head标签里style标签 ,在style里通过 行内式 写在标签的开始位置通过style属性设置样式(不推荐使用) 选择器 选择器分为三大类: 基本选择器 复合 ......
css3属性之 text-overflow:ellipsis
语法： text-overflow:clip | ellipsis 默认值为clip 不显示省略标记 clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法： text-overflow: ......
直播软件搭建，css隐藏滚动条，但使超出部分任然可以滚动
直播软件搭建，css隐藏滚动条，但使超出部分任然可以滚动 /*长tabs，隐藏滚动条，保留滚动功能*/.weChat-tabs{ height: 40px; display: flex; overflow-x: scroll; padding: 0 20px; white-space: nowrap ......
现代 CSS 解决方案：原生嵌套（Nesting）
很早之前，就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的规范！ CSS 原生 ......
css防止图片挤压变形 object-fit: cover
img{ width:200px; height:100px; object-fit: cover; } 该属性会对图片保留原始比列，多余的会被裁剪。 添加该属性会适应指定容器的高度与宽度。 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等 语 ......
css-定位
相对定位 top -20px ——first上移20px 绝对定位： 相对于浏览器： 相对于父级元素（给父级元素一个position） 固定定位：彻底定死，区别绝对定位 相当于加了z轴，好多图册 ......
css-盒子模型
盒子模型 1.是什么 2.边框 边框的粗细 边框的样式 边框的颜色 因为容易很丑~-~ 这里用结构伪类选择器: ——本意为找div父类的子类中第一个为input的，但是有错，实际上是div的后代选择器 如果去掉input , 只会框第一个div, 找div父类的子类中第一个孩子 3.外边距 两个参数 ......
走进CSS—I
[点击链接走进前端学习：https://blog.csdn.net/qq_53810245/article/details/116831968](https://blog.csdn.net/qq_53810245/article/details/116831968) @[TOC](CSS学习笔记) ......
走进CSS—II
点击跳转继续学习：[走进CSS—I](https://blog.csdn.net/qq_53810245/article/details/119176518) @[TOC](CSS学习笔记)  特性组成的。 // 单行注释 /**/ 多行注释 ECMASxript 中的一切 (变量 函数名和操作符) 都区分大小写 1：什么是标识符 变量 函数 属性的名字 或者函的参数 ......
Css 修改图标颜色_Css 修改图片颜色_Css控制图片颜色
一、Css3 mask 修改图标颜色 （推荐） CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。 <!DOCTYPE html> <html la ......
css使用border-image和flex布局设计一个随着文字多少自适应的标题
需求： 设计一个标题，让中间部分随着文字而撑大，同时文字渐变，两边自适应，这种情况就不能用传统的背景图片了，想到可以使用图片边框来做 解决思路： 1.需要一个大盒子和三个小盒子 2.大盒子设置display:flex; 左右两个小盒子分别设置flex-grow; 并设置背景图片 3.给中间盒子设置边 ......
css修改页面内元素的滚动条样式
<div class="box"> <div class="content"></div> </div> <style> .box{ width: 100px; height: 200px; overflow: auto; } .content{ width: 100px; height: 1000 ......
css实现 h5滑动时隐藏滚动条
.menus{ margin: 10px 0 ; margin-left: 18px; display: flex; flex-wrap: nowrap; overflow-x: auto; } .menus::-webkit-scrollbar { display: none; width: 0 ......
在chrome下css/js等资源加载缓慢20s+或者30s+
## 问题 chrome、edge等浏览器在打开web网站，部分资源加载缓慢，严重影响体验. ## 在转发nginx上请求和响应时间差距很小，都是30s+ ![image](https://img2023.cnblogs.com/blog/790307/202309/790307-202309071 ......
html+css：一个元素多个类，来抽取相同的属性
如下的图像 其三个box的高度是相同的，且具有浮动元素，因此可以作为一个类来把其属性都放在一起 这种合并其实不难理解，但是我们在整体的代码设计中很难考虑这一点，这个一定要记住！！ .child{ height: 200px; float: left; } <div class="box"> <div ......
流程全局引入外部JS、CSS
全局引入，所有流程 E9如果在代码块里面这样： <script type="text/javascript" src="/js/layui-v2.8.13/layui/layui.js"></script> 是引入不了的。 如果想单独在某个流程引入，如下： ......