CSS
文章平均质量分 82
CSS相关
小马甲丫
不要假装很努力,选择比努力重要
展开
-
基于css-vars-ponyfill实现换肤
自定义变量颜色:对于业务来说,可能基础色并不能满足所有业务的颜色覆盖,或者每种主题下基础色并不能一一对应,此时自定义变量颜色,这个功能变得必不可少。主要原理也是根据每种主题可以自己填写对应的业务需要的颜色(极端情况),这边也分以下两种情景:(1)完全自定义常量多态,即一种主题色自定义常量都有对应一种颜色例如 系统主题有四种,某个业务背景色,我们定义了一个常量dark1主题下的颜色是一个基础色dark.C01;dark2主题下的颜色是一个基础色dark.C02;light1主题下的颜色是一个基础色。原创 2024-02-10 12:00:00 · 1570 阅读 · 1 评论 -
css设置不可点击
在网页开发中,经常会遇到一种情况,就是需要将某个元素的点击事件屏蔽,使其在用户点击时没有任何反应。这时候,我们可以通过CSS的属性设置为none来设置元素不可点击,实现这个功能。CSS的属性是一种较为简单的实现元素不可点击的方法,可以通过设置元素的属性为none,来实现屏蔽元素的点击事件。但是需要注意的是,这种方式会影响该元素上的所有鼠标事件,并不是所有浏览器都支持属性。在实际开发中,我们需要根据实际情况来选择是否使用这种方式。本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。原创 2024-01-26 21:30:03 · 1181 阅读 · 0 评论 -
css中~、>、+、[]、:和::详解
css中~、>、+、[]、:和::详解。本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。原创 2024-01-24 12:00:00 · 1270 阅读 · 0 评论 -
css中>>>、/deep/、::v-deep的作用和区别,element-ui自定义样式
deep/在style经常用scoped属性实现组件的私有化时,要改变element-ui某个深层元素(例如)或其他深层样式时,需要使用/deep/注意,/deep/在vue 3.0会报错个人推荐项目使用::v-deep修改样式本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。原创 2024-01-22 09:50:21 · 2369 阅读 · 0 评论 -
CSS渐变透明
使用场景:在做两个元素的连接处的UI适配时,图片的颜色不能保证一定跟背景颜色或者是主色调保持一致时,会显得比较突兀。本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。原创 2024-01-10 00:12:43 · 611 阅读 · 0 评论 -
CSS常用技巧专题一
CSS常用技巧专题。本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。原创 2023-12-19 00:44:11 · 1102 阅读 · 0 评论 -
移动端适配方案
移动端设备的尺寸很多,而UI设计稿一般只会基于一个尺寸(一般是375px或750px)进行设计。目前移动端适配方案有多种,本文将介绍一些具有代表性的适配方案。目前比较推荐的移动适配方案是rem&vw,了解其中的适配原理对于前端而言是非常重要的,熟练使用插件也能给我们的工作带来很大的帮助。本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。原创 2023-12-18 09:58:09 · 1022 阅读 · 0 评论 -
Vue样式的7个技巧
单文件组件由三个不同的实体组成:模板、脚本和样式。所有这些都很重要,但样式往往被忽视,尽管它可能会变得复杂,并经常导致挫折和错误。更好地理解可以改进代码审查并减少调试时间。本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。原创 2023-12-16 00:56:51 · 946 阅读 · 0 评论 -
前端实现检索文本高亮实现
使用搜索引擎时的搜索结果高亮,搜索文本在查询出来的结果内高亮显示,这种在全文检索应该很常见本人每篇文章都是一字一句码出来,希望大佬们多提提意见。创作不易,给我打打气,加加油☕。原创 2023-12-07 00:06:19 · 2926 阅读 · 5 评论 -
主题色变量和var实现多套主题换肤
前端换肤有2种,一种是定义好多套主题的换肤,另一种是随意配置主题色换肤。而且很多是使用UI库提供的变色方案,本片文章是纯主题色变量和var一起使用实现换肤效果。以下2定义根伪类 :root,代码第2和7行。分别定义了默认和带参数的伪类;定义 CSS变量,变量名需要以两个减号(--)开始;多主题的话就添加多个带参数的伪类,例如等等;/* 默认 */:root {/* 带参数 myTheme02 */本人每篇文章都是一字一句码出来,希望大佬们多提提意见。创作不易,给我打打气,加加油☕。原创 2023-12-05 00:01:45 · 582 阅读 · 0 评论 -
web和微信小程序设置placeholder样式
在页面布局时经常会用到`input`输入框,有时为了提示用户输入正确的信息,需要用`placeholder`属性加以说明。`placeholder` 是`HTML5` 中新增的一个属性,需要注意浏览器的兼容性。。`placeholder`可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示,一旦用户输入信息该提示就会自动消失。比如:我们在登录时需要输入用户名和密码,它会提示你什么地方输入用户名,什么地方输入密码,这个就是使用的`placeholder`属性。原创 2023-11-30 00:15:00 · 1837 阅读 · 0 评论 -
sass报错:Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
不懂是为什么,反正我的项目是uniapp的vue2的版本,然后sass原来在package.json里的版本是^1.26.11,但是实际安装的是1.34+的版本了。查资料都是说让用math.div,但是其实都没有作用。要嘛说是@use地方要在头部,要嘛说@use要放在uni.scss中,还有说是使用sass-migrator官方的工具库来批量替换写法。最后反正我是将sass版本固定为1.23.13,就不会出现告警了。原创 2023-09-01 00:52:28 · 2483 阅读 · 0 评论 -
图解 CSS Grid 布局
在解释 CSS Grid 布局之前,我们先来看看 Grid 布局中一些重要概念。原创 2023-07-17 19:05:34 · 2687 阅读 · 0 评论