CSS

2020-10-12 · 阅读 460 · 字数 203

在查看小程序 UI 库 ColorUI 时，看到这样一段代码： .bg-gradual-red { background-image: var(--gradualRed); color: var(--white); } 查了一下 css 中 var 的用法，才知道原来 CSS3 中已经支持 CSS 变量这种用法了。不需要再依赖 SASS 和 LESS 也能使用变量，非常棒。 CSS 变量用法 要点： 变量名必须以双横杠开头 变量需要定义在一个 css selector 中，用于限制其作用域。如果想全局使用，网页中使用 :root 或者 body；小程序中使用 Page。 使 ...

阅读全文...

2020-08-19 · 阅读 635 · 字数 254

今天在小程序中使用图片作为 view 背景时，发现背景图显示不完整，使用的是 css background-size: cover; 可是之前这样用时，从来没遇到这种情况。仔细对比了一下，发现： 显示正常的情况是，view 区域很大，背景图没有完整显示的要求 显示不正常的是，view 区域很小，而背景图相对大一些，这种情况背景图没有显示完整 改用 background-size:100% 100%; 之后，就显示正常了。 所以，整理了一下这两者的区别。 100% 使用场景 当背景图必须完整显示全时，使用 background-size:100% 100%; 但是会变形。 cover ...

阅读全文...

2020-05-25 · 阅读 1954 · 字数 211

例如在手机移动端，一个表格的列数过多，会超出屏幕宽度。所以通常会限制 table 的宽度。 .long_table { width: 100%; overflow-x: auto; } 但是，限制之后显示是正常了。但是手机浏览器一个默认的体验不太好，就是默认不显示横向滚动条。 只有在拖动的时候才会显示，只要不移动，一会就会消失。 这样，会导致部分用户以为只有部分数据，不会主动去滑动查看更多数据。 所以，需要强制显示滚动条 .long_table::-webkit-scrollbar { width: 5px; height: 13px; -webkit-border-ra ...

阅读全文...

2020-08-13 · 阅读 2617 · 字数 597

例如，我想在微信小程序首页显示多个功能按钮，采用 flex 布局，一行3个按钮。每个按钮之间等间距。 效果如图所示： 测试代码： HTML <div class="container test1"> <div class="box test2"> <div class="content">title</div> </div> <div class="box test2">1</div> <div cl ...

阅读全文...

2020-11-11 · 阅读 1789 · 字数 198

假设页面 顶部是一个 banner，class 为 top 余下部分是一个 scroll view，占据了页面剩余的高度 实现方法 Page { display: flex; height: 100%; flex-direction: column; } .top { } .bottom { flex: 1; } 在没有数据时，这样的布局看上去没有问题。但是一旦填充上数据，会发现 scroll view 的高度会被撑开。 真正的实现方法。。。 <view class="bottom"> <scroll-view class ...

阅读全文...

2020-04-08 · 阅读 1346 · 字数 161

当手机端排版时，如果 ul 中 li 过多，一行装不下时，希望显示水平滚动条，而不是折行。 flex 实现： ul display: flex; overflow-x: auto; li flex: none; 如果不加 flex: none; 所有的 li 会自动压缩宽度，以适配当前容器宽度。而这不是我想要的效果。 overflow-x: auto; 与 overflow-x: scroll; 的区别 auto: 只有当内容溢出时，才显示滚动条 scroll: 无论是否溢出都显示滚动条。主要是为了布局统一，防止滚动条有无导致布局偏差。 ...

阅读全文...

2020-11-19 · 阅读 6680 · 字数 368

见过两种实现方式，但是只有第一种的效果更平滑。 以微信小程序模板代码为例： <view class="person_info"> </view> 第一种，两个 div 拼接 实现的逻辑是，利用 after 创建一个相对大的底部圆形的 view，露出下面的部分。 需要注意的是，height 一定要比父级元素高，left 按比例对称调节。 .person_info { width: 100%; height: 400rpx; background-image: linear-gradient(180deg, #66ccff 0%, #41b ...

阅读全文...

2020-03-15 · 阅读 2007 · 字数 248

在微信小程序中可以放心地使用 flex 布局，所以尝试了一下 flex 的居中布局。 示例模板代码 <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="nav_text_wrapper"> <text>手机认证</text> </view> ...

阅读全文...

2020-03-15 · 阅读 2266 · 字数 139

例如，我在微信小程序中想使用 flex 布局来实现如下的一行布局： | 功能图标 | 功能名称 | 引导箭头| 即，水平分割一行。 实现效果 模板代码 <view class="nav"> <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="n ...

阅读全文...

2020-03-12 · 阅读 2036 · 字数 73

内联非 !important 样式 <div class="head_b" style="height: 52px; background-color: rgb(195, 195, 195);"> <style> div[style] { background: yellow !important; } </style> 内联 !important 样式 由于内联 !important 样式不可覆盖，所以只能使用 js 替换的方式来解决。 <div class="head_b" st ...

阅读全文...

2020-05-29 · 阅读 1535 · 字数 127

在商品图片列表页，想增加一个交互效果。 当鼠标 Hover DIV 区域，背景图片拉近放大显示。 HTML <div class="portfolio-item-block" style=""> <div class="portfolio-item-block-inside"> <a href="/" target="_self" rel="" title="Pressure Equipment"&gt ...

阅读全文...

2020-03-10 · 阅读 1482 · 字数 163

使用场景 例如，一行显示四张图片，这样每张图片都占屏幕宽度的 25%。 但是纯 CSS 如何实现高度如何跟宽度保持一致，构成一个正方形 DIV 呢？ 方法一 .square { width: 25vw; height: 25vw; } vw: viewport-percentage length，100vw 即整个屏幕的宽度。 例如，你的屏幕分辨率为 1920px，100vw 即为 1920px。 对应的，还有 vh，即高度百分比。 方法二 .square { width: 25%; padding-bottom: 20%; } 这个方法确实有效，但是 pa ...

阅读全文...

2019-12-25 · 阅读 1334 · 字数 297

Flex，全称为 Flexible Box，即“弹性布局”。 浏览器兼容性 IE 10 才支持。 传统布局的局限性 垂直居中不容易实现。 基本使用 指定为 Flex 布局： 行内元素: display: inline-flex; 非行内元素：display: flex; 设置为 flex 布局之后，子元素的 float, clear 和 vertical-align 将失效。 容器的属性 flex-direction 决定子元素的排列方向。值为 row, column 等。 row：默认值。一行一行的排列，可以理解为一行一个。 column：一列一列的排列，可以理解为一列一个。 row- ...

阅读全文...

2019-12-07 · 阅读 1905 · 字数 4

金色 #FFD700 ...

阅读全文...

2019-11-21 · 阅读 4082 · 字数 127

例如，点击页面中的一个按钮，弹出一个 form 框，让用户填写并提交信息。 此时就需要一个遮罩层。 HTML <div class="bg_mask"> </div> CSS .bg_mask { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.95; opacity: 0.95; filter: alpha( ...

阅读全文...