微信小程序常用样式
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;//透明度
}
微信小程序常用样式的更多相关文章
- 微信小程序常用样式汇总
本文系转载: 原文作者:chenzheng8975 原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html 微信小程序常用样式汇总 小程序特 ...
- 微信小程序前端样式WXSS书写
微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...
- 微信小程序wxss样式详解
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序常用控件汇总
1.图片标签: <image src="/images/aaa.png"></image> 2.文本标签: <text>Hello</te ...
- 微信小程序(四)-样式 WXSS
样式 WXSS https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html 1.尺寸单位 rpx(respons ...
- 微信小程序常用API组件开发
关于小程序 张小龙定义小程序: 1.不需要下载安装即可使用: 2.用完即走,不用关心是否安装太多应用: 3.应用无处不在,随时可用. 特点: 1.适合业务逻辑简单的应用: 2,.适合低频应用: 3.适 ...
- 微信小程序中样式问题
1.去除button按钮的默认样式 这是button按钮自带的默认样式 button { position:relative; display:block; margin-left:auto; mar ...
- 微信小程序常用代码(1)——tab切换
<view class="font-bold tab-content"> <!-- 循环列表 --> <block wx:for=&quo ...
- 微信小程序——常用快捷键【四】
格式调整 ctrl+[, ctrl+]:代码行缩进(向前|向后) ctrl+shift+[, ctrl+shift+] :折叠打开代码块 ctrl+C, ctrl+V:复制粘贴,如果没有选中任何文件则 ...
随机推荐
- C#LeetCode刷题之#56-合并区间(Merge Intervals)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3676 访问. 给出一个区间的集合,请合并所有重叠的区间. 输入: ...
- golang中type关键字使用
type关键字使用 type是go语法里的重要而且常用的关键字,type绝不只是对应于C/C++中的typedef.搞清楚type的使用,就容易理解go语言中的核心概念struct.interface ...
- Visual Studio自动编译gRPC工程的设置
前段时间研究一个java程序,增加一些功能.其中用到java和C#的通信.自然,有多种办法,后来实际上是用javascript调用C#的REST WCF服务实现的.但是在查资料的过程中,发现有个Pro ...
- Nmap在实战中的高级用法(详解)
@ 目录 Nmap在实战中的高级用法(详解) Nmap简单的扫描方式: 一.Nmap高级选项 1.查看本地路由与接口 2.指定网口与IP地址 3.定制探测包 二.Nmap扫描防火墙 1.SYN扫描 2 ...
- mycat数据库集群系列之mycat读写分离安装配置
最近在梳理数据库集群的相关操作,现在花点时间整理一下关于mysql数据库集群的操作总结,恰好你又在看这一块,供一份参考.本次系列终结大概包括以下内容:多数据库安装.mycat部署安装.数据库之读写分离 ...
- SpringBoot 集成SpringSecurity JWT
目录 1. 简介 1.1 SpringSecurity 1.2 OAuth2 1.3 JWT 2. SpringBoot 集成 SpringSecurity 2.1 导入Spring Security ...
- magento2 定时任务
* * * * * /usr/bin/php /www/wwwroot/m2.demo.evebit.cn/bin/magento cron:run | grep -v "Ran jobs ...
- 第5篇 Scrum 冲刺博客
1.站立会议 照骗 进度 成员 昨日完成任务 今日计划任务 遇到的困难 钟智锋 完成技能 完全重构游戏逻辑代码,并编写调试模块 队友的代码已经和想法相去甚远 庄诗楷 制作了开始游戏的界面 进行了相关的 ...
- 将Darknet编译成API形式的so文件
Makefile: GPU= CUDNN= OPENCV= OPENMP= DEBUG= ARCH= -gencode arch=compute_30,code=sm_30 \ -gencode ar ...
- 为wordpress的分类以及子分类指定固定模版
在wordpress主题开发有多个不同分类页面时,通常使用category-{slug}.php的方式分别为每个分类开发不同的页面模版,slug为该分类的别名,并且无需其他设置仅仅以此命名即可. 但是 ...