微信小程序的文件主要由wxml,wxss,js,json四部分组成,其实和web开发很类似,就是多了一个json文件,里面写的是一些配置文件。对页面布局的处理,主要就是通过编写wxss文件。
先看一些效果,文字只是用来做测试的,内容可以修改,主要说明两个按钮这部分。
wxml文件代码:
<view class="btns">
<button class="submitbtn" form-type="submit" >
提交
</button>
<button class="resetbtn" form-type="reset">
重置
</button>
</view>
wxss文件代码:
.btns{
position: fixed;
bottom: 0px;
z-index: 1;
width: 95%;
background: #FFFFFF;
height: 120rpx;
}
.submitbtn{
width:45% !important;
float: left;
background-color: paleturquoise;
}
.resetbtn{
width: 45% !important;
float: right;
background-color: palevioletred;
}
wxss里面用到的属性值和css非常相似。
解释一下!important,这个主要和层叠有关系,如果页面没有特别复杂可以不用加。层叠的意思就是说如果一个文件中多处都定义了某个具体的属性值,如何取舍的规则。主要看三方面,重要性,特殊性,源次序。加了!important,表示重要程度最高,当有其他地方也定义了这个属性值时,渲染时要根据!important。
btns类选择器
position属性值设定按钮不移动位置
bottom属性值将包含块限定在最底端
z-index属性值谁大谁浮在最上面,即文字和按钮显示时,按钮在问卷内容上方
其他几个值就是颜色宽高的设置
其他两个选择器,float浮动,一个左浮动,一个右浮动。设置宽度百分比是为了让看起来距离比例更加协调。