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. 微信小程序常用样式汇总

    本文系转载: 原文作者:chenzheng8975 原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html 微信小程序常用样式汇总 小程序特 ...

  2. 微信小程序前端样式WXSS书写

    微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...

  3. 微信小程序wxss样式详解

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  4. 微信小程序常用控件汇总

    1.图片标签: <image src="/images/aaa.png"></image> 2.文本标签: <text>Hello</te ...

  5. 微信小程序(四)-样式 WXSS

    样式 WXSS https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html 1.尺寸单位 rpx(respons ...

  6. 微信小程序常用API组件开发

    关于小程序 张小龙定义小程序: 1.不需要下载安装即可使用: 2.用完即走,不用关心是否安装太多应用: 3.应用无处不在,随时可用. 特点: 1.适合业务逻辑简单的应用: 2,.适合低频应用: 3.适 ...

  7. 微信小程序中样式问题

    1.去除button按钮的默认样式 这是button按钮自带的默认样式 button { position:relative; display:block; margin-left:auto; mar ...

  8. 微信小程序常用代码(1)——tab切换

          <view class="font-bold tab-content"> <!-- 循环列表 --> <block wx:for=&quo ...

  9. 微信小程序——常用快捷键【四】

    格式调整 ctrl+[, ctrl+]:代码行缩进(向前|向后) ctrl+shift+[, ctrl+shift+] :折叠打开代码块 ctrl+C, ctrl+V:复制粘贴,如果没有选中任何文件则 ...

随机推荐

  1. C#LeetCode刷题之#622-设计循环队列​​​​​​​(Design Circular Queue)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4126 访问. 设计你的循环队列实现. 循环队列是一种线性数据结构 ...

  2. C#LeetCode刷题之#67-二进制求和(Add Binary)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3929 访问. 给定两个二进制字符串,返回他们的和(用二进制表示) ...

  3. [C/C++]快速读入代码(快读)

    快读 1.为什么要有快读 好吧,有些题目看上去十分简单,例如https://www.luogu.com.cn/problem/P4305这道题,实际上数据量巨多,光是一个测试点就可能有几个MB,在这种 ...

  4. mac 安卓生成证书(uniapp项目安卓证书申请)

    mac  安卓生成证书 义务需求: 最近在开发基于uniapp框架的app,到了打包发布的阶段,来尝试打包为安卓的apk安装包.在用HBuild打包的时候需要提供安卓的数字证书(.keystore 文 ...

  5. jraft日志复制

    jraft的日志复制是指从leader往follower复制logEntry的过程. 日志复制从节点成为leader开始.在nodeImpl的becomeLeader中 private void be ...

  6. Spring MVC中处理中文问题

    之前练习过提交表单数据,但是提交的数据包含中文,这一篇练习如何处理中文.在Spring MVC中处理中文问题和Filter处理中文问题是一样的手段 @ 目录 Filter addProduct.jsp ...

  7. 第1章 Hive入门

    第1章 Hive入门 1.1 什么是Hive Hive:由Facebook开源用于解决海量结构化日志的数据统计. Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提 ...

  8. 第5章 JDBC/ODBC服务器

    第5章 JDBC/ODBC服务器 Spark SQL也提供JDBC连接支持,这对于让商业智能(BI)工具连接到Spark集群上以 及在多用户间共享一个集群的场景都非常有用.JDBC 服务器作为一个独立 ...

  9. 设置Anaconda启动jupyter的默认目录

    要解决的问题:安装好Anaconda后打开jupyter总是会自动跳到c:下的用户目录,通过以下方法可以修改其默认打开的目录 吐槽:竟然没有设置默认打开目录的选项,只能通过修改配置文件完成,让人不爽. ...

  10. client-go workqueue demo

    链接地址:https://github.com/kubernetes/client-go [root@wangjq examples]# tree . ├── create-update-delete ...