专栏首页算法与编程之美微信小程序|CSS的内边距和圆框

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

问题描述

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

实习编辑 | 王文星

责 编 | 江汪霖

本文分享自微信公众号 - 算法与编程之美(algo_coding)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 渗透测试安全检测漏洞

    最近渗透测试工作比较多没有空闲的时间来写文章,今天由我们Sine安全的渗透主管来普及一下java的安全测试基础,很多客户想要了解具体js的调用漏洞或提交play...

    网站安全专家
  • Ora2pg 把oracle数据导入到postgres

    小徐
  • [ 成为架构师系列 ] 1. 第一个 Java Web 程序

    打开 idea, New Project, 选择 Maven, 从 maven-archetype 创建, 找到 maven-archetype-webapp:

    一个会写诗的程序员
  • 【全栈修炼】422- RESTful 架构及实践 修炼宝典

    REST:(Representational State Transfer)即表现层状态转换,定义了资源的通用访问格式,是一种网络应用程序的设计风格和开发方式。

    pingan8787
  • Scrapy-笔记一 入门项目 爬虫抓取w3c网站

    学习自:http://blog.csdn.net/u012150179/article/details/32911511

    十四君
  • RapidJson的设计实现解读

    DOM对象是不是似曾相熟,比如常听到浏览器解析http响应构建的DOM对象。DOM对象是个语言无关的,保存XML或者HTML文档的树状结构。

    mariolu
  • LayoutInflater 源码解析及应用(解决插件化中类型转换异常)

    这里明显全路径相同,那就是加载这两个类的 ClassLoader 不同,验证一下:

    trampcr
  • 渗透测试常见点大全分析

    select username from security.user where id=1 and (extractvalue(‘anything’,conca...

    天钧
  • Maven 仓库和坐标

    ① pom.xml:Project Object Model 项目对象模型,这是 Maven 的核心配置文件,所有的构建配置都在这里设置。

    happyJared
  • Peach原理简介与实战:以Fuzz Web API为例

    Fuzz即模糊测试,是一种使用大量的随机数据测试系统安全的方法,Peach就是一种这样的工具。网上零零星星有些介绍Peach的文章,也有少部分使用Peach测试...

    FB客服

扫码关注云+社区

领取腾讯云代金券