页面布局概论
2016-02-17 18:19

    不论是做前端的小伙伴,还是写后台的后太君们。在B/S架构的系统中,难免都需要写页面。而对于需求急迫,任务紧急,或者能力不足时,我们写页面往往只追求实现设计师设计的效果,而不考虑其他的问题。

       我写这篇文章的目的就是让大家在写页面时,能写的页面具有更高的灵活性,和更好的适应性。

       一张设计图放到我们面前时,我们不需要着急开始写代码。这个时候我们第一步要做的是,对我们即将要写的页面所对应的设计图进行分析。找到设计图中文档流中流向,页面模块的分解,页面模块间的联系,页面内容的拼接等。

     也就是说,我们要通过设计图首先要找到页面布局的整体结构是什么样子的。

  

这个页面从w3school网站截图而来。如果这是一张设计图的话,那么我们就要分析,他整体结构就是一个容器。这个容器在浏览器中是居中的1100px宽的一个div。然后在这个总容器中,内部页面分成三列,然后再对这三列中的具体内容进行实现。

        而在实现这三列布局的时候,有的人可能会认为反正外层容器的宽度为1100px,是固定宽度的,那么我就用float布局,给这三列元素的宽度写一个死宽度得了。这样确实达到了按照设计图实现的效果。但是缺少了灵活性和适应性。如果在你实现完页面后,又有要求要把总容器的宽度改为1000px,这个时候你就不但需要改变总容器的宽度,而且还需要去修改中间主体内容容器main的宽度值。

     而如果我们采用适应的的布局的话,把灵活性考虑进去。采用上篇内容所提到的margin负值的布局方式,让主体容器的宽度具有一定的自适应行。那么当总宽度改变时,其三列子元素的样式不用修改就可以自适应其总宽度的改变。

    


   页面布局不但要有灵活性,还需要有独立性。就是要让页面中能够独立的模块独立出来。

这是我截图了一张360浏览器的首页,这个页面布局可以很明显的看到内容的分块。那么像这类页面我们在实现的时候就需要把他们不止在视觉上展现独立性,更要在代码上实现模块的独立性。也就是尽量减少模块中内容的实现对相邻元素和父类容器的依赖。这样实现的出来的模块独立性增强了,那么相对的可移植性也就提高了。由于各个模块没有了绝对的关联性,那么模块间的增减也就提高了自由性。在整体布局不变的情况下,我们可以增加右边的板块,也可以随意减少右边的板块。

     这个属于理解性东西,就不写具体代码了,重在理解。

        在看这种列表的布局,我们的列表展示的每一个列表也要体现独立性。改变外层容器的宽度,列表依然能良好展示。改变图片和文字间的间距样式,列表依然可以正常展示,这样写出来的布局才能说具有适应性。这个实现上我们可以采用文字区域容器内部再添加一个inner容器,而跟文字间的间距通过inner元素的margin值来实现,这个就是功能样式和相应元素的匹配与权责分离。这种写法布局时可能比一般写法要多签到几层div,也就是把相应的可拆解样式,和层次性样式分摊到多层div中,每层div嵌套负责实现尽量少的样式功能。这样页面布局的灵活性就增高了,当页面需要微量改变时,页面能最大限度地适应相应的修改。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2847)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1