css
不求甚解bc
这个作者很懒,什么都没留下…
展开
-
element表格空数据兼容问题
element表格空数据兼容问题。表格列过多,暂无数据不居中。当左右有fixed列的时候,底部滚动条无法选中原创 2023-12-28 14:44:38 · 1199 阅读 · 0 评论 -
webpack编译微信小程序
微信小程序开发目前主要还是依赖小程序原生开发者工具,但开发者工具目前还不支持常用的less、sass样式编译,以及环境变量配置等功能。使用webpack就可以弥补这些问题。原创 2023-06-27 12:53:08 · 3310 阅读 · 0 评论 -
postcss-pxtorem设置最小转换值
一般移动端的UI都是二倍图,对于边框常设置为border: 1px solid;这样在转换的时候,1px在真机渲染的时候就只有0.5px,在真机上会出现边框过细、显示不完整的问题。配置postcss-pxtorem的minPixelValue属性。原创 2023-04-27 11:13:33 · 1649 阅读 · 0 评论 -
一次说清px、rpx、em、rem、%、vw、vh、vm
一、背景介绍随着Web的发展,对新的解决方案的需求也会继续增大,对网页的要求更高。网页设计单位是涉及到我们布局的效果,不同的页面布局和设备需要采用不同的单位。而且现在都是要求响应式设计,需要适配各种设备,电脑,手机,平板。如果单位不合适,可能在这个设备显示良好,那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发,设计。二、知识剖析1、px1)px就是pixel的缩写,意为像素。2)px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是...原创 2022-02-28 17:07:13 · 2563 阅读 · 0 评论 -
前端公祭日黑白风格
背景每年12月13日是国家公祭日,当天不少应用都会切换应用主题为黑白色,以悼念南京大屠杀的受难者实现方案通过css过滤器,切换页面风格,给需要修改黑白风格的区域添加filterfilter: grayscale()注意:当filter不为none的时候,该元素或者其子元素具有absolute或fixed属性,那么它会为其创建一个新的包含块/容器,会造成该absolute或fixed元素的定位发生变化(就是改变了absolute或fixed元素的...原创 2021-12-24 16:40:26 · 1907 阅读 · 0 评论 -
纯CSS轮播
列表元素的滑动,不用swiper,但是仅用overflow: auto,滑动到的位置无法控制。解决方案:父元素设置 scroll-snap-type: x mandatory; 子元素设置:scroll-snap-align: start;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-...原创 2021-09-09 10:17:21 · 1203 阅读 · 0 评论 -
常用CSS样式
1、单行文本,超出显示...overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、多行文本,超出显示...display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //显示行数overflow: hidden;3、隐藏滚动条webkit内核浏览器.box::-webkit-scrollbar { dis原创 2021-07-28 11:21:16 · 1267 阅读 · 0 评论 -
react使用less
1、安装依赖使用create-react-app 创建的项目默认是看不到webpack配置文件的,需要先暴露出来,然后才能修改里面的配置信息。原创 2021-06-03 10:21:49 · 1848 阅读 · 0 评论 -
css实现文本在圆形容器中展示
前端文本展示大多数都是在盒子模型中添加文本,而普通的盒子都是方形的。有些场景需要在圆形容器中展示,例如:实现方式如下:1、html代码<div class="circle-box"> <span class="content-before"></span> <span class="content-after"></span> <p> <!-- 可能第一个字独立占一行,使用换行符 -->原创 2021-04-02 14:01:11 · 2867 阅读 · 0 评论 -
less/scss主题切换
1、实现原理给内容最外层标签添加不同的主题class,用以区分不同的主题2、less写法.module-theme(@theme, @tag) { .m-title-box { background: @theme; } .m-head .m-info .m-name { color: @theme; } // 其他样式也如此}.theme...原创 2020-03-10 14:02:43 · 4174 阅读 · 2 评论 -
css图片模糊效果
效果图:封面图为背景,进行模糊处理设置好背景样式,定位在底层,模糊css样式如下:background-image: url("http://qiniu.jnwtv.com/PC2016082914250584788070.jpg");background-position: center;background-size: cover;filter: blur(12px);-...原创 2018-08-15 11:46:10 · 7830 阅读 · 0 评论