下载掌阅APP，畅读海量书库
立即打开
实现多个元素按样图设计，如图2-1所示。
1）页面划分为上、下两个区域，区域设有背景色和边界，宽度为屏幕的90%，居中于屏幕。
2）第一个区域内纵向显示两个子区域，子区域设有背景色，宽度为容器的90%。
3）第二个区域内横向显示两个子区域，子区域设有背景色，每个宽度为容器的50%以下。
图2-1 多个元素按样图设计
1 打开index.wxml，添加＜view class="header"＞组件，并在其中添加两个＜view class="subheader"＞组件。
2 打开index.wxss，添加.header、.subheader样式，实现页面效果，如图2-2所示。
图2-2 页面效果
3 打开index.wxml，添加＜view class="content"＞组件，并在其中添加两个＜view class="subcontent"＞组件。
样式命令“margin:10rpx auto;”的作用是设置上边距（跟本标签上面的元素）为10rpx，左右为自动，即达到水平居中的效果。
4 打开index.wxss，添加.content、.subcontent样式，实现页面效果，如图2-3所示。
图2-3 页面效果
在网页的前端设计中，常使用DIV+CSS进行页面布局，其中＜div＞用于分割页面。
在小程序中，有一套类似＜div＞的容器组件，那就是＜view＞、＜scroll-view＞和＜movable-view＞等。
＜view＞是视图容器组件，没有特殊功能，也具有类似网页中＜div＞分割页面的功能，主要用于布局展示，是布局中最基本的组件，许多复杂的布局都可以通过嵌套＜view＞组件，设置相关WXSS实现。学习WXSS布局属性，可以参考网页的CSS布局属性。
页面布局class常见命名规范，建议用以下命名：
头：header。
内容：content/container。
尾：footer。
导航：nav。
侧栏：sidebar。
栏目：column。
页面外围控制整体布局宽度：wrapper。
左、右、中：left、right、center。
登录条：loginbar。
标志：logo。
广告：banner。
页面主体：main。
热点：hot。
新闻：news。
下载：download。
子导航：subnav。
菜单：menu。
子菜单：submenu。
搜索：search。
友情链接：friendlink。
页脚：footer。
版权：copyright。
滚动：scroll。