2.2 CSS禪意花園作品賞析（上）

標籤：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