结构与样式

  • 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;
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容