CSS禅意花园 - 重构 - 南部边境(一)
点击数:48842013-11-03 12:34:11 来源: 海盈网络
用外边距和定位体现框架之感
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;
}
7.3.2 为容器设置样式
在基本样式定义完成之后(可在源文件中找到这里跳过的部分CSS代码),接下来就是定义#container div的样式。下面声明中的样式定义了容器的背景图像、外边距和宽度:
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中却不是这个意思。
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;
}
7.3.2 为容器设置样式
在基本样式定义完成之后(可在源文件中找到这里跳过的部分CSS代码),接下来就是定义#container div的样式。下面声明中的样式定义了容器的背景图像、外边距和宽度:
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布局制作各类型企业、行业网站,同时提供手机网站制作、网站维护等全方位专业服务,欢迎咨询。
【责任编辑:】(Top) 返回页面顶端