微搭低代码中的绝对定位

简介: 微搭低代码中的绝对定位

日常在和粉丝交流的过程中,有的粉丝希望讲解一下布局和定位。这两个是CSS中常见的概念,如果干说概念没有实例其实很难讲清楚。本节我们就以官方模板为例,讲解一下如果用绝对定位来实现一些特殊的效果。先看效果图:

这个特殊的效果在下边的表单往上移动了一截,相当于盖住了头部的背景图片。那这种效果就需要用定位来设置。我们先按照模板搭建一个不设置定位的效果。

先放置一个普通容器

然后里边放置一个普通容器用来设置背景

设置该组件的样式,宽为100%,高为336

背景的话我们设置为图片填充,宽高尺寸各位100%,图片地址官方模板是从互联网取,我们一般不从网络上取,需要从素材库选择。我们可以先打开官方模板的背景图片

这里有一个概念是,我们是把图片的尺寸设置为100%了,那这个100%代表啥,其实查看官方图片的尺寸是750*336。750正好就是屏幕的宽,所以不管是自己做图还是设计师给做图都要保证做出来的图在手机上能正常显示。

我们可以把这个图片下载到本地,然后上传到我们的素材库里

这样设置背景的时候就可以从素材库选择了

官方模板头部的效果类似于一个海报,里边的文字可以在做图的时候就写好,但是万一上线之后需要更改,还得找设计师去修改,也是一件麻烦事。所以我们这里把文字提取出来,用文本组件来替代,往普通容器里放置两个文本组件。

现在的文本组件是在左上角,为了排版的好看,我们给普通容器一点内边距

标红的位置代表了盒模型,外边一圈是外边距,里边一圈是内边距。因为我们的文本是放置在盒子里,所以我们设置的是内边距

我们现在文本是个黑色的效果,和底图也不搭,所以要设置一下文本的样式。文本的样式可以设置字体、颜色、字号、是否加粗等,有一些可以在图形化设置,有一些需要自己写样式。这块就需要熟悉样式的属性和值。官方设置的样式:

 color: rgb(255, 255, 255);
    font-size: 40px;
    font-family: "PingFang SC";
    font-weight: 700;
    white-space: pre-line;
    margin-bottom: 16px

我们也可以复用他设置好的样式

第二行的文字会稍小一点,样式是:

color: rgb(255, 255, 255);
    width: 320px;
    height: 80px;
    font-size: 24px;
    font-family: "PingFang SC";
    font-weight: 400;
    line-height: 40;
    white-space: pre-line

这样头部的海报就设置好了,接着我们设置第二部分收集项的内容。在海报的同级放一个普通容器

我们设置背景色为白色,圆角,然后给一个宽度、高度

如果不设置定位现在组件是并排排列的,我们要让下边的组件往上走一点,就需要设置绝对定位,然后设置距顶部263像素

这样就实现了官方模板的效果。具体定位的基础知识可以看一下MDN关于定位的介绍

还是讲解的非常清楚的。

相关文章
|
6月前
|
小程序 前端开发
如何在企业微信中使用微搭低代码
如何在企业微信中使用微搭低代码
|
11天前
|
搜索推荐 数据管理 开发者
最灵活最好用的低代码页面设计器!
极态云的页面设计器让人眼前一亮,考虑得很全面,功能很强大,使用也简单,产品做得那叫一个专业,简直太赞啦!这才是我想要的页面设计器!
|
机器学习/深度学习 人工智能 自然语言处理
从前端智能化看“低代码/无代码”
什么是低代码/无代码开发?业界对于低代码/无代码开发是否存在其他不同的理解?低代码开发和无代码开发之间的区别是什么?
从前端智能化看“低代码/无代码”
|
4月前
|
JSON JavaScript 关系型数据库
低代码使用问题之Automat和n8n分别是什么,以及它们的主要功能是什么
低代码使用问题之Automat和n8n分别是什么,以及它们的主要功能是什么
|
开发框架 自然语言处理 数据可视化
低代码平台如何实现快速开发应用?
低代码平台如何实现快速开发应用?
157 0
|
6月前
|
数据采集 人工智能 前端开发
Dooring-Saas低代码技术详解(干货分享)
Dooring-Saas低代码技术详解(干货分享)
155 1
|
6月前
|
前端开发 Java API
深度|低代码开发平台和微服务架构的优势与挑战
低代码开发平台和微服务架构是当前软件开发领域的两个热门话题。它们都是为了更高效、更灵活地构建和开发应用程序而出现的解决方案。本文将以一款基于微服务架构的OneCode引擎为案例来探讨低代码开发平台和微服务架构的优势和挑战。
|
前端开发 小程序 API
微搭低代码中实现二维码生成
微搭低代码中实现二维码生成
微搭低代码中实现二维码生成
|
数据可视化 搜索推荐 IDE
低代码概念——初步认识低代码
低代码概念——初步认识低代码
132 0
|
人工智能 数据可视化 算法
低代码逻辑编排观:PlayMaker
近几年随着低代码与无代码相关话题的火热,逻辑编排作为其重要构成部分也备受关注,集团内外不乏优秀的实践。之前在做技术调研时发现了不少业内逻辑编排相关的方案,陆续整理记录下来。今天先为大家带来游戏开发领域内的 PlayMaker。
487 0
低代码逻辑编排观:PlayMaker