RSS

ZEN GARDEN – spring360 by Rene Hornig, German

10 Feb
这是我读的最完整的一个CSS代码。整体的效果截图贴到这里,具体的代码可以到http://www.csszengarden.com/?cssfile=205/205.css获取。
做一下要点总结:
整体布局属于居左排列。部分link Div采用Absolute定位。
1.让一个图片水平平铺上面的区域。background: #DFDBD3 url(bg.gif) top left repeat-x;事实上这只是一块很小的背景图案,让它水平平铺就好。这种方案的在这个样式表单里得到了淋漓尽致的体现。配合着 bottom right, bottom center, 诸如此类的搭配,可以让图片和背景颜色做一个无缝的连接。就像这里的部分字体有点线效果,也是运用这种技术。background: transparent url(abbr.gif) bottom left repeat-x;罗列如下:
background: transparent url(contbg.gif) top left repeat-y; background: transparent url(logo.gif) top left no-repeat; background: transparent url(nav_dl.gif) top left no-repeat; background: transparent url(navbg.gif) top left repeat-y; background: transparent url(navbtmbg.gif) bottom left no-repeat; background: transparent url(navico.gif) 3pt 5pt no-repeat;
2.整个白色文字区域的设计。
#container { background: transparent url(contbg.gif) top left repeat-y; width: 700px; }
#intro, #supportingText { padding: 0 69px 0 86px; width: 545px; }
这段代码定位了白色的编辑区。而其中的绿色区域还有深色区域则是采用绝对定位方式。 #quickSummary .p2 { background: transparent url(nav_dl.gif) top left no-repeat; display: block; font-size: .6em; font-weight: bold; left: 661px; line-height: 1.4em; padding: 40px 40px 0 30px; position: absolute; top: 160px; width: 141px; z-index: 20; }
#linkList { background: transparent url(navbg.gif) top left repeat-y; left: 661px; padding-top: 10em; position: absolute; top: 130px; width: 285px; z-index: 10; }
具体的框架分析图如下图:
Advertisements
 
Leave a comment

Posted by on 02/10/2008 in CSS

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: