Sass-Less-Css
关注
分享
扫一扫
记录sass以及less
开发路上的AZhe
做一个坚定的码农攻克狮
展开
-
css实现简单的瀑布流
flex:column-count: 2; 规定多少列column-gap: 5px; 规定列间隙效果图：# 这边这个v-for是运行不了的，但是css样式是ok的，需要看demo先改下这个循环<div class="flow-goods"> <div class="flow-goods-item" v-for="(item,index) in goodsList.list" :key="index"> <di原创 2021-04-27 18:00:28 · 206 阅读 · 0 评论 -
Sass中的@extend注意
Sass在线编译：https://www.sassmeister.com/在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个公共box样式与一个特殊box样式，一般会这样写：/*# 先知道什么是通用样式和特殊样式- 简单一点来说特殊样式就是私有样式，比如有如下一组标签：*/<div class="public-style special-styl原创 2021-03-05 16:47:16 · 597 阅读 · 0 评论 -
实现一个简单的骨架屏样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>骨架屏</title> <style> body{ background-color: #f6f6原创 2021-01-16 10:16:41 · 555 阅读 · 0 评论 -
CSS之颜色选择
颜色收集，从上往下#3D7EFF（部分按钮颜色） #DDD （做页面背景色）#e0004d（部分文字颜色）#E7E7E7（可做背景色或文字颜色）#999999#666666#FAFAFA（看不清楚，但是确实有，最好的背景灰！！）#FCE8E6 (适合做一个小标签的背景色) 比如：#E4E7ED（适合做边框的颜色）#52ACFF(部分文字的颜色，或者按钮背景色)#F6F6F6（另外一种背景色） #efefef （用的最多的边框灰）...原创 2020-12-22 16:03:59 · 735 阅读 · 0 评论 -
css画平行四边行保持文字不倾斜
<view class="skew"> <text class="orders-lable">准时达</text></view>#css部分.skew{ border: 1px solid #F53C28; color: #F53C28; transform:skewX(-20deg); border-radius: 6rpx; padding: 0 4rpx; } .orders-lable{ displ原创 2020-12-21 18:04:36 · 2028 阅读 · 0 评论 -
CSS控制彩色图片变灰
//filter的参考文档：https://www.runoob.com/cssref/css3-pr-filter.html.imgStyle{ filter: grayscale(100%); filter: gray; opacity:0.7;//通过改变透明度来调节灰色的程度}原创 2020-09-28 16:17:01 · 381 阅读 · 0 评论 -
-webkit-line-clamp限制多行文字
.shopuserInfo{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamphttps://www.html.cn/book/css/webkit/text/line-clamp.htm翻译 2020-07-15 10:53:01 · 150 阅读 · 0 评论 -
css的选择器记录（持续更新）
官网文档：https://www.runoob.com/cssref/css-selectors.html1,::before和::after::before :在某某元素之前插入内容::after :在某某元素之后插入内容简单实例 <span class="before">beforeAndAfter</span> .before{ color: red;; } .before::before{原创 2020-07-10 14:25:07 · 134 阅读 · 0 评论 -
div内容只显示两行，超出以省略号显示
.textoverFlow{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}原创 2020-04-21 19:42:02 · 947 阅读 · 0 评论