第六十六章 结束?

其实讲到这里啊,我们布局都讲的差不多了呢~

你也许觉得诧异,然而,竖排的话简单吧,横排我们也学了,也练习了。横竖交错组合就足够应付日常的排版需求了呀。我们继续讲,也只是对上面内容的重复,不信?那我们试试看——

我们现在有了页头和导航,下面如果只是文章内容的话……

<content>在这里面放内容</content>
content {width: 800px;margin: 10px auto;padding: 30px 0;}

我给内容区域一个确定宽度,把它居中就好啦,下面放页尾,也十分类似。你说里面的内容?不浮动就垂直排列,浮动就排满一行再排下一行,最后记得清除浮动就对了。

当然我说的很简略,你们最好还是自己动手操作一下,理论就是这么个理论,但是实际使用中的细节问题,还得自己去体验一番才能够真正理解。

如果一边是内容,另一边是侧边栏,那就先让这两者横排一下。唔,翻来覆去就这么点操作而已,关键在于对区域的合理划分。

虽然我们理论讲的不算细致,但是大部分东西都是提到了的,动手试试,细致思考一下,现在普通的排版是完全拦不住你的哦~

但是这一章这么点字是不行的(你们会说我偷懒啊),我们来聊一聊布局这个事情,让大家对后面有一个了解。

我们现在做的呢,是一个平面上的排版,有点像华容道,或者拼图。什么意思呢?就是同一个位置,有了这个东西,就不能有那个东西,而且我们基本会用各种元素(包含元素的内补、外补),把这个界面填满。做出来类似报纸的效果。

但这已经很厉害了,比如你随便打开一个电商平台的首页,截图下来,然后尝试一下,你会发现你都能仿的下来(忽略动态和交互的前提下)。所以,现在这些看起来很简单的东西,绝对是基础,还是很重要的基础,真心建议大家试着去排版几个页面,这对于后面的学习会有很大的帮助。千万不要在还没掌握这部分的情况下贸然地学习后面的内容。

后面呢,我们还会有立体的布局,就是可以层层叠叠的,技术上一点都不难,但是如果你前面的内容没有掌握牢靠,再加上后面的内容,就有些混乱。等到应用的时候,就不是一个细节在起作用,而是所有的细节在相互作用,那时候出现问题就很难找到。所以先多熟悉这部分内容,是学好下一部分内容的前提。

然后是动态的布局,就是自适应、响应式,总之根据显示区域尺寸的不同,表现出不同的排版。里可以理解为多个排版的叠加。这差不多就是 4D 了。(平面为 2D,层叠以后是 3D,再加上一个变化因素,4D,没毛病)

到这里,我们才把基础排版讲完。还有一种新的排版方式必须掌握,以及另一种新的排版方式作为了解……

好了,划重点哦。上面说的你可能并不是很明白,这不重要。记住:现在必须开始动手练习才能学会,必须熟练掌握当前知识,才能去看下一个知识点,否则会混乱

原文链接:https://www.ek58.com/archives/3652,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?