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刷题之#56-合并区间(Merge Intervals)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3676 访问. 给出一个区间的集合,请合并所有重叠的区间. 输入: ...

  2. golang中type关键字使用

    type关键字使用 type是go语法里的重要而且常用的关键字,type绝不只是对应于C/C++中的typedef.搞清楚type的使用,就容易理解go语言中的核心概念struct.interface ...

  3. Visual Studio自动编译gRPC工程的设置

    前段时间研究一个java程序,增加一些功能.其中用到java和C#的通信.自然,有多种办法,后来实际上是用javascript调用C#的REST WCF服务实现的.但是在查资料的过程中,发现有个Pro ...

  4. Nmap在实战中的高级用法(详解)

    @ 目录 Nmap在实战中的高级用法(详解) Nmap简单的扫描方式: 一.Nmap高级选项 1.查看本地路由与接口 2.指定网口与IP地址 3.定制探测包 二.Nmap扫描防火墙 1.SYN扫描 2 ...

  5. mycat数据库集群系列之mycat读写分离安装配置

    最近在梳理数据库集群的相关操作,现在花点时间整理一下关于mysql数据库集群的操作总结,恰好你又在看这一块,供一份参考.本次系列终结大概包括以下内容:多数据库安装.mycat部署安装.数据库之读写分离 ...

  6. SpringBoot 集成SpringSecurity JWT

    目录 1. 简介 1.1 SpringSecurity 1.2 OAuth2 1.3 JWT 2. SpringBoot 集成 SpringSecurity 2.1 导入Spring Security ...

  7. magento2 定时任务

    * * * * * /usr/bin/php /www/wwwroot/m2.demo.evebit.cn/bin/magento cron:run | grep -v "Ran jobs ...

  8. 第5篇 Scrum 冲刺博客

    1.站立会议 照骗 进度 成员 昨日完成任务 今日计划任务 遇到的困难 钟智锋 完成技能 完全重构游戏逻辑代码,并编写调试模块 队友的代码已经和想法相去甚远 庄诗楷 制作了开始游戏的界面 进行了相关的 ...

  9. 将Darknet编译成API形式的so文件

    Makefile: GPU= CUDNN= OPENCV= OPENMP= DEBUG= ARCH= -gencode arch=compute_30,code=sm_30 \ -gencode ar ...

  10. 为wordpress的分类以及子分类指定固定模版

    在wordpress主题开发有多个不同分类页面时,通常使用category-{slug}.php的方式分别为每个分类开发不同的页面模版,slug为该分类的别名,并且无需其他设置仅仅以此命名即可. 但是 ...