- view标签就等同于div标签
- 通过组合不同基础组件构建界面,组件可以通过class定义样式
<view class='item'>
<image class='photo' src='/asset/logo.jpg' ></image>
<input class='username' type='text' placeholder='请输入用户名'></input>
<text class='txt'>文字</text>
</view>
- 使用rpx单位可以实现自适应大小
- 小程序规定宽度750rpx,1rpx等于1px,建议UI设计稿已iphone6(750px)为基准进行设计
.photo{
width: 750rpx;
height: 400rpx;
position: absolute;
bottom: 0
}
.txt{
display: block;
width: 100%;
height: 400rpx;
line-height: 400rpx;
font-size: 36rpx;
text-align: center;
background-color:#eee;
}
.username{
width: 350rpx;
height: 60rpx;
font-size: 26rpx;
border: 1px solid #e9e9e9;
text-indent: 10rpx;
margin: 30rpx 0 30rpx 0;
}