摘要:这里介绍下简单实现瀑布流的方法,适合一次性加载完的数据列表。 如果是分页加载那就需要更复杂的计算了,但也可以在本案例的基础上进行扩展。 关键代码: js部分: let columCount = 2 let goodsList = this.properties.goodsList //创建跟列数相同
阅读全文
摘要:

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