CSS
落落的前端学习之路
这个作者很懒,什么都没留下…
展开
-
css 选择器获取同名class 第一个或者最后一个元素(区分class)
在子元素有多个不同的class的情况下,父元素获取同一个class的子元素的第一个或者最后一个元素。原创 2023-05-24 15:50:48 · 9336 阅读 · 0 评论 -
滚动条样式设置
滚动条样式原创 2022-10-12 14:15:42 · 206 阅读 · 0 评论 -
ahooks useVirtualList 滚动条抖动或者数据抖动
懒加载的时候由于不断更新列表项内部的高度,因此就会使浏览器自动触发滚动事件,而滚动事件又触发懒加载的更新,形成死循环,造成自动滚动的问题。在父元素中添加样式overflow-anchor:none就正常了。不知道为啥只有react18,root.render()方式才会有问题。页面内容高度发生变化引起滚动条跳动的问题。浏览器会自动触发onscroll事件,调整滚动条的位置,让滚动条不乱跳动;...原创 2022-08-12 14:22:02 · 1052 阅读 · 0 评论 -
CSS 实现轮播图
<div className={styles.banner} > <div className={styles.wrapper} > <ul className={styles.shufflingBody}> <li className={styles.shuffling}>1</li> <li原创 2022-04-18 15:02:16 · 1221 阅读 · 0 评论 -
用纯CSS禁止鼠标点击事件以及禁止鼠标样式
pointer-events: none;cursor: not-allowed;原创 2021-12-21 16:52:37 · 2677 阅读 · 0 评论 -
Css fade()函数降低颜色变量透明度
@primary-color颜色变量 background-color: fade(@primary-color, 20%);原创 2021-12-16 14:41:00 · 3135 阅读 · 3 评论 -
uniapp使用阿里云多色图标
下载,然后解压输入cmd,然后enter输入 npm install -g iconfont-tools再输入 iconfont-tools,然后一直enter,直到结束目录会多了个iconfont-weapp文件,点击去找到 iconfont-weapp-icon.css导入和使用 t-icon开头 接图标的类名@import './common/iconfont-weapp-icon.css';<text class="t-icon t-icon.原创 2021-06-16 15:17:14 · 296 阅读 · 0 评论 -
uni-app动态绑定class和style
目录动态绑定calss动态绑定style动态绑定calssclass="[{‘类名’:条件},{‘类名’:条件},{‘类名’:条件}]"为不同条件的image绑定不同的样式 <image class="img1" :class="[{'img1':index == 0},{'img2':index == 1},{'img3':index == 2}]" :src="avtUrl" ></image>数组的方式,直接绑定多个 c原创 2021-06-16 14:11:12 · 1368 阅读 · 0 评论 -
uniapp /deep/设置uni-app组件样式时 h5生效 小程序失效问题解决
今天写uni-app的项目 设置uni-app扩展组件的样式 使用穿透/deep/ 发现小程序没有效果 h5有效果//小程序无效 h5生效 /deep/ .uni-list-item .uni-list-item__container .uni-list-item__content .uni-list-item__content-title{ color: #333333; font-size: 32upx; }加入一下代码后 h5 和小程序 都生效//与methods 同级加.原创 2021-04-19 10:03:21 · 2938 阅读 · 8 评论 -
css React 单行省略和多行省略
单行省略white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;多行省略overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;我们需要在需要超出加省略号的标签上加一个行内样式: <p class原创 2021-04-19 10:05:28 · 306 阅读 · 0 评论 -
js 中对于 css 的变量操作(React也可)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、设置CSS变量?二、读取变量三、删除变量总结前言主要讲js 中对于 css 的变量操作;前端框架:antd框架一、设置CSS变量?document.body.style.setProperty('--primary', '#7F583F’);二、读取变量document.body.style.getPropertyValue('--primary').trim();三、删除变量document.bod原创 2021-04-18 13:41:32 · 1453 阅读 · 0 评论