微信小程序wxml和wxss样式
来源:互联网 发布:乐乎社区是什么意思 编辑:程序博客网 时间:2024/03/29 21:12
对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。
一、wxml
界面结构wxmL比较容易理解,主要是由八大类基础组件构成:
关于这八大类的属性和具体用法可参考以下参考文献链接:
http://www.w3cschool.cn/weixinapp/itz51q8o.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
二、wxss
wxml理解起来容易,但光搭好了框架,并不能达到我们想要的界面效果,这就需要用到wxss样式了。
wxss样式决定了组件应该如何显示,并在css的基础上做了一些功能扩展,主要包括:
1.尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下:
2.样式导入
可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。
例如:
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
margin:15px;
}
app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。
对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)inherit规定应该从父元素继承 position 属性的值
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框background-clip指定背景图像的绘画区域属性值,同上background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
local 背景图片随滚动元素滚动background-image指定要使用的一个或多个背景图像url('URL') 图像的URL
none 无图像背景会显示。这是默认
inherit 指定背景图像应该从父元素继承
right:把文本排列到右边。
center:把文本排列到中间。
justify:实现两端对齐文本效果。
inherit: 规定应该从父元素继承 text-align 属性的值。text-decoration向文本添加修饰underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。text-indent缩进元素中文本的首行text-shadow设置文本阴影text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,允许负值;
v-shadow:垂直阴影的位置,允许负值;
blur:模糊的距离;
color:阴影的颜色text-transform控制元素中的字母capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。unicode-bidi设置或返回文本是否被重写 vertical-align设置元素的垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。font-variant以小型大写字体或者正常字体显示文本normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。font-weight指定字体的粗细normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
inherit 规定应该从父元素继承字体的粗细。font-size指定文本的字体大小smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。font-family指定文本的字体系列
有一些属性值太多且实际应用的比较少 可以参考w3cschool的css文档:
http://www.w3cschool.cn/css/css-tutorial.html
对于微信小程序的文档手册可参考以下链接:
http://www.w3cschool.cn/weixinapp/9wou1q8j.html
- 微信小程序wxml和wxss样式
- 微信小程序-wxml和wxss样式
- 微信小程序-订单评价交互样式(WXML&WXSS&JS)
- 微信小程序中wxml和wxss的样式说明,彻底搞定布局排版
- 3.微信小程序-B站:wxml和wxss文件
- 微信小程序 WXML、WXSS 和JS介绍及详解
- 微信小程序 四 wxss引用 wxml引用
- 微信小程序-入门篇(app.wxml及app.wxss)
- 微信小程序引入模块中wxml、wxss、js
- 微信小程序wxss设置样式
- 小程序 | webstorm支持.wxml和.wxss文件高亮文本
- 微信小程序入门五:样式表wxss
- 小程序 wxss: 样式
- 小程序 wxss样式总结
- 微信小程序为什么不用HTML5、CSS,自己搞了个WXML、WXSS,很多框架用不了,好处一点不知道?
- 微信小程序WXSS 尺寸单位、样式导入、内联样式、选择器、全局样式与局部样式
- 微信小程序 WeUi.wxss
- 微信小程序wxss文件属性
- STM32命名方法
- linux 下获取当前工作路径的方法
- Openstack Neutron Dhcp 无法获取IP地址问题
- jquery使用 Form submission canceled because the form is not connected
- 算法小结(Graph)
- 微信小程序wxml和wxss样式
- [SMOJ1789]可割点
- mysql是怎么实现的
- Python中os和shutil模块实用方法集锦
- java笔记
- Linux TCP/IP 协议栈源码分析
- [玲珑杯] Problem D: hipercijevi [bfs][卡时]
- centos安装升级版GCC
- 变态盒模型