查看完整版本: 网页设计高级布局40例参考

网页设计高级布局40例参考

作者是意大利设计师，标题不好翻译，看示意图加例子就明白了。

[img]http://www.webwoo.net/upload_files/38/fNT3Em04_layout001.gif[/img]
Three percentage columns (n.01)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala01.htm][u]http://www.rexsong.com/blog/attachme...youtgala01.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/thxMXW04_layout002.gif[/img]
Three percentage columns (n.02)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala02.htm][u]http://www.rexsong.com/blog/attachme...youtgala02.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/run5Gf04_layout003.gif[/img]
Three percentage columns (n.03)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala03.htm][u]http://www.rexsong.com/blog/attachme...youtgala03.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/9IOX0I04_layout004.gif[/img]
Three percentage columns (n.04)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala04.htm][u]http://www.rexsong.com/blog/attachme...youtgala04.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/2lZDu204_layout005.gif[/img]
Three percentage columns (n.05)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala05.htm][u]http://www.rexsong.com/blog/attachme...youtgala05.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/C6yxeO04_layout006.gif[/img]
Three percentage columns (n.06)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala06.htm][u]http://www.rexsong.com/blog/attachme...youtgala06.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/sAAxl004_layout007.gif[/img]
Three fixed columns (n.7)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala07.htm][u]http://www.rexsong.com/blog/attachme...youtgala07.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/frxh6704_layout008.gif[/img]
Three fixed columns (n.8)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala08.htm][u]http://www.rexsong.com/blog/attachme...youtgala08.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/poeINS04_layout009.gif[/img]
Three fixed columns (n.9)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala09.htm][u]http://www.rexsong.com/blog/attachme...youtgala09.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/WrIoEU04_layout010.gif[/img]
Three fixed columns (n.10)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala10.htm][u]http://www.rexsong.com/blog/attachme...youtgala10.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/Wu9WSu04_layout011.gif[/img]
Three fixed columns (n.11)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala11.htm][u]http://www.rexsong.com/blog/attachme...youtgala11.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/LpfaJV04_layout012.gif[/img]
Three fixed columns (n.12)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala12.htm][u]http://www.rexsong.com/blog/attachme...youtgala12.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/zcHajN04_layout013.gif[/img]
Liquid, secondary columns fixed-width (n.13)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala13.htm][u]http://www.rexsong.com/blog/attachme...youtgala13.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/Xf6clP04_layout014.gif[/img]
Liquid, secondary columns fixed-width (n.14)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala14.htm][u]http://www.rexsong.com/blog/attachme...youtgala14.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/ml6YWj04_layout015.gif[/img]
Liquid, secondary columns fixed-width (n.15)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala15.htm][u]http://www.rexsong.com/blog/attachme...youtgala15.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/kNjsXq04_layout016.gif[/img]
Liquid, secondary columns fixed-width (n.16)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala16.htm][u]http://www.rexsong.com/blog/attachme...youtgala16.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/EBRmjy04_layout017.gif[/img]
Liquid, secondary columns fixed-width (n.17)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala17.htm][u]http://www.rexsong.com/blog/attachme...youtgala17.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/EZEQMM04_layout018.gif[/img]
Liquid, secondary columns fixed-width (n.18)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala18.htm][u]http://www.rexsong.com/blog/attachme...youtgala18.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/a1Lp2w04_layout019.gif[/img]
Liquid, three columns, hybrid widths (n.19)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala19.htm][u]http://www.rexsong.com/blog/attachme...youtgala19.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/xFdGKM04_layout020.gif[/img]
Liquid, three columns, hybrid widths (n.20)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala20.htm][u]http://www.rexsong.com/blog/attachme...youtgala20.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/DPvR6f04_layout021.gif[/img]
Liquid, three columns, hybrid widths (n.21)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala21.htm][u]http://www.rexsong.com/blog/attachme...youtgala21.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/uRsB0W04_layout022.gif[/img]
Liquid, three columns, hybrid widths (n.22)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala22.htm][u]http://www.rexsong.com/blog/attachme...youtgala22.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/Dl5QsK04_layout023.gif[/img]
Two columns liquid, side fixed (n.23)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala23.htm][u]http://www.rexsong.com/blog/attachme...youtgala23.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/6xF06X04_layout024.gif[/img]
Two columns liquid, side fixed (n.24)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala24.htm][u]http://www.rexsong.com/blog/attachme...youtgala24.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/05737Q04_layout025.gif[/img]
Two percentage columns (n.25)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala25.htm][u]http://www.rexsong.com/blog/attachme...youtgala25.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/oOXI7t04_layout026.gif[/img]
Two percentage columns (n.26)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala26.htm][u]http://www.rexsong.com/blog/attachme...youtgala26.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/JwvCUT04_layout027.gif[/img]
One column liquid and two halves (n.27)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala27.htm][u]http://www.rexsong.com/blog/attachme...youtgala27.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/oV6cyS04_layout028.gif[/img]
One column liquid and two halves (n.28)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala28.htm][u]http://www.rexsong.com/blog/attachme...youtgala28.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/OVf5vE04_layout029.gif[/img]
Two percentage columns and one larger (n.29)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala29.htm][u]http://www.rexsong.com/blog/attachme...youtgala29.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/whrqZL04_layout030.gif[/img]
Two percentage columns and one larger (n.30)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala30.htm][u]http://www.rexsong.com/blog/attachme...youtgala30.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/au8GDK04_layout031.gif[/img]
Two columns liquid, fixed side and large one (n.31)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala31.htm][u]http://www.rexsong.com/blog/attachme...youtgala31.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/ERbLU504_layout032.gif[/img]
Two columns liquid, fixed side and large one (n.32)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala32.htm][u]http://www.rexsong.com/blog/attachme...youtgala32.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/BUfgy804_layout033.gif[/img]
Two colums fixed (n.33)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala33.htm][u]http://www.rexsong.com/blog/attachme...youtgala33.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/ZJy4fh04_layout034.gif[/img]
Two colums fixed (n.34)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala34.htm][u]http://www.rexsong.com/blog/attachme...youtgala34.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/87lnDw04_layout035.gif[/img]
Two colums fixed (n.35)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala35.htm][u]http://www.rexsong.com/blog/attachme...youtgala35.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/qXA3vy04_layout036.gif[/img]
Two colums fixed (n.36)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala36.htm][u]http://www.rexsong.com/blog/attachme...youtgala36.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/QEC3bH04_layout037.gif[/img]
Two colums fixed (n.37)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala37.htm][u]http://www.rexsong.com/blog/attachme...youtgala37.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/oUUcKj04_layout038.gif[/img]
Two colums fixed (n.38)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala38.htm][u]http://www.rexsong.com/blog/attachme...youtgala38.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/zpmHlH04_layout039.gif[/img]
One column fixed and two halves (n.39)
[url=http://www.rexsong.com/blog/attachments/200603/04_layoutgala39.htm][u]http://www.rexsong.com/blog/attachme...youtgala39.htm[/u][/url]

[img]http://www.webwoo.net/upload_files/38/EPHBJK04_layout040.gif[/img]

又到了一天的学习时间～

不错  不错

好人呐！

恩，这个学习一下有好处。

我打不开~

这个帖子已经过期了，我又没办法保存到我们论坛上。抱歉了

看不了

:L :L 错过了～！