全民家教欢迎页效果图小程序每个页面组成由4个部分：.wxss和.wxml和.js以及.json
其中.wxml(变种的html)和.wxss(变种的css样式表)，对于小程序前端开发至关重要。所以对于从web前端开发转到小程序开发的人来说，这个接触起来很容易。
但是对于一些像我这样半道出家，以前只会用DW或者可视化前端工具的人，css一知半解，自己想搞一个小程序前端页面非常困难(在不使用别人源码，自己手撸的前提下)。在我刚刚开发"全民家教"小程序的时候往往为了一个页面，甚至一个组件的摆放都大费周折，往往弄到半夜才勉强可以实现。
所以如果能够快速的预览出你写的wxss(css)是什么效果，那么对于提升前端开发效率是非常有效的！
废话少说，上干货：
第一步：在微信开发者工具中打开'元素选择'工具，也就是中间那个小鼠标。
小程序前端页面元素选择工具第二步：选择你想要修改的元素。以下面这个list上的按钮button为例。用这个小鼠标点击这个button的时候就会在下方显示出其对应的wxml和wxss列表。
选择元素小程序前端页面第三步：双击最右侧css样式，修改之，改成你想要的数据或者在空白处双击添加你想要的css修饰，修改完回车即可查看效果！注意此时的效果是临时的，需要接下来的一步！
页面效果与对应wxss内容第四步：将你认为满意的css添加到css列表中(快捷方式就是点击右上角的页面文件链接快速定位到文件中)，保存即可！
整个操作过程的视频如下：
01:12
