弹性盒子flex布局轻松实现瀑布流
摘要：这里介绍下简单实现瀑布流的方法，适合一次性加载完的数据列表。 如果是分页加载那就需要更复杂的计算了，但也可以在本案例的基础上进行扩展。 关键代码： js部分： let columCount = 2 let goodsList = this.properties.goodsList //创建跟列数相同
阅读全文
posted @ 2023-11-08 17:19
随笔分类 - Css样式运用技巧
纯css实现内凹圆形
摘要：
使用纯css实现多个div内部透明半圆或者圆形，可以做透明的内嵌式图层遮罩，感兴趣的可以尝试下
阅读全文
使用纯css实现多个div内部透明半圆或者圆形，可以做透明的内嵌式图层遮罩，感兴趣的可以尝试下
阅读全文
posted @ 2023-05-30 11:34
vue项目使用scss生成多个同心圆环按不同速度转动的效果实现
摘要：如上，实现多个同心不同宽度的圆环以不同的速度转动的特效。 本例所取项目采用了vue+vant+scss+mockjs，其中圆环采用vant的环形进度条组件，圆环的宽度、直径大小、线条的长度等采用mockjs的随机数按一定规则进行设置，圆环的循环滚动采用css3的animation动画，动画的随机频率
阅读全文
posted @ 2020-12-04 11:20
css3弹性盒子常用样式属性梳理汇总
摘要：direction 修改元素排列方式，可单独使用，会影响子元素内部元素排列 rtl 1 2 12 flex-direction 弹性子元素在父容器中的位置 row-reverse 1 2 3 column-reverse 1 2 3 justify-content 弹性子元素（横向）排列方式，可单独
阅读全文
posted @ 2020-07-09 14:39
纯CSS样式实现数字加减按钮的最佳方案
摘要：前言： 对于数字加减按钮的实现，以前用过不少方案，诸如： 1.使用背景图片——这种效果比较好，缺点是样式控制有点复杂了，还需要使用图片； 2.直接使用“+”“-”——这种方法简单粗暴，最容易实现，缺点是不同浏览器环境下显示略有不同，符号大小机线条粗细不太好调； 3.使用unicode字符，这个跟方法
阅读全文
posted @ 2019-05-31 14:35
css选择器的优先级
摘要：为同一个元素设置多个样式时，此时哪个样式生效由选择器的优先级确定： 选择器的优先级（权重）：
阅读全文
posted @ 2019-04-11 15:02
html页面的CSS、DIV命名规则(仅供参考学习）
摘要：CSS命名规则： 头：header 内容：content/containe 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页
阅读全文
posted @ 2019-04-03 11:36
如何让商品标题类文本根据内容长度垂直居中
摘要：1. 前言 2. 使用 vertical-align 样式实现指定行数的垂直居中布局 3. 使用js计算文本所占总宽度，与文本盒子宽度比较追加不同类样式进行调整 4. vertical-align:middle的使用扩展——不限行数全展示垂直居中 5. 最好的方法：使用弹性盒子 前言： 如下图，商品
阅读全文
posted @ 2019-04-02 15:19
编写高效的 CSS 选择器
摘要：高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在Sky公司工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识到，CSS在我们手中，既能很高效，也可以变得很低能。这很容易被忘记，尤其是当你意识到你会的太少，CSS代码效率很低的时候。 下面的规则只
阅读全文
posted @ 2019-04-01 17:42
css文本垂直居中的实现
摘要：本案例已经有新的比较简便的解决方案，可以直接采用 vertical-align：middle 样式对行内元素进行垂直居中布局，详见： 微信小程序开发——如何让商品标题类文本根据内容长度垂直居中。 以下方案涉及到操作dom，需要进行计算，总归是会对页面渲染会有一定影响的，不建议使用，仅供学习研究。 前
阅读全文
posted @ 2019-03-14 14:37
CSS文本超出指定行数省略显示
摘要：单行： 2行： 其中， -webkit-line-clamp: 2; line-clamp: 2; 这两个样式设置的是显示行数， height: 50px; 则是限制显示高度，为了完整的显示指定行数的内容，最好与line-height成一定的线性相关关系，如： 虽然可以根据font-size、lin
阅读全文
posted @ 2019-03-14 11:01
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
摘要：一. 运行环境： iphone所有机型的qq浏览器，safari浏览器，微信内置浏览器（qq浏览器内核）等。 二. 异常现象： 1. 大幅度上下滑动h5页面，然后停止滑动，有时候会影响到页面滚动，如局部滚动条； 2. 大幅度上下滑动h5页面，页面中的悬浮层，如头部，底部菜单之类需要固定在指定位置的层
阅读全文
posted @ 2017-07-27 00:20
如何解决谷歌浏览器保存密码后文本框出现淡黄色背景色的显示问题
摘要：示例： 解决方法： 给文本框添加内阴影，使内阴影足够大覆盖淡黄色区域：
阅读全文
posted @ 2016-12-14 11:56
只有图片拼接的html页面图片之间有白条的解决方法
摘要：有时候会有这样的页面，整个页面也就是几张切好的图片组成，但是把这些图片使用代码拼接好，又总会出现图片间有白条的问题，如下图： 解决方法：给图片的父容器添加 line-height: 0; 就好了，因为body/div之类的标签默认的都会有行高属性，即时是图片，也会受这个默认样式的影响
阅读全文
posted @ 2016-11-21 10:37
外层div高度不随内层div高度改变的解决办法
摘要：当b1和b2都是float=left时候，a1层的高度不会被b1和b2的高度撑开。 解决方法一：设置div1的display属性为table即可；解决方法二：插入一个额外的标签 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼...
阅读全文
posted @ 2014-09-18 15:25
FILTER:progid:DXImageTransform.Microsoft.Gradient使用
摘要：FILTER:progid:DXImageTransform.Microsoft.Gradient使用语法：filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColor...
阅读全文
posted @ 2014-09-18 15:03
解决opacity属性在低版本IE浏览器下失效的方法
摘要：以前，一直都以为ie9以下的版本不支持opacity属性。所以就同时使用 opacity和ie独特的filter蒙版。但是有些时候需要一些动态的效果，就比如层的渐渐消失，隐藏，就需要使用动态变化的opacity，这种情况下，同时使用opacity和filter就显的有点麻烦了。 其实，只使用...
阅读全文
posted @ 2014-09-18 15:02
CSS文字大小单位px、em、pt详解
摘要：这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点，看过以后确实收获很大。平时都是用px来定义字体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用。因为：IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em作为字体单位；Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器（或内核）。px像素（Pixel）是相对长度单位，像素px是相对于显示器屏幕分辨率而言的。（引自CSS2.0手册）em是相对长度单位，相
阅读全文
posted @ 2014-03-19 22:18
