css - 随笔分类 - papering

Postcss css module 关注点分离

摘要：Postcss 简明教程及 css module - 掘金 https://juejin.cn/post/6862371071115558926 PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网 https://www.postcs 阅读全文

posted @ 2023-04-22 14:38 papering 阅读(105) 评论(0) 推荐(0)

svg中插入动画

摘要：<svg id="shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 29 16" shape-rendering="geometricPrecision" 阅读全文

posted @ 2022-08-31 21:05 papering 阅读(127) 评论(0) 推荐(0)

CSS Color Adjustment Module Level 1

摘要：CSS Color Adjustment Module Level 1 https://drafts.csswg.org/css-color-adjust-1/ DarkMode 适配指南 | 微信开放文档 https://developers.weixin.qq.com/doc/offiaccou 阅读全文

posted @ 2021-01-20 14:44 papering 阅读(139) 评论(0) 推荐(0)

BEM(Block–Element-Modifier)

摘要：BEM(Block–Element-Modifier) 阅读全文

posted @ 2018-10-12 19:28 papering 阅读(214) 评论(0) 推荐(0)

高度优化

摘要：待优化优化点: 1、content的位置和显示与遮挡的部分； 2、商品选项的高度统一；间距调整阅读全文

posted @ 2018-10-06 14:12 papering 阅读(318) 评论(0) 推荐(0)

margin 依附与可见的内容，不能为margin而写margin

摘要：margin 依附于可见的内容，不能为margin而写margin <!DOCTYPE html><html><head><style> p{margin:20px 0;}</style></head><body><p>第-1个段落。</p><p></p><p>第一个段落。</p><p>第二个段落。阅读全文

posted @ 2018-10-04 16:32 papering 阅读(287) 评论(0) 推荐(0)

clear both

摘要：账户余额 ? ￥ {{apiRes.AccountBalance['1'].val}} 币充值金额 {{index===0 ? ' ': '送'+item[1]+'币'}... 阅读全文

posted @ 2018-10-04 15:46 papering 阅读(249) 评论(0) 推荐(0)

float 的先后顺序理解流

摘要：<!DOCTYPE html><html><head><style> p{float:right;}</style></head><body><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p></body></html> 阅读全文

posted @ 2018-10-04 11:24 papering 阅读(788) 评论(0) 推荐(0)

flex 均分铺满

摘要：flex 均分铺满阅读全文

posted @ 2018-10-04 10:43 papering 阅读(1612) 评论(0) 推荐(0)

git commit -a -m "M 1、引入mixin，公共样式mixin传参处理；";git push origin master:master

摘要：账户余额 ? ￥ {{apiRes.AccountBalance['1'].val}} 币充值金额 ... 阅读全文

posted @ 2018-10-03 18:11 papering 阅读(274) 评论(0) 推荐(0)

mixin 在传参中可以出现参数在类内部可以定义作用域

摘要：mixin 在传参中可以出现参数在类内部可以定义阅读全文

posted @ 2018-10-03 17:44 papering 阅读(189) 评论(0) 推荐(0)

p:nth-last-child(2)

摘要：<!DOCTYPE html><html><head><style> p:nth-last-child(2){background:#ff0000;}</style></head><body> <h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p>< 阅读全文

posted @ 2018-10-03 16:46 papering 阅读(310) 评论(0) 推荐(0)

display block 是否提倡

摘要：display block 是否提倡阅读全文

posted @ 2018-10-03 16:20 papering 阅读(134) 评论(0) 推荐(0)

对宽度的控制原则 git commit -a -m "M 1、完成less计算得出图片的均分布局；";git push origin master:master

摘要：<script> import wepy from 'wepy' import api from '../api/api' export default class recharge extends wepy.page { config = { navigationBarTitleText: '账户阅读全文

posted @ 2018-10-03 15:41 papering 阅读(211) 评论(0) 推荐(0)

after

摘要：.pay-type_select-after, .amount-item_select-after { padding: 0; border: @wx-width-one_unit solid @color-main_blue; @v: @wx-width-one_unit*24; &:after { display: block; ... 阅读全文

posted @ 2018-10-03 09:28 papering 阅读(202) 评论(0) 推荐(0)

通过less 计算得出图片均分布局

摘要：<style lang="less"> @import "../style/weui.wxss"; // WXSS · 小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html @wx-width: 7 阅读全文

posted @ 2018-10-02 22:49 papering 阅读(383) 评论(0) 推荐(0)

通过margin负值去除padding

摘要：.pay-type { // 图片布局前通过margin负值去除padding margin: 0 -@page-padding-horizontal; display: inline-flex; } <style lang="less"> @import "../style/weui.wxss"; 阅读全文

posted @ 2018-10-02 16:48 papering 阅读(291) 评论(0) 推荐(0)

width: 50%; display:inline-flex;

摘要：<style lang="less"> @import "../style/weui.wxss"; @wx-width: 750rpx; @wx-width-one_unit: @wx-width/750; @color-main-red: #f00; @color-main-blue: #2CAB 阅读全文

posted @ 2018-10-02 07:44 papering 阅读(234) 评论(0) 推荐(0)

css 生效顺序 less 写法

摘要：<!DOCTYPE html><html><style type="text/css">.c{color:red;}.c{color:green;}</style><body><p class="c">123</p></body></html> 阅读全文

posted @ 2018-09-30 23:07 papering 阅读(424) 评论(0) 推荐(0)

mix-in class selectors

摘要：语言特性 | Less 中文网 http://lesscss.cn/features/#mixins-feature Mixins Mixins "mix-in" properties from existing styles You can mix-in class selectors and i 阅读全文

posted @ 2018-09-27 23:53 papering 阅读(244) 评论(0) 推荐(0)

papering

随笔分类 - css