CSS
文章平均质量分 52
光就一个字
这个作者很懒,什么都没留下…
展开
-
背景图长宽100%,也能显示不全?
前言前两天进行业务开发时,用到一个「券样式」的背景图(background-image),即下图的「返利¥1.30」:容器的宽度会根据文字内容自适应,代码如下:css:.coupon-like { padding: 8rpx 10rpx; background-size: 100% 100%;}html:(代码是微信小程序的写法)<view class="coupon-like" style="background-image: url('{{commonImgUrl.原创 2020-07-16 19:07:26 · 1064 阅读 · 0 评论 -
舒服的小程序吸顶动画
前言今天想优化下用户体验:给小程序商品列表页顶部的标签栏增加个吸顶动画。逻辑是检测用户下滑行为时不吸顶,上滑时吸顶,标签栏未滑离视窗时不处理。并对滑动的处理方法增加节流处理,以优化性能。一、处理页面滚动1.1 页面逻辑页面page_name.js:// ...onPageScroll(e){ this.selectComponent('#goods_list').data._handleScroll(e)}// ...因为业务需要,商品列表goods_list被我封装成组件形式,所以原创 2020-05-15 12:22:14 · 816 阅读 · 0 评论 -
页面适配iPhone X系列
背景移动端页面开发时,有时会需要按钮悬浮于屏幕底部。对于iPhone x及以后的系列,因为底部小白条的存在,靠近页面底部的交互会与系统原生小白条的交互冲突,所以需要做些兼容性的处理。先上结论:html:增加viewport-fit属性,设为cover<meta name="viewport" content="width=device-width, viewport-fit=cove...原创 2020-03-16 19:22:21 · 222 阅读 · 0 评论 -
CSS选择器大全
选择器 例子 例子描述 CSS .class .intro 选择 class=”intro” 的所有元素。 1 id firstname 选择 id=”firstname” 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有 &amp;lt;p&amp;gt; 元素。 1 ele...原创 2018-02-20 14:10:56 · 400 阅读 · 0 评论 -
多行文本溢出变省略号
多行文本溢出变省略号:overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;单行溢出变省略号:overflow : hidden;text-overflow: ellipsis;white-space:no...原创 2018-09-28 20:54:08 · 201 阅读 · 0 评论 -
line-hight 安卓字体不居中
在字体容器的css里添加:border: 1px solid transparent; // 解决安卓字体不居中问题box-sizing:border-box;原创 2018-09-05 17:10:22 · 884 阅读 · 0 评论 -
css伪元素画三角形边框有细线
场景页面需要展示一个标签,用图片的话其内的字数就限定死了,而字数过少观感就不好,所以尝试用css画出标签样式,如下图: 思路在一个红色的div前后添加伪元素(::before和::after),利用边框画出,分别是白色和红色的三角形问题与解决思路画三角形的过程并不难,但遇到了很神奇的现象:左三角形左边缘有红色细线,右三角形左边缘有红色细线, 经修改div颜色发现,左细线...原创 2018-09-05 17:08:07 · 1595 阅读 · 0 评论 -
mpvue小程序中怎么引入iconfont字体图标?
前言iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库将图标加入购物车搜索关键词可以是中文也可以是英文 下载素材点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请...原创 2018-07-04 16:20:24 · 7159 阅读 · 0 评论 -
a:link、a:visited、a:hover、a:active的正确使用顺序
L-V-H-El(link)ov(visited)e h(hover)a(active)te, 即用喜欢和讨厌(LOVE-HATE)两个词来概括 因为css的就近原则(后面的覆盖前面的), 错误的顺序会导致颜色显示与预期不符, 进入知乎,了解更多...原创 2018-02-20 14:34:53 · 1586 阅读 · 0 评论 -
vue项目中,全局引用sass
背景:sass的mixin与全局变量文件需在多处引入十分麻烦,可以通过sass-resources-loader达到全局注入,终身受益的目的。scss目录安装npm i sass-resources-loader --save -dev配置在build/utils.js文件的exports.cssLoaders函数内添加如下代码:exports.cssLoa...原创 2018-06-21 14:03:35 · 5917 阅读 · 0 评论