微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
微信小程序 - 相对定位和绝对定位
相对定位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.注册成功后进入首页,在 小程序发布流程->小程序开 ...
- 微信小程序实例教程(一)
序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...
随机推荐
- python3 经典排序方法
1.插入排序: def nsert_sort(list): for i in range(len(list)): for j in range(i): if list[i] < list[j]: ...
- Python中__init__和self的意义和作用
由于类可以起到模板的作用,因此,可以在创建实例的时候,把一些我们认为必须绑定的属性强制填写进去.以学生类为例,通过定义一个特殊的__init__方法,在创建实例的时候,就把name,score等属性绑 ...
- winform自定义控件中其他遮挡控件点击事件
自定义控件在其他窗口调用时,里面的lable阻挡了控件的点击事件 解决方法 自定义控件中lable的 点击事件 private void Lable1_Click(object sender, Eve ...
- AWR不能自动生成快照
尝试手工生成,报错sysaux表空间满. BEGIN DBMS_WORKLOAD_REPOSITORY.CREATE_SNAPSHOT (); END; 检查DBA_HIST_SNAPSHOT和dba ...
- CF Good Bye 2018
前言:这次比赛爆炸,比赛时各种想多,导致写到\(D\)题时思路已经乱了,肝了\(1\)个多小时都没肝出来,\(B\)题中途因为没开\(long\ long\)又被\(HACK\)了..\(C\)题因为 ...
- LoadRunner录制脚本时没有响应——无法启动浏览器问题总结
1.ie浏览器去掉启用第三方浏览器扩展 2.loadrunner11 键盘F4,在browser Emulation点击change,在弹出的提示框中Browser version 选择8.0,pla ...
- 《数学之美》--第一章:文字和语言 vs 数字和信息
PDF下载 第一章 文字和语言 vs 数字和信息 数字.文字和自然语言一样,都是信息的载体,它们之间原本有着天然的联系.语言和数学的产生都是为了同一个目的-记录和传播信息.但是,直到半个多世纪前香农博 ...
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- 构建器Constructor的返回值/构建器
构建器Constructor的返回值? 为什么会有这个问题? 在<Thinking in Java>中文Quanke翻译版本第四章初始化和清除,原书第五章Initialization&am ...
- 迭代加深搜索 C++解题报告 :[SCOI2005]骑士精神
题目 此题根据题目可知是迭代加深搜索. 首先应该枚举空格的位置,让空格像一个马一样移动. 但迭代加深搜索之后时间复杂度还是非常的高,根本过不了题. 感觉也想不出什么减枝,于是便要用到了乐观估计函数(O ...