微信 weui 初体验
最近微信推出他们自己的H5组件(weui)组件的优点有两个:
- 做为开发者的我们可以不用写太多css,直接拿过来就可以用。
- 组件都有点击态,大大增加了用户的体验好感
- 高清屏幕下 border : 0.5
1,何为点击态
当用手指触摸某个按钮的时候,按钮会变成深色,离开后按钮颜色自动恢复,这个效果让用户的体验感倍增。
2,高清屏幕下的 border : 0.5 像素
正常情况下网页的 border 属性是没有 0.5 这个值的,我们看下效果
上面是 0.5 像素的边框,下面是 1 像素的边框,从肉眼上就可以看出差别。
代码如下:
<div class="weui_cells">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<p>我是0.5像素</p>
</div>
<div class="weui_cell_ft">说明文字</div>
</div>
</div>
<style>
.weui_cells_a:before {
content: " ";
position: absolute;
left: 0;
right : 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
/*这是before和after之间的区别*/
top: 0;
}
.weui_cells_a:after {
content: " ";
position: absolute;
left: 0;
right : 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
/*这是before和after之间的区别*/
bottom: 0;
}
</style>
参考
微信 weui 初体验的更多相关文章
- 【尝新】微信小程序初体验
文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434 根据文档地址中下载微信开发工具后,按照文档指引可以创建一个快速体验的小d ...
- 微信小程序初体验,入门练手项目--通讯录,部署上线(二)
接上一篇<微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器>:https://www.cnblogs.com/chengxs/p/9898670.html 开发微信小程序最尴尬 ...
- Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- Scala 深入浅出实战经典 第66讲:Scala并发编程实战初体验
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- Scrapy 初体验
开发笔记 Scrapy 初体验 scrapy startproject project_name 创建工程 scrapy genspider -t basic spider_name website. ...
- 浅谈IT技术女转战微电商初体验
今天闲来无事,突然想翻看下之前写的技术博客,很是意外,居然那么多阅读量,于是想想做微商也有一段时间了,决定写写初入微商的初体验. 先自我介绍一下,本人是一名理工女,做IT行业的,这个行业也许有人了解, ...
- Python基础学习参考(一):python初体验
一.前期准备 对于python的学习,首先的有一个硬件电脑,软件python的运行环境.说了一句废话,对于很多初学者而言,安装运行环境配置环境变量的什么的各种头疼,常常在第一步就被卡死了,对于pyth ...
随机推荐
- Django思维导图
- Svn和jekins的使用
首先是svn的安装, 在安装svn的服务端时,需要注意选择第二项,这样才能在idea中使用svn, 然后就是在idaa中配置svn插件. 插件的使用 从svn库中检出项目 然后在这个地址中填入你需要导 ...
- centos7 虚拟机中,网卡不启动的解决方式
使用NAT模式的虚拟centos, 只显示两个网卡,无法连接外网, 输入systemctl start network后报错信息" Restarting network (via syste ...
- leetcode 90. 子集 II JAVA
题目: 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: [ [2], [1], [1,2,2] ...
- WEB-INFO 目录
WEB-INF下面的内容都是只能由服务器级别才能访问,客户端并不能访问. 转发就是服务器级别,浏览器的地址不会变,因为,客户端发送一个请求,服务器受理之后,发现要请求内容还要再去别的请求,那么转发就是 ...
- JDK源码学习之 集合实现类
一.HashMap (1) 简介:java1.8版本之前HashMap的结构图如下: 数组的每个元素都是一个单链表的头节点,链表是用来解决冲突的,如果不同的key映射到了数组的同一位置处,就将其放入单 ...
- Ubuntu16.04 / OpenCV / Python 源码安装
为什么需要源码安装? 1. 对 Python 版的 OpenCV,Ubuntu 有两种安装方式: 源码安装:官网(https://opencv.org/releases.html)下载源代码,在机器上 ...
- Hadoop2.0.0+CDH4.5.0集群配置
Hadoop 2.0.0-cdh4.5.0安装:http://blog.csdn.net/u010967382/article/details/18402217 CDH版本下载:http://arch ...
- DOM时钟
使用JS使时钟运动 DOM运动,主要操作css3中transform:rotate(): 计时器setInterval(),setTimeout(),如何防止时钟偷停; 时钟的时针.分针.秒针的运动的 ...
- EJB3 EntityBean中EntityManager的管理类型
EJB中EntityManager的管理方式有两种:Container-managed EntityManager和Application-managed EntityManager 即容器管理的En ...