码迷,mamicode.com
首页 > Web开发 > 详细

2.2 CSS禅意花园作品赏析(上)

时间:2014-06-20 16:02:03      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   blog   http   tar   

一、郊野——两列布局

两列布局是所有网站中最常见的布局形式,也是禅意花园的作品中最常见到的。这种布局结构清晰,对访问者的引导性非常好。《郊野》是这类作品的代表,由意大利设计师Mario Carboni设汁。在这个作品中,页面划分合理,并且颜色搭配平和而协调,点击下面的网址查看。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=149/149.css,设计师的个人网站是http://www.mariocarboni.com/。

二、像素画——三列布局

这是193号作品,由英国设计师Jon Tan设计。这是一个很典型的三列布局设计,设计师专门制作了精致的像素画,作为页面的标题图像,效果相当吸引人。

三列布局也是一种非常常见的布局形式,通常一个宽列放置主要内容,两个窄列放置导航链接等内容,访问这个作晶的网址是http://www.csszengarden.com/?cssfile=193/193.css,设计师的个人网站是http://www.gr0w.com/。

三、百合池塘——三列布局变体

这是201号作品,如湖2.8所示,由澳大利亚设计师Rose Thorogood设计,这是一个三列布局的变体形式,在顶部和底部,相邻的两列进行了合并。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=201/201.css,设计师的个人网站是http://tulips4rose.com。

四、郁金香——多列布局

禅意花园征集作品要求使用固定的HTML,这个限制使大多数设计方案都采用两列或三列布局,而实际上也可以制作出非常好的多列效果。在收录的作品中,也有一些非常优秀的多列布局作品,088号作品就是典型代表,由美国设计师Eric Shepherd设计。lodidance.com

访问这个作品的网址是http://www.csszengarden.com/?cssfile=088/088.css,设计师的个人网站是http://arkitrave.com/log。

五、日与夜——包含圆角的设计

CSS的框模型限制,使得在使用CSS设计页面的初期,大多数作品都是方形的,缺少圆形和曲线的配合,显得比较呆板。实际上,使用CSS同样可以设计出完美的圆形图形元素的作品。这里展示的这个作品就使用了包含圆角的设计,由比利时设计师Colas Schretter设计。

访问这个作品的网址是http://homepages.vub.ac.be/~cschrett/zengarden/dayandnight,设计师的个人网站是http://homepages.vub.ac.be/~cschrett。

六、Si6——包含倾斜的设计

绝大多数网页的布局都是横平竖直的,而禅意花园网站中可以看到一些包含了倾斜元素的设计作品,不但没有破坏页面的整体平衡感,而且还为页面增添了独特的气质,使访问者感到耳日一新。比较典型的倾斜设计作品是044号作品,它是由美国设计师Shaun Inman设计的。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=044/044.css,设汁师的个人网站是http://www.shauninman.com。

七、清茶时光——装饰性设计

再好的设计如果忽视了对细节的把握,也会太打折扣的。使用CSS不但能够布局,还可以为网页添加很多装饰性的元素,使页面看起荣非常精致,细节更加突出。这里展示的124号作品是由奥地利设计师Michaela Maria Sampl设计的,她通过使用一系列协调的装怖性元素,使页面的效果和谐而美观。充分体现女性设计师作品的柔美风格。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=124/124.css,设计师的个人网站是http://www.frausampl.at。

八、爱之空气——流体布局

目前,绝大多数网站,尤其是正规的商业网站,都使用固定宽度的布局.CSS禅意花园的作品也是如此,但是仍有一部分适应宽度的作品,或者称为“流体布局”。例如这里展示的170号作品,是由德国设计师Nele Goetz设计的,页面分为两列.总的宽度会撑满整个页面,左列宽度会随浏览器宽度而变化,右列宽度固定。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=170/170.css,设计师的个人网站是http://www.april-design.de。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/662.html

2.2 CSS禅意花园作品赏析(上),布布扣,bubuko.com

2.2 CSS禅意花园作品赏析(上)

标签:des   style   class   blog   http   tar   

原文地址:http://www.cnblogs.com/you-me/p/3796703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!