Layout

看看接下来会发生什么:CSS3 Flexible Boxes

设计一个网站,布局可能是最生要的元素之一。当你网站的用户理解你的布局和喜欢上你的网站布局,他们用起来很开心,这样用户会在你的站点呆的时间更长,甚至会定期访问你的网站。我们通过导航能浏览一些高质量的内容,但由于网站混乱的设计和完全乱套的布局,我们第一反应,那就是尽可能快的离开这个网站。特别是如今天显示屏幕的多样化,在使用以前老的布局方案无法实现。虽然响应式布局能改变这种状况,但是需要添加很多样式代码,增加维护难度与开发速度。值得庆幸的是,CSS3给我们带来了一个Flexible Boxes模块,让我们布局变得更加和简易化。根据的《A Look at What’s Coming Up: CSS3 Flexible Boxes》一文,给大家介绍了一个使用Flexbox实现的一个响应式网站布局的案例,希望这个案例能帮助大家更好的理解Flexbox,从而更好、更快的实现网站布局。

Flexbox——快速布局神器

在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局,那么还算简单,但是制作一个复杂的多列布局,要做的众多浏览器的兼容一致那还是很复杂的。我们通常都是使用浮动或者其他方法来实现这个目的,而其中出现的bug和浏览器的差异性使用对布局失去兴趣。为了应对这种情况,CSS3包含了许多模块,使用不同的布局更加容易。我们已经在其他文章中看到多栏布局媒体生成的内容分页,现在我们将注意力转向CSS3的 Flexbox布局模块。今天根据的《Flexbox — fast track to layout nirvana?》一文所译,向大家介绍Flexbox这一布局神器,希望大家喜欢。

Responsive列布局

布局W3cplus说的也比较多了,但Responsive的列布局还是第一回说,(如果你是第一次听说Responsive这个词,建议你点击和先了解Responsive)。今天看到一篇有关于Responsive的列布局教程,觉得值得一读,将其译成中文,希望对有需要的同学有所帮助。

通常我们进行列布局,都需要在第一列添加一个类名“first”,在最后一列添加一个类名“last”,主要用来清除他们之间的margin,(有关这方面的介绍可以详细阅读为之写的《CSS解决方案》中的《项目列表解决方安》,这里详细介绍了类似于列布局的相关方法,或者点击这里了解如何避免重复列末尾的Margin。)而且还通过添加类名“clearfix”来清除浮动。这些都是比较古老的解决方案了,今天我们一起来看一个新方案,就是使用CSS3的伪元素选择器“nth-of-type”来实现一个简单的Responsive列布局效果。使用这种方法制作了一些WordPress主题模板。制作这些模板中,他没有使用“first”和“last”类名就实现了多列在不同设备下都能自适应,换句话说,他就是能实现四列、三列、两列等等之间的切换。

Web布局连载——两栏固定布局(五)

在上一篇《Web布局连载——两栏固定布局(四)》中留了一个下文,“No div, no float, no clear, no hack”。看起来很有意思,这种没有div,没有float,没有清除浮动和没有hack的布局,还是看到的少数,当然除了 table布局。因为table布局是不需要使用前面说的几个部分。那么今天我们要讲的布局是不是table布局呢?欲想知道,那就一起随着往下看吧。

Web布局连载——两栏固定布局(三)

  1. Web布局连载——两栏固定布局(一)
  2. Web布局连载——两栏固定布局(二)

Web布局连载——两栏固定布局(二)

在《Web布局连载——两栏固定布局(一)》中,使用了两种不同的结构,配合不同的CSS浮动方法,实两了两种最为常见和最基础的两栏固定布局效果:侧栏在左边,主内容在右边(demo1,demo3),主内容在左边,侧栏在右边(demo2,

Web布局连载——两栏固定布局(一)

CSS布局是一个很老的话题了,网上这方面的教程可以说是随处可见,本站前面也有一些相关的布局教程,但都是一些特殊的,比如说《等高布局》、《左定宽度右边自适应的等高布局》、《960网格布局》、《固定footer布局》和《中间固定两边自适应布局》等等。

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧:

  1. 左侧固定宽,右侧自适应屏幕宽;
  2. 左右两列,等高布局;
  3. 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)
  4. 要求不用JS或CSS行为实现;

仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事:

CSS布局——960gs

说起CSS的布局,有太多了,现在常见的有固定布局流体布局弹性布局,有关于这三种常见的布局,在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的对比介绍,而且Matthew James Taylor也给我们制作了很多个这方面的实例,大家还可以看看Float-less CSS layout带来的这三个类型的布局效果。随着CSS3Media Queries出现,给我们的布局带来一种全新的体验——适应于多媒价的布局响应

页面

返回顶部