微信小程序常用样式汇总
本文系转载:
原文作者:chenzheng8975
原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html
## 微信小程序常用样式汇总
小程序特点:用完即走、低频使用、性能要求低,不支持webview;
- 以iphone6尺寸(750*1334)为视觉稿进行设计;
- iphone6下1px=1rpx=0.5pt iphone6 plux下1px=0.6rpx;
- 使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会;
1.设置全局字体样式app.wxss:
text{
font-family:MicroSoft yahei;
}
2.设置弹性盒子模型:
.container{
/*弹性模型*/
display:flex;
/*垂直方向 列方向 排布*/
flex-direction:column;
/*居中*/
align-items:center;
/*要从整体解决排布的问题是最好的方案*/
}
3.设置页面全屏样式及背景色:
page{
height:100%;
background:#b3d4db;
}
4.全局设置导航条颜色app.json:
"window": {
"navigationBarBackgroundColor": "#405f80"
}
5.页面设置导航条颜色和标题*.json:
{
"navigationBarBackgroundColor": "#405f80",
"navigationBarTitleText":"文与字"
}
6.设置字体属性:
.user-name{
font-size:32rpx;
font-weight:bold;
}
7.创建圆角矩形边框:
.moto-container{
border:1px solid #405f80;
width:200rpx;
height:80rpx;
border-radius:5rpx;
text-align:center;
}
8.外边距设置:
margin-top:20rpx;
margin-bottom:40rpx;
9.内边距设置:
padding-bottom:20rpx;
10.上、下边线设置:
border-bottom:1px solid #ededed;
border-top:1px solid #ededed;
11.文字间距设置:
letter-spacing:2rpx;
12.垂直居中(此元素放置在父元素的中部):
vertical-align: middle;
13.设置子元素Image样式:
.circle-img image{
width:90rpx;
height: 90rpx
}
14.最底层垂直居中横线样式:
.horizon{
width:660rpx;
height: 2rpx;
background-color: #e5e5e5;
vertical-align: middle;
position:relative;
top:46rpx;
margin: 0 auto;
z-index: -99
}
15.图片居中覆盖:
.audio{
width:102rpx;
height:110rpx;
position: absolute;
left: 50%;
margin-left: -51rpx;//经典水平居中方式
top:180rpx;
margin-top: 20rpx;
opacity:0.6;//透明度
}
微信小程序常用样式汇总的更多相关文章
- 微信小程序常用样式
1.设置全局字体样式app.wxss: text{ font-family:MicroSoft yahei; } 2.设置弹性盒子模型: .container{ /*弹性模型*/ display:fl ...
- 微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
- 微信小程序前端样式WXSS书写
微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...
- 微信小程序wxss样式详解
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序开发问题汇总
前言 经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版 本文档主要介绍该小程序在开发中所用到的技术,已经在 ...
- 微信小程序开发参考资料汇总
不错的微信小程序入门教程:微信小程序入门二: 条件.遍历.网络请求.获取本地图片http://blog.csdn.net/lecepin/article/details/54016701 微信小程序入 ...
- 微信小程序——报错汇总
tabBar.list[2].selectedIconPath 文件不存在 很明显是文件名错了,定义的my-acive,少写了个t,眼睛出问题了~ module "static/vant/c ...
- 微信小程序开发资料汇总
>> 微信小程序开发工具下载 社区推荐: >>蜂鸟-微信小程序开发者社区>> 很快-微信小程序开发者社区 博文推荐: >> 微信小程序开源Demo精选& ...
- 微信小程序常用控件汇总
1.图片标签: <image src="/images/aaa.png"></image> 2.文本标签: <text>Hello</te ...
随机推荐
- es7之修饰器
什么是修饰器 修饰器其实就是一个普通的函数,用来修饰类以及类的方法. 比如: @test class DecoratorTest { } function test(target) { target. ...
- Scrum 冲刺第一篇
我们是这次稳了队,队员分别是温治乾,黄思扬,莫少政,余泽端,江海灵 码云地址为:https://gitee.com/sixers/activityWall-Web 一.各个成员在 Alpha 阶段 ...
- Hive:数据倾斜
数据倾斜问题 数据倾斜是大数据领域绕不开的拦路虎,当你所需处理的数据量到达了上亿甚至是千亿条的时候,数据倾斜将是横在你面前一道巨大的坎.很可能有几周甚至几月都要头疼于数据倾斜导致的各类诡异的问题. 数 ...
- 通过jQuery给<li>绑定点击事件
背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){ commonAjaxCall ...
- 服务器学习--Linux、CentOS下安装zip与unzip指令
Linux下安装zip解压功能 Linux服务器上一般默认没是没有有安装zip命令 安装zip指令 apt-get install zip 或 yum install zip 输入zip OK li ...
- 目标检测的评价标准mAP, Precision, Recall, Accuracy
目录 metrics 评价方法 TP , FP , TN , FN 概念 计算流程 Accuracy , Precision ,Recall Average Precision PR曲线 AP计算 A ...
- css 盒子下
1.padding 有小属性 padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; 小属性 ...
- py2,py3区别 ,基础网络常识,多线程,
1.编译型:把代码编译成机器码,计算机找虚拟机执行代码,机器码交给计算技巧去运行 :C语言,java c# 解释型:边解释边执行 5.只有列表才能reverse 字符串需要索引[::-1] 6.py2 ...
- JS高阶---继承模式(借用构造函数继承+组合继承)
(1)借用构造函数继承 案例如下: 验证: (2)组合继承 案例如下: 验证如下: 结果如右图所示 . .
- CF1045B Space Isaac
原题链接 DOWNLOAD AS PDF 题目大意 \(0\sim m-1\)的数被分成两个集合,你可以分别从两个集合中取一个数相加并对\(m\)取模,求一不能构造出的数. 题解 感觉如果\(\col ...