微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
微信小程序 - 相对定位和绝对定位
相对定位relative,绝对定位absolute
相对定位:元素是相对自身进行定位,参照物是自己.
绝对定位:元素是相对离它最近的一个父级元素进行定位.
相对定位:relative
position:relative; /*相对定位*/
left:50rpx; /*相对于自己往右偏离50*/
top:50rpx; /*相对于自己往下偏离50*/
绝对定位:absolute
position: absolute;
left: 50rpx;
top: 50rpx;
效果:
.bei {
width: 100rpx;
height: 100rpx;
flex: 1;
border-radius: 50%;
background-color: #00b2ee;
margin: 30rpx auto 0;
}
.bei image {
width: 90rpx;
height: 90rpx;
margin-top: 5rpx;
}
.text {
font-size: 30rpx;
color: #fff;
position: relative;
top: 20rpx;
}
.wxml
<view class='bei'>
<image src='/images/Attendance-early.png' style="display: {{none}};"></image>
<text class='text'>{{zao}}</text>
</view>
position【定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset】
相对路径和绝对路径
绝对路径: 以“/”开头代表根目录
相对路径:
../../a/index
或者:
a/index
达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径的更多相关文章
- 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...
- uni微信小程序优化,打包后的import vue路径是可删除的
这次的优化我公司项目主包只减小了32kb,但是减小的不仅仅是主包,所有分包均在没有改动任何业务代码的情况下完成了压缩空间的优化. 主包分包压缩空间的优化都要视项目而定,32kb只是我公司的小程序项目. ...
- 微信小程序:优化接口代码-提取公共接口路径
方法一.将公共部分提取出来定义为baseURL变量 简化url,把里面公共部分提取出来.如https://api-hmugo-web.itheima.net/api/public/v1/categor ...
- 微信小程序开发教程
9月21日晚发布的微信公众平台·小程序内侧邀请,微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子? 怎样 ...
- 初探微信小程序
摘要 最近闲下来了,就准备了解下微信小程序的内容.首先从目录结构开始吧. 创建项目 工具下载:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/do ...
- 微信小程序简易教程
刚接触到微信小程序开发,这里做一个简单的教程: 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开 ...
- 开发一个微信小程序教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...
- 开发一个微信小程序项目教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...
- 微信小程序实例教程(一)
序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...
随机推荐
- python json.dumps()函数输出json格式,使用indent参数对json数据格式化输出
在python中,要输出json格式,需要对json数据进行编码,要用到函数:json.dumps json.dumps() :是对数据进行编码 #coding=gbkimport json dict ...
- Replace To Make Regular Bracket Sequence
Replace To Make Regular Bracket Sequence You are given string s consists of opening and closing brac ...
- java的线程中断
在java中中断线程可以使用interrupt()函数.此函数虽然不能终止线程的运行,但是可以改变线程的状态为true 即:isInterrupted()的值返回为true 注意:当函数调用了已经被阻 ...
- ZOJ 2507 Let's play a game
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1507 MisereNim博弈.代码如下: //=========== ...
- VUE 组件通信、传值
一.通过路由进行带参传值: 两个组件A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({path:'/componen ...
- idea设置utf-8
- 【Python】【BugList13】req = requests.get(url=target)报错: (Caused by SSLError(SSLError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:777)')
[代码] # -*- coding:UTF-8 -*- import requests if __name__ == '__main__': target = 'https://unsplash.co ...
- java 排序算法
1.冒泡排序 public static void main(String[] args) { int[] arr={6,3,8,2,9,1}; System.out.println("排序 ...
- 组件内守卫beforeRouteEnter和beforeRouteLeave
beforeRouteEnter用法和其他守卫差不多. 有个注意的地方就是beforeRouteEnter不能用this获取组件内收据. 在next()方法内存入vm这个参数,获取组件内数据. bef ...
- (转载)sqlmap用户手册详解
文章转载自 http://www.vuln.cn/2035 当给sqlmap这么一个url (http://www.target.com/sqlmap/mysql/get_int.php?id=1) ...