微信 weui 初体验

时间:2021-10-12 10:49:25

最近微信推出他们自己的H5组件(weui)组件的优点有两个:

  1. 做为开发者的我们可以不用写太多css,直接拿过来就可以用。
  2. 组件都有点击态,大大增加了用户的体验好感
  3. 高清屏幕下 border : 0.5

1,何为点击态

当用手指触摸某个按钮的时候,按钮会变成深色,离开后按钮颜色自动恢复,这个效果让用户的体验感倍增。

微信 weui 初体验

2,高清屏幕下的 border : 0.5 像素

正常情况下网页的 border 属性是没有 0.5 这个值的,我们看下效果

微信 weui 初体验

上面是 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>

参考

http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme 3041

微信 weui 初体验的更多相关文章

  1. 【尝新】微信小程序初体验

    文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434 根据文档地址中下载微信开发工具后,按照文档指引可以创建一个快速体验的小d ...

  2. 微信小程序初体验,入门练手项目--通讯录,部署上线&lpar;二&rpar;

    接上一篇<微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器>:https://www.cnblogs.com/chengxs/p/9898670.html 开发微信小程序最尴尬 ...

  3. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

  4. 【腾讯Bugly干货分享】基于 Webpack &amp&semi; Vue &amp&semi; Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  5. Scala 深入浅出实战经典 第66讲:Scala并发编程实战初体验

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  6. 基于 Webpack &amp&semi; Vue &amp&semi; Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  7. Scrapy 初体验

    开发笔记 Scrapy 初体验 scrapy startproject project_name 创建工程 scrapy genspider -t basic spider_name website. ...

  8. 浅谈IT技术女转战微电商初体验

    今天闲来无事,突然想翻看下之前写的技术博客,很是意外,居然那么多阅读量,于是想想做微商也有一段时间了,决定写写初入微商的初体验. 先自我介绍一下,本人是一名理工女,做IT行业的,这个行业也许有人了解, ...

  9. Python基础学习参考(一):python初体验

    一.前期准备 对于python的学习,首先的有一个硬件电脑,软件python的运行环境.说了一句废话,对于很多初学者而言,安装运行环境配置环境变量的什么的各种头疼,常常在第一步就被卡死了,对于pyth ...

随机推荐

  1. Datatables事件

    DataTables格式化渲染加上的html代码按一般方式绑定事件可能会没效果,通过以下方式可以解决 $(document).on("click","#checkchil ...

  2. Xcode6 ADD Copy Files Build Phase 是灰色的

    在学习的怎样写frameWork的时候,查看一个教程How to Create a Framework for iOS  [一个中文翻译 创建自己的framework] 其中一个步骤就是添加一个Cop ...

  3. TCP&sol;UDP端口列表

    http://zh.wikipedia.org/wiki/TCP/UDP%E7%AB%AF%E5%8F%A3%E5%88%97%E8%A1%A8 TCP/UDP端口列表     本条目可通过翻译外语维 ...

  4. 转&colon; Oracle中的物化视图

    物化视图创建语法:CREATE MATERIALIZED VIEW <schema.name>PCTFREE <integer>--存储参数PCTUSED <intege ...

  5. 【项目经验】如何用TexturePacker &amp&semi; Physicseditor开发游戏

    首先感谢Andreas的license.先广告一下Andreas. ------------------------------------------------------------------ ...

  6. cnn常用参数记录

    1. epoch 在代码中经常见到n_epochs这个参数,该参数到底是什么意思呢?答案如下: 在一个epoch中,所有训练集数据使用一次 one epoch = one forward pass a ...

  7. windows环境变量如何在cmd中打印

    在windows的cmd下,用"set"命令可以得到全部的环境变量,如何想得到某个环境变量,直接这样"set path"就可以了. set不仅如何,还有其他功能 ...

  8. MySQL存储引擎:InnoDB和MyISAM的差别&sol;优劣评价&sol;评测&sol;性能测试

    InnoDB和MyISAM简介 MyISAM:这个是默认类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的 顺序访问方法) 的缩写 ...

  9. Hibernate 自动生产表

    hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. 今天就来演示一下Hibernate最初级的 ...

  10. pyCharm安装破解

    补丁破解 下载 http://idea.lanyus.com/jar/JetbrainsCrack-2.7-release-str.jar 并将 JetbrainsCrack-2.7-release- ...