下载掌阅APP，畅读海量书库
立即打开
参照具体需求说明，按样图完成内容页面的布局，如图2-7所示。
1）页面划分为左、中、右3个区域，每个区域内都有3个元素；设有背景色，总宽度为屏幕的100%。
2）每个区域中都有内容区，内容区居中于容器中，样式设置合理。
图2-7 按样图完成内容页面的布局
1 打开index.wxml，添加＜view class="content"＞组件，并在其中添加＜view class="contentL"＞、＜view class="contentM"＞、＜view class="contentR"＞这3个＜view＞，且每个＜view＞里都添加了3个＜view＞。
当视图页面的组件过多时，采用缩进的方法对代码进行格式化管理，显得更规范。
在视图页面设计的入门学习中，给组件设置不同的底色，更容易帮助设计者观察组件的区域所在及样式的变化。
2 打开index.wxss，添加.content、.contentL、.contentM、.contentR、.subcontentL等样式，实现视图效果，如图2-7所示。
