|
日常在和粉丝交流的过程中，有的粉丝希望讲解一下布局和定位。这两个是CSS中常见的概念，如果干说概念没有实例其实很难讲清楚。本节我们就以官方模板为例，讲解一下如果用绝对定位来实现一些特殊的效果。先看效果图：
这个特殊的效果在下边的表单往上移动了一截，相当于盖住了头部的背景图片。那这种效果就需要用定位来设置。我们先按照模板搭建一个不设置定位的效果。 先放置一个普通容器
然后里边放置一个普通容器用来设置背景
设置该组件的样式，宽为100%，高为336
背景的话我们设置为图片填充，宽高尺寸各为100%，图片地址官方模板是从互联网取，我们一般不从网络上取，需要从素材库选择。我们可以先打开官方模板的背景图片
这里有一个概念是，我们是把图片的尺寸设置为100%了，那这个100%代表啥，其实查看官方图片的尺寸是750*336。750正好就是屏幕的宽，所以不管是自己做图还是设计师给做图都要保证做出来的图在手机上能正常显示。 我们可以把这个图片下载到本地，然后上传到我们的素材库里
这样设置背景的时候就可以从素材库选择了
官方模板头部的效果类似于一个海报，里边的文字可以在做图的时候就写好，但是万一上线之后需要更改，还得找设计师去修改，也是一件麻烦事。所以我们这里把文字提取出来，用文本组件来替代，往普通容器里放置两个文本组件。
现在的文本组件是在左上角，为了排版的好看，我们给普通容器一点内边距
标红的位置代表了盒模型，外边一圈是外边距，里边一圈是内边距。因为我们的文本是放置在盒子里，所以我们设置的是内边距 我们现在文本是个黑色的效果，和底图也不搭，所以要设置一下文本的样式。文本的样式可以设置字体、颜色、字号、是否加粗等，有一些可以在图形化设置，有一些需要自己写样式。这块就需要熟悉样式的属性和值。官方设置的样式：
我们也可以复用他设置好的样式
第二行的文字会稍小一点，样式是：
这样头部的海报就设置好了，接着我们设置第二部分收集项的内容。在海报的同级放一个普通容器
我们设置背景色为白色，圆角，然后给一个宽度、高度
如果不设置定位现在组件是并排排列的，我们要让下边的组件往上走一点，就需要设置绝对定位，然后设置距顶部263像素
这样就实现了官方模板的效果。具体定位的基础知识可以看一下MDN关于定位的介绍，还是讲解的非常清楚的。 |
|
|
