3.8　页面的根元素page

到目前为止，我们的welcome页面已经像那么回事儿了。但页面的样式和设计图还不太一样，设计图中整个页面呈现的是橘红色，而现在的页面还是白色。那么，来修改一下页面的背景颜色吧。

要修改页面整体的背景色，需要寻找一个包裹所有页面元素的容器，并设置这个容器的背景色。那么，首先尝试给页面最外层view（class="container"的这个view）一个背景色。在welcome.wxss文件中的.container样式里新增属性background-color: #ECC0A8。

接着保存预览一下增加样式后的页面，它将呈现如图3-18所示的效果。

图3-18　设置容器view后的页面效果

并不是整个页面都呈现出橘红色，只是有元素占据的地方才呈现出橘红色。原因是因为最外层的container view没有固定的高度，它的高度由其内部子元素决定，所以橘红色部分的下边刚好和按钮的下边重合。如何解决这个问题呢？

可以通过给container view一个固定的高度来解决这个问题，但这并不是最好的办法。因为在不同的机型上，屏幕的尺寸是不一样的，固定的高度无法去适配不同的机型，可能出现滚动条，也可能橘红色无法覆盖整个页面。

当然，用我们前面学到的rpx是可以解决这个问题的，将container view的高度单位设置为rpx，就可以让它随着不同的机型进行自适应调整。但这看起来很蠢，高度具体设置多少，还需要我们了解iPhone 6的屏幕分辨率。所以，这依然不是一个很好的解决方案。

其实，在container view的外边，小程序还有一个默认的容器元素：page。我们可以在开发工具中的Wxml这个Pannel中看一下welcome页面的页面结构，如图3-19所示。

图3-19　用Wxml Pannel查看页面结构

在class=“container”这个view的外边还有一个容器元素：page。这是MINA框架为大家默认添加的。每个小程序页面的最外层都有这个page元素。page元素代表着页面这个整体，所以只需要对page设置背景色即可实现设计图里的效果。在welcome.wxss文件的尾部追加以下样式：

保存后，页面将呈现出如图3-20所示的效果。

图3-20　对page设置背景色后的页面效果

page代表着整个页面的容器，如果想对页面整体做样式或者属性设置，那么应该考虑page这个页面的根元素。

现在，welcome页面的顶部还有一块儿黑黢黢的长条，这实在是太难看了。我们下个小节来解决这个问题。