分类下相关文章
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"> ...
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-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( ...
生活 | 跑步 清单 足球 鲁班 探索 孤独的美食家 驾驶 电视剧 收纳 奶爸 健康 game 电影 周末 |
---|---|
Geek | 健身 Laravel Git Vim MySQL Linux UI Windows SVN 纪录片 管理 Shell 游记 工具 手机 BackboneJS 自建博客 Mac DNS Tornado CDN Django Python AngularJS 理财 前端 Nginx 爬虫 Redis Javascript Browser 浏览器 推广 OAuth CSS PHP Social Networks 安全 运维 创业 杂记 VueJS Android Image IDE Java ReactJS 数据分析 SQLite RESTful 读书笔记 家电 ecshop Vagrant wordpress docker SEO GTD magento mongodb nodejs weex 冷知识 ruby iOS 微信小程序 AI CMS 快应用 backpack 广告联盟 OA 短信 UWP Win CSharp Tampermonkey graphviz 钉钉 WPS 数据字典 微信公众号 Fuchsia Adobe XD SQL Server thinkphp 代码规范 商业模式 Flutter serverless 视频制作 国际化 golang 服务器 Kotlin 网站建设 5G 笔记本 图片 spark spring |
成长的烦恼 | 闲言碎语 待产 不睡觉 写作 程序员 孙心然语录 |
地球 | 植物 时间 中文 赚钱 国家地理 烟台 一生伏首拜阳明 emoji 头痛的问题 弟子规 英文 国际贸易 |
cyber 2天前
是D版的,但是质量要比十几年前的质量好多了。