用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序|CSS的内边距和圆框

Rolan 2019-12-9 00:02

本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高。 光有浮动是远远不够的,如果一个板块 ...

本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高。 光有浮动是远远不够的,如果一个板块内的组件过多就会变得混乱。 所以就需要用设置内边框来调整位置。 微信小程序中会有很多的头像设置,所以就会用到圆框。 那么如何来设置css盒子的内边框和头像的圆框呢?

解决方案

跟网页一样小程序也是用很多标签来定义的。 需要用css盒子来设置解决问题,并调用来实现问题。

(1)内边距

我们需要用到margin这个标签代表内边距,用rpx来设置距离单位。 在.wxss中设置,然后在wxml中调用就可以了。

  1. margin-left 离左边的距离
  2. margin-right 离右边的距离
  3. margin-top 离上边的距离
  4. margin-bottom 离下边的距离
  5. margin-top: 100rpx;
  6. margin-left: 10rpx

(2)框 
用border来定义框线的宽度,用width和heigth来设置框的长宽。

solid来定义颜色。 跟内边距一样在.wxss中设置,然后在wxml中调用。

  1. .view4{
  2. margin-top: 0rpx;
  3. margin-left: 0rpx;
  4. width: 800rpx;
  5. height: 115rpx;
  6. border: 5rpx solid whitesmoke
  7. }

(3)圆框

  1. border-radius rpx定义圆框。
  2. .view3{
  3. margin-top: 350rpx;
  4. margin-left: -190rpx;
  5. height: 60rpx;
  6. width: 220rpx;
  7. float: left;
  8. background-color: rgb(131, 178, 240);
  9. border-radius: r5px
  10. }

(4)圆框头像

跟上面的圆框一样也是用border-radius来定义,但不同的是后面的设置: %。 就是一个圆的弧度不同,rpx是将框的四角成为圆弧而%是成为一个圆。

  1. .view1{
  2. float: left;
  3. margin-left: 290rpx;
  4. margin-top: 120rpx;
  5. border-radius: 50%
  6. }

结语

对标签的正确使用和调用, 最麻烦的是对

标签后面的单位设置,必须充满耐心,你需要不断地调才能调到你需要的位置,才能使界面美观。

END

实习编辑 | 王文星

责 编 | 江汪霖

where2go 团队

微信号: 算法与编程之美

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 算法与编程之 来自: 微信公众号