文档章节

偷师成功,纯CSS绘制右箭头及其他

秀杰
 秀杰
发布于 2017/07/06 15:40
字数 631
阅读 430
收藏 1

一、image标签无中生有的边距

对于高度过低(经过测验,这个min高度值在iP5下是14px,iP6下是16px,iP6 Plus下是18px)的<image />自带上边距,在wxml面板下查看padding/margin却没有什么异样,索性手动给了margin-bottom: 32rpx;才解决。

也不知道这个是不是小程序的bug,完成后商品列表后如下图

二、小程序为ListView画一个右箭头

首页

列表页

无意间看到weapp官方的demo里不是用png也不是用image data实现了,更不是canvas,细看真是纯css画的。

参考了https://github.com/weui/weui-wxss/中文件./style/weui.wxss

content:" ";
display:inline-block;
height:6px;
width:6px;
border-width:2px 2px 0 0;
border-color:#c8c8cd;
border-style:solid;
-webkit-transform:matrix(.71,.71,-.71,.71,0,0);
transform:matrix(.71,.71,-.71,.71,0,0);
position:relative;
top:-2px;
position:absolute;
top:50%;
margin-top:-4px;
right:2px;

我作了删改如下:

.hd:after {
	content: " ";
	height: 6px;
	width: 6px;
	border-width: 2px 2px 0 0;
	border-color: #fff;
	border-style: solid;
	transform:rotate(45deg);
	position: absolute;
	margin-top: -4px;
	top: 50%;
	right: 22px;
}

原理是给个矩形,border-width绘制右边距、上边距,并旋转0.71弧度即45度,得到一个期望的直角,这种设计挺巧妙的,其中:

  1. content需要给个空格
  2. position设定为absolute是可选的,但.hd设定参照物为relative却是必须的
  3. transform设定二选一,为了兼容,全给上,不过没涉及伸缩,我用了transform:rotate更直观,不用计算sin,cos
  4. top为50%自适应更好

三、伪类:before/:after的其他用法

比如:单元格行前的竖杠、人民币符号、为container底部边框或边距等。

使用伪类,可以使得样式更加简洁,可读性也还好。

高亮标识.png

/*分类文本高亮左侧标识*/
.category-item-active:before {
	content: "";
	width: 3px;
	background: #0099ff;
}

按上面的代码,就有一竖条了。

人民币符号.png

/*人民币符号*/
.price:before {
	content: "¥";
}

.amount:before {
	content: "待支付 ¥";
}

四、flex值定义比重

我用它在了ListView中一行三列的布局,还可以用在照片预览器九宫格布局

这样就可以定义某一个子元素的权重,如果只定义一个子元素为flex: 1,那么其他的被挤压到最边上,如果有2个子元素,分别定义了flex: 1,那么它们各占50%。

以下示例定义了1、9布局。

/*配送费*/
.express-label {
	/*width: 90%;*/
	margin-left: 10px;
	flex: 9;
}

.express-fee {
	/*width: 10%;*/
	margin-right: 5px;
	flex: 1;
}

在这种场景下,与使用width百分比,效果是相等的。

源码下载:关注公众号【黄秀杰】,回复112。

公众号huangxiujie85

© 著作权归作者所有

秀杰
粉丝 151
博文 94
码字总数 50956
作品 0
瑞安
iOS工程师
私信 提问
加载中

评论(2)

皮皮虾仁
找错人了,错怪博主了,评论不知道怎么删除,只好做个补充留言,向博主道歉。
皮皮虾仁
黄秀杰,领了老子红包就拉黑我,有出息了哈?再打赏你点?啧啧,长这个样子啊!快,谢谢我,给你评论了这么多----偷钱也成功哦
纯CSS3绘制的可爱雪人 附雪花飘落动画

纯CSS3绘制的可爱雪人 附雪花飘落动画 HTML5资源教程2017-12-111 阅读 css3绘制动画 今天我们要给大家带来一款非常可爱的纯CSS3雪人动画,首先映入眼帘的是一场迷人的雪景,这里利用了CSS3的...

HTML5资源教程
2017/12/11
0
0
纯CSS3乒乓球动画

纯CSS3乒乓球动画 HTML5资源教程2017-12-291 阅读 css3动画 这是一个比较有意思的纯CSS3乒乓球动画特效,主要是模拟了乒乓球运动动画,画面上用CSS3绘制了一张乒乓球桌,一个乒乓球在球桌上来...

HTML5资源教程
2017/12/29
0
0
程序猿必备的8款web前端SVG动画特效

  1、SVG图片波浪效果渲染动画   今天我们要为大家分享一款很酷的SVG图片动画,主要是图片上会出现波浪的渲染动画。实现原理是在图片上方利用SVG路径绘制了一层蒙板,然后蒙版进行一定的...

爱前端
2017/12/06
0
0
CSS3士兵队伍整齐的步伐模拟动画

CSS3士兵队伍整齐的步伐模拟动画 HTML5资源教程2017-12-113 阅读 css3动画模拟 这是一款比较有趣的CSS3动画,动画中有一支士兵队伍迈着整齐的步伐,举着枪,一起向前进。这里每一个士兵人物都...

HTML5资源教程
2017/12/11
0
0
12款超强CSS3应用集锦下载

CSS3非常强大,它可以渲染很多你意想不到的特效,而且目前浏览器对CSS3的支持也逐渐放开了,所以利用CSS3可以制作一些即美观又实用的网页应用,下面12款CSS3应用集锦分享给大家,有源代码下载...

Lunaqi
2017/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
2
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
6
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
3
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部