一、前一篇我们用.wxml文件搭建出来了页面框架，如下图：
但是页面里的内容，包括图片、文字都是按默认格式显示的。怎么才能按照我们想要的样式显示呢？
※ 预想，先定个想像的结果：
<p style="text-indent:50px;">1.图片缩小、居右
<p style="text-indent:50px;">2.每行字体比前一行小，名字加粗
<p style="text-indent:50px;">3.每行颜色都不一样
<p style="text-indent:50px;">4.每行居左、居中、居右交替
<p style="text-indent:50px;">
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
- 尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>设备</td>
<td>rpx换算px (屏幕宽度/750)</td>
<td>px换算rpx (750/屏幕宽度)</td>
</tr>
<tr>
<td>iPhone5</td>
<td>1rpx = 0.42px</td>
<td>1px = 2.34rpx</td>
</tr>
<tr>
<td>iPhone6</td>
<td>1rpx = 0.5px</td>
<td>1px = 2rpx</td>
</tr>
<tr>
<td>iPhone6s</td>
<td>1rpx = 0.552px</td>
<td>1px = 1.81rpx</td>
</tr> 开始吧。
<h3 id="%E4%BA%8C%E3%80%81%E5%85%88%E7%9C%8B%E7%9C%8B%E5%AE%98%E6%96%B9%E7%BB%99%E7%9A%84%E5%8F%82%E6%95%B0%EF%BC%88%E5%88%AB%E5%A4%AA%E7%BA%A0%E7%BB%93%EF%BC%8C%E7%94%A8%E7%9A%84%E6%97%B6%E5%80%99%E5%86%8D%E6%9F%A5%EF%BC%89%EF%BC%9A">二、先看看官方给的<a href="http://developers.weixin.qq.com/miniprogram/dev/component/image.html" rel="nofollow">image参数（别太纠结，用的时候再查）：
<table>
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
<table>
使用flex布局，默认布局下块级元素是会换行的，但设置了flex布局后默认就都水平排列了（水平方向）justify-content:
<p style="text-indent:50px;">flex-start（居于轴线的开头）
<p style="text-indent:50px;">center（居于轴线的中间）
<p style="text-indent:50px;">flex-end（居于轴线的末端）
<p style="text-indent:50px;">space-around（将子元素按比例排列在轴线上）
<p style="text-indent:50px;">space-between（将子元素排列在轴线两端） （垂直方向）align-items:
<p style="text-indent:50px;">同justify-content
图片设置代码：
.wxml
<pre class="has">
.wxss
<pre class="has">
.imagesize{
display:flex; //flex布局
align-items: flex-start; //垂直轴线的开头
justify-content: flex-end; //水平轴线的末端
}
.imagesize image { //设置图片尺寸，**这里是我在官方那没找到的
width: 400rpx;
height: 400rpx;
}
字体设置
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">wxss 文本属性（text）</td>
</tr>
<tr>
<td>属性</td>
<td>说明</td>
<td>语法(属性值)</td>
</tr>
<tr>
<td>color</td>
<td>设置文本颜色</td>
</tr>
<tr>
<td>direction</td>
<td>设置文本方向。</td>
<td>ltr:文本方向从左到右;rtl:文本方向从右到左</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>设置字符间距</td>
</tr>
<tr>
<td>line-height</td>
<td>设置行高</td>
</tr>
<tr>
<td>text-align</td>
<td>对齐元素中的文本</td>
<td>left：把文本排列到左边。默认值，由浏览器决定。
right：把文本排列到右边。
center：把文本排列到中间。
justify：实现两端对齐文本效果。
inherit: 规定应该从父元素继承 text-align 属性的值。</td>
</tr>
<tr>
<td>text-decoration</td>
<td>向文本添加修饰</td>
<td>underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。</td>
</tr>
<tr>
<td>text-indent</td>
<td>缩进元素中文本的首行</td>
</tr>
<tr>
<td>text-shadow</td>
<td>设置文本阴影</td>
<td>text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,允许负值;
v-shadow:垂直阴影的位置,允许负值;
blur:模糊的距离;
color:阴影的颜色</td>
</tr>
<tr>
<td>text-transform</td>
<td>控制元素中的字母</td>
<td>capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。</td>
</tr>
<tr>
<td>unicode-bidi</td>
<td>设置或返回文本是否被重写 </td>
</tr>
<tr>
<td>vertical-align</td>
<td>设置元素的垂直对齐</td>
</tr>
<tr>
<td>white-space</td>
<td>设置元素中空白的处理方式</td>
</tr>
<tr>
<td>word-spacing</td>
<td>设置字间距</td>
</tr>
<pre class="has">
<code class="language-css">
.wxss
<pre class="has">
.titlesize{
font-size: 45px; //字号
font-weight: bold; //加粗
text-align:center; //居中
color:red //红色
}
.introsize{
font-size: 20px;
font-weight: normal;
text-align:left;
color:blue
}
.phonesize{
font-size: 18px;
font-weight: normal;
text-align:right;
color:green
}
.adresssize{
font-size: 16px;
font-weight: normal;
text-align:center;
color:salmon
}
.wechatsize{
font-size: 14px;
font-weight: normal;
text-align:left;
color:darkblue
}
.emailsize{
font-size: 12px;
font-weight: normal;
text-align:right;
color:lightblue
}
先看显示结果图（代码等下完整给）：
已完成预想的4点。
三、代码（主要看懂代码，要改的再查也行）：
其实只是在.wxml文件里加了class=‘’，用来声明样式名。
又在.wxss里给出了详细设置。
aboutme.wxml
<pre class="has">
aboutme.wxss
<pre class="has">
.imagesize{
float: right;
}
.imagesize image {
width: 400rpx;
height: 400rpx;
}
.titlesize{
font-size: 45px;
font-weight: bold;
text-align:center;
color:red
}
.introsize{
font-size: 20px;
font-weight: normal;
text-align:left;
color:blue
}
.phonesize{
font-size: 18px;
font-weight: normal;
text-align:right;
color:green
}
.adresssize{
font-size: 16px;
font-weight: normal;
text-align:center;
color:salmon
}
.wechatsize{
font-size: 14px;
font-weight: normal;
text-align:left;
color:darkblue
}
.emailsize{
font-size: 12px;
font-weight: normal;
text-align:right;
color:lightblue
}
谢谢阅读。共同进步！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。