一、郊野——兩列布局 兩列布局是所有網站中最常見的布局形式,也是禪意花園的作品中最常見到的。這種布局結構清晰,對訪問者的引導性非常好。《郊野》是這類作品的代表,由意大利設計師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教程布局之道》教程列表 |