一、前一篇我们用.wxml文件搭建出来了页面框架，如下图：
但是页面里的内容，包括图片、文字都是按默认格式显示的。怎么才能按照我们想要的样式显示呢？
※ 预想，先定个想像的结果：
1.图片缩小、居右
2.每行字体比前一行小，名字加粗
3.每行颜色都不一样
4.每行居左、居中、居右交替
先了解一下wxss（不想看的直接看：二、先看看官方给的参数（别太纠结，用的时候再查））
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
- 尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
开始吧。
二、先看看官方给的image参数（别太纠结，用的时候再查）：
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| src | String | 图片资源地址 | ||
| mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 | |
| lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | 1.5.0 |
| binderror | HandleEvent | 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'} | ||
| bindload | HandleEvent | 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |
注1：image组件默认宽度300px、高度225px 注2：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
| 模式 | 值 | 说明 |
|---|---|---|
| 缩放 | scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| 缩放 | aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| 缩放 | aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| 缩放 | widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
| 裁剪 | top | 不缩放图片，只显示图片的顶部区域 |
| 裁剪 | bottom | 不缩放图片，只显示图片的底部区域 |
| 裁剪 | center | 不缩放图片，只显示图片的中间区域 |
| 裁剪 | left | 不缩放图片，只显示图片的左边区域 |
| 裁剪 | right | 不缩放图片，只显示图片的右边区域 |
| 裁剪 | top left | 不缩放图片，只显示图片的左上边区域 |
| 裁剪 | top right | 不缩放图片，只显示图片的右上边区域 |
| 裁剪 | bottom left | 不缩放图片，只显示图片的左下边区域 |
| 裁剪 | bottom right | 不缩放图片，只显示图片的右下边区域 |
此处重点：
使用flex布局，默认布局下块级元素是会换行的，但设置了flex布局后默认就都水平排列了
（水平方向）justify-content:
flex-start（居于轴线的开头）
center（居于轴线的中间）
flex-end（居于轴线的末端）
space-around（将子元素按比例排列在轴线上）
space-between（将子元素排列在轴线两端）
（垂直方向）align-items:
同justify-content
图片设置代码：
.wxml
<view class='imagesize'> //用class来声明样式名
<image src="{{img}}" class='in-image'> // in-img
</image>
</view>.wxss
.imagesize{
display:flex; //flex布局
align-items: flex-start; //垂直轴线的开头
justify-content: flex-end; //水平轴线的末端
}
.imagesize image { //设置图片尺寸，**这里是我在官方那没找到的
width: 400rpx;
height: 400rpx;
}字体设置
| wxss 文本属性（text） | ||
| 属性 | 说明 | 语法(属性值) |
| color | 设置文本颜色 | |
| direction | 设置文本方向。 | ltr:文本方向从左到右;rtl:文本方向从右到左 |
| letter-spacing | 设置字符间距 | |
| line-height | 设置行高 | |
| text-align | 对齐元素中的文本 | left：把文本排列到左边。默认值，由浏览器决定。 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 | 设置字间距 | |
| wxss 字体属性（font） | ||
| 属性 | 说明 | 语法(属性值) |
| font | 在一个声明中设置所有字体属性 | font:font-style font-variant font-weight font-size/line-height font-family(按顺序) |
| font-style | 指定文本的字体样式 | normal 默认值。浏览器显示一个标准的字体样式。 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 | 指定文本的字体系列 | |
.wxml
<view class='titlesize'>{{title}}</view> //声明titlesize样式名，下面也是
<view class='introsize'>介绍：{{intro}}</view>
<view class='phonesize' bindtap='callme'>手机：{{contact}}</view>
<view class='adresssize'>地址: {{address}}</view>
<view class='wechatsize'>微信号：{{wechat}}</view>
<view class='emailsize'>邮箱：{{email}}</view>.wxss
.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
<!--aboutme.wxml-->
<view class='imagesize'>
<image src="{{img}}" class='in-image'>
</image>
</view>
<view class='titlesize'>{{title}}</view>
<view class='introsize'>介绍：{{intro}}</view>
<view class='phonesize' bindtap='callme'>手机：{{contact}}</view>
<view class='adresssize'>地址: {{address}}</view>
<view class='wechatsize'>微信号：{{wechat}}</view>
<view class='emailsize'>邮箱：{{email}}</view>aboutme.wxss
.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
}谢谢阅读。共同进步！