好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS秘密花园:流体背景,固定内容_html/css_WEB-ITnose

《 CSS Secrets 》是 @Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

问题

在过去的几年中,有种网页设计趋热是越来越受欢迎:这就是我所说的“自适应的背景,固定宽度的内容”。这种模型常用于以下几种场景中:

有多个内容部分 ,每个内容都占据整个视窗宽度而且都有不同的背景。 固定宽度的内容,即使宽度会根据不同的媒体查询修改。在某些情况之下,不同的区域 会有不同的内容宽度

有时候整个网站都是由这种风格组成,如下图所示:

更微妙点的如下图:

特定的区域使用这种模式的要属页脚,使用最频繁:

完成这样的效果最常见的方法就是使用两个元素,一个用于流体的背景,另一个用于固定宽度的内容。后者使用 margin: auto ,让内容保持水平居中。例如,页脚的区域,他的结构如下:

     

查看更多关于CSS秘密花园:流体背景,固定内容_html/css_WEB-ITnose的详细内容...

  阅读:36次