想学习DIV+CSS的,自己去下载回来看好了
http://www.ssi-developer.net/main/templates/



Two
Column Flexible

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:

Probably the easiest page to make. Contains two
layout divs, the main content div is just floated to the left.
Very simple!
Actions:

View | Image
Preview
| Download [ 5k]
[ZIP]





Two
Column Flexible With Header

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
Basically the same template as above but with the
addition of a header div for page title, your logo or banners
etc. Again very simple to set up.
Actions:
View | Image
Preview
| Download [ 3k]
[ZIP]






Two
Column, Left Column Static

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
Two columns, the left
column is absolutely positioned on the left and is a fixed width. The right
content column is sized and positioned by using margins and will
resize with the browser window.
Actions:
View | Image
Preview
| Download [ 6k]
[ZIP]






Two
Column, Left Column Static, with Header Bar

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
This is the same template as above but with the
addition of a simple header bar which can be used for links,
search box etc..
Actions:
View | Image
Preview
| Download [ 6k]
[ZIP]






Two
Column Fixed Width with Header & Footer Recommended !

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
A fixed width centered page with a header,
footer, left navigation column and right content column. One of
my favourites.
Actions:
View | Image
Preview
| Download [ 6k]
[ZIP]


Three
Column, Left & Right Columns Static

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
This is much the same as ‘Two Col Left Col
Static’ but now with the addition of a right hand column which is absolutely
positioned.
Actions:
View | Image
Preview
| Download [ 6k]
[ZIP]






Three
Column ‘Pixel-Perfect’

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(6)
Description:
Sometimes this is called the "Holy Grail".
It’s a three column template which fits together "pixel perfect".
Actions:
View | Image Preview | Download [ 6k]
[ZIP]






Three
Column ‘Pixel-Perfect’ with Header

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(6)
Description:
The same as the "Holy Grail" above but with
a header div. Also expands to fit the whole screen.
Actions:
View | Image Preview | Download [ 3k]
[ZIP]






Three
Column Pixel-Perfect with Header & Footer Recommended !

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
My most complete template. It has three columns, a header and footer
and will resize with the browser window.
Actions:
View | Image Preview | Download [ 6k]
[ZIP]





13条评论

  1. 用好上面几种布局,可以有千变万化的效果,值的认真学习.

    今天在公司也做了一个两栏的,明天贴上来请指教哈.

    遇到校验时的诸多CSS警告…有点….

    另:这是偶见过的最靓仔的.text 的dotnet Blog.

  2. 首先,我同意楼上的赞美!这也是我见过最赏心悦目的.text blog了。

    楼主真是牛人啊!这么强的CSS CODE都可以,恩,感谢!

  3. 谢谢,收藏了

  4. 好东西

    但是我不明白 css 主要到底是用来布局的还是用来改变网页的显示效果的 按我的理解网页的结构应该是用html语言来构架的

  5. css 用来布局和改变网页的显示效果等,呵呵。

    html 表达的是内容及其逻辑、层次关系,基本可以与显示的样子无关。

  6. 请问为什么要把div的align属性放在html中,而不是放在样式表中?

  7. [url=http://dianguolu.blogspot.com/]电锅炉[/url]

    <a href="http://xianhua.blogspot.com/">鲜花</a>

  8. 不错

  9. 谢谢

  10. 太感谢了!

  11. css 主要到底是用来布局的还是用来改变网页的显示效果的

    回:CSS全能负责~

  12. 其实早前就在网页设计师上看过DODO文章,收益非浅啊!今天到BLOG上逛了一圈更是美不胜收!谢了!

  13. 以上的各种布局是不是只能在IE5.O以上的版本显示呢?若在更低的版本上浏览会出现什么样的效果呢?

发表评论

评论也有版权!