问题描述
在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高。光有浮动是远远不够的,如果一个板块内的组件过多就会变得混乱。所以就需要用设置内边框来调整位置。微信小程序中会有很多的头像设置,所以就会用到圆框。那么如何来设置css盒子的内边框和头像的圆框呢?
解决方案
跟网页一样小程序也是用很多标签来定义的。需要用css盒子来设置解决问题,并调用来实现问题。
(1)内边距
我们需要用到margin这个标签代表内边距,用rpx来设置距离单位。在.wxss中设置,然后在wxml中调用就可以了。
margin-left:离左边的距离 margin-right:离右边的距离 margin-top:离上边的距离 margin-bottom:离下边的距离 margin-top: 100rpx; margin-left: 10rpx |
---|
(2)框
用border来定义框线的宽度,用width和heigth来设置框的长宽。
solid来定义颜色。跟内边距一样在.wxss中设置,然后在wxml中调用。
.view4{ margin-top: 0rpx; margin-left: 0rpx; width: 800rpx; height: 115rpx; border: 5rpx solid whitesmoke} |
---|
(3)圆框
border-radius:rpx定义圆框。
.view3{ margin-top: 350rpx; margin-left: -190rpx; height: 60rpx; width: 220rpx; float: left; background-color: rgb(131, 178, 240); border-radius: r5px} |
---|
(4)圆框头像
跟上面的圆框一样也是用border-radius来定义,但不同的是后面的设置:%。就是一个圆的弧度不同,rpx是将框的四角成为圆弧而%是成为一个圆。
.view1{ float: left; margin-left: 290rpx; margin-top: 120rpx; border-radius: 50%} |
---|
结语
对标签的正确使用和调用,最麻烦的是对
标签后面的单位设置,必须充满耐心,你需要不断地调才能调到你需要的位置,才能使界面美观。
END
实习编辑 | 王文星
责 编 | 江汪霖