CSS禅意花园 - 重构 - 南部边境（一）

点击数：35702013-11-03 12:34:11　来源: 海盈网络

      用外边距和定位体现框架之感

      咖啡在某种程度上是一种普遍的创意源泉，可在South of the Border中引发Rob Sheilds灵感的则是一杯热茶。对Shield而言，无论酝酿什么样的作品，总能找到5 0多个初始的创意，其中每个创意包含的一系列关键字都能帮助他勾画出不同的站点主题。
Shields在这部作品中使用了他的第三个创意，这是个关于美国西南部风情的主题。为了把握住这转瞬即逝的灵感，Shields在灵感乍现后，急速地打开了AdobePhotoshop处理图像，完成了图7-3-1中的组合效果。

      进一步修饰之后，Shields开始着手CSS代码的编写，直到最终完成了主题鲜明的South of the Bordero

      7.3.1 由基础开始

      Shields的设计中使用了独特的色彩基调，他的灵感来自于一件带有蓝色条纹的褐色外衣。为了模拟出这种色彩基调，Shields将body元素的背景颜色设置为蓝色-又用浅褐色和深蓝色制作链接，而主要文字部分则使用了白色，与深蓝色背景形成足够的反差：

body {
font：83%/150%;
color： #fff;
background: #EDEDED'url (background.gif) repeat-y
fixed bottom center;
margin: 0px;
padding: 0px;
}

      可以看出，Shields特意将字体大小用百分比表示，以确保它们可被自由缩放。下一页将给出字体和背景的效果。

      7.3.2 为容器设置样式

      在基本样式定义完成之后（可在源文件中找到这里跳过的部分CSS代码），接下来就是定义#container div的样式。下面声明中的样式定义了容器的背景图像、外边距和宽度：

#container {
position： relative;
background: url(bg-central.gif) repeat top left;
margin: Opx auto Opx auto;
width: 655px;
}

      #container元素的position被设定为relat,iveo由于并没有再定义其top和 left属性，所以#container div还是会留在常规文档流中。许多CSS新手都会被relative一词所迷惑，以为相对定位是指元素的定位会相对于另外某个元素的位置。如此解释这个英语单词自然非常合理，但它在CSS中却不是这个意思。

本文为《CSS禅意花园》连载系列，版权归原作者及出版社所有，请勿用于商业目的活动，我们谨向原作者及CSS禅意花园网站表示敬意。
海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站，同时提供手机网站制作、网站维护等全方位专业服务，欢迎咨询。