微信小程序开发6-WXSS
1.WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。
2.项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面。页面样式:与app.json注册过的页面同名且位置同级的WXSS文件。
3.页面样式
4.其它样式:其它样式可以被项目公共样式和页面样式引用。
5.在WXSS中,引入了rpx(responsive pixel)尺寸单位。引用新尺寸单位的目的是,适配不同宽度的屏幕,开发起来更简单。
6.WXSS引用:@import './test_0.wxss'
7.WXSS内联样式与Web开发一致。
8.选择器:
| 类型 | 选择器 | 样例 | 样例描述 |
|---|---|---|---|
| 类选择器 | .class | .intro | 选择所有拥有 class="intro" 的组件 |
| id选择器 | #id | #firstname | 选择拥有 id="firstname" 的组件 |
| 元素选择器 | element | view checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| 伪元素选择器 | ::after | view::after | 在 view 组件后边插入内容 |
| 伪元素选择器 | ::before | view::before | 在 view 组件前边插入内容 |
微信小程序开发6-WXSS的更多相关文章
- 解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
- 微信小程序开发:学习笔记[3]——WXSS样式
微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 微信小程序开发工具使用与设计规范(二)
[未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...
- 三言两语之微信小程序开发初体验(1)
一.前情 直接切入主题,微信发布了小程序,前端开发者表示,如果不会微信小程序的开发感觉就跟不上时代了,先解答几个容易出现歧义的问题 小程序就叫小程序,不叫应用号,因为apple不准,哈哈 小程序是 ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
- 微信小程序开发 -- 02
微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码 ...
- 微信小程序开发-新闻列表之新闻列表绑定
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...
- 从零入手微信小程序开发
前言: 哈哈,发现我写的随笔都是项目驱使的.当然,这篇也是项目驱使的咯,前段时间领导在玩微信时候发现了微信小程序的好处,流程,切换速度快等,然后就让小弟研究研究小程序的实现. 补充下,博客大多都是处理 ...
随机推荐
- mfix中统计气泡体积
先转换为point data 提取空隙率在0.45-1.0之间的网格,为后面提取气泡内网格做准备 把free board部分去掉 然后积分 选择cell data后就得到气泡内所有网格的体积和,如果网 ...
- Zynq-7000 FreeRTOS(二)中断:串口Uart中断
总结Zynq-7000器件的PS上的串口中断,为FreeRTOS中断实验做准备.
- Mac 10.12为打开终端增加快捷键(转)
1.在实用工具中打开Automator.app 2.选择新建,然后选择服务 3.服务收到选择为没有输入 然后在左边侧栏中双击Run AppleScript(有些系统会显示运行 AppleScript) ...
- Java网络编程(一)
Java网络编程: 1.1: 网络编程:对于我这个“研究不深”的网络菜鸟来说,我觉得网络编程就是实现计算机与计算机之间通信的编程.写些能够实现计算机与计算机之间的通信就行了(目前来说). 1.2:一台 ...
- Maven仓库汇总
来源:http://tianya23.blog.51cto.com/1081650/386908 1.maven 仓库地址: 共有的仓库http://repo1.maven.org/maven2/ht ...
- 深入理解java集合框架之---------HashTable集合
HashTable是什么 HashTable是基于哈希表的Map接口的同步实现 HashTable中元素的key是唯一的,value值可重复 HashTable中元素的key和value不允许为nul ...
- multi-threads JavaEE 容器
Thread -- Request What is recommended way for spawning threads from a servlet in Tomcat [duplicate] ...
- nginx 反向代理https
nginx 反向代理https 原来我用vertx创建了一个https apiserver,想着用nginx反向代理一下.证书是阿里云上免费一年的. 后来发现nginx要反向代理https自己也必 ...
- A/B_test改变新旧网页 观察用户的引流效果
代码处:https://github.com/xubin97/Data-analysis_exp2 分析A/B测试结果 目录 简介 I - 概率 II - A/B 测试 简介 首先这个项目数据来自某公 ...
- WordPress主题开发:为文章添加自定义栏目
开启自定义栏目:点击头顶的“显示选项”,勾选“自定义栏目” 然后编辑文章时,即可看见 实验: 定义名称为:play_url ,值为:http://www.xiami.com/widget/635357 ...