当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 重构 - 从竞争到和谐(一)

点击数:32322014-04-14 12:25:49 来源: 海盈网络

从竞争到和谐
在第一次接触CSS禅意花园时,Derek Hansen就深深折服于人们在其中付出的努力及其体现出的创意。此时他正致力于发掘出一种标准化的网页制作方案,自然很快想到了向禅意花园提交自己的作品。


CSS禅意花园 - 重构 - Corporate Zengarden


在灵感的指引下,Hansen使用了一组崭新的创意为禅意花园带来了新的亮点。他首先从仔细地研究花园中的现有作品开始。在被各种主题所深深震撼的同时,他决定让自己的作品讲述一个故事,力求将其打造成禅意花园中的另一部标新立异之作。

7.4.1从一封信开始
就如所有典雅精致的文案一样,Corporate ZenWorks有着简洁工整的页面布局(图7-4-1),使用了银色的页面背景和简洁的字体作为基调:
body{
background: #999 url (bk.jpg) repeat-x fixed;
margin: 0;
padding: 0;
color: #33140E;
font-family: Georgia, Times, serif;
font-size : 80%;
}
hlr h2, h3, h4, h5, h6 {
border : 0;
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Lucida Sans Unicode",
Verdana,
sans-serif ;
font-weight: normal;
}
h3 {
text-transform: uppercase;
font-size: 90%;
word-spacing: 2px;
letter-spacing: 2px;
margin-left: -10px;
font-weight: bold;
}
注意到h3元素使用了负的外边距(图7-4-2)。看上去虽然有些怪,但它却给最终的作品带来了亮色,至于其中的原因,我们将在稍后阐释。


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

【责任编辑:(Top) 返回页面顶端