學(xué)習(xí)程序最好的方法是查看別人的原代碼，學(xué)習(xí)CSS也一樣，這篇文章介紹最人們的CSS網(wǎng)站收集站點(diǎn)，行話叫CSS陳列館（showcase），[專(zhuān)錄](méi)網(wǎng)站設(shè)計(jì)師必看，必收藏，畢學(xué)習(xí)

　　http://www.csszengarden.com/
　　CSS禪意花園是最富盛名的CSS設(shè)計(jì)陳列館，Dave　Shea在創(chuàng)辦之初是為了讓網(wǎng)頁(yè)設(shè)計(jì)師通過(guò)CSS樣式表針對(duì)同一個(gè)Html文件的設(shè)計(jì)不同的樣式，卻沒(méi)想到這個(gè)項(xiàng)目成為了當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)頂尖高手展現(xiàn)無(wú)窮創(chuàng)意的舞臺(tái)，看看禪意花園的

　　http://www.cssvault.com/
　　Cssvault是第一個(gè)以網(wǎng)站縮略圖的方式呈現(xiàn)的優(yōu)秀設(shè)計(jì)的網(wǎng)站，而CSS陳列館（showcase）這一說(shuō)法也是由這里開(kāi)始，從開(kāi)始至今大約一年的時(shí)間里面，收錄了大量的優(yōu)秀設(shè)計(jì)，是CSS設(shè)計(jì)師必去的網(wǎng)站之一。

　　http://www.webstandardsawards.com/
　　Web Standards Award，顧名思義，這里也是收集符合“網(wǎng)頁(yè)標(biāo)準(zhǔn)”設(shè)計(jì)的網(wǎng)站，除收集外，還對(duì)每月收集來(lái)的網(wǎng)站進(jìn)行評(píng)選，獲勝設(shè)計(jì)可以冠以當(dāng)月“網(wǎng)頁(yè)標(biāo)準(zhǔn)”設(shè)計(jì)獎(jiǎng)的頭銜，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，也是一種殊榮。

　　http://www.unmatchedstyle.com/
　　這個(gè)網(wǎng)站是最新出爐的一個(gè)CSS陳列館，和前面介紹的幾個(gè)網(wǎng)站大同小異，也是采用縮略圖的方式呈現(xiàn)，當(dāng)然每個(gè)網(wǎng)站收集者的審美特征都不同，多一個(gè)地方無(wú)疑也給鐘情于CSS設(shè)計(jì)的朋友多了一個(gè)選擇，而且他們的更新很勤快。

繼續(xù)閱讀 →

這半個(gè)月以來(lái)今天是頭一天在20:00左右下班，想起關(guān)于這個(gè)教程一直沒(méi)有完成，心里感覺(jué)非常不踏實(shí)。兩個(gè)月前剛辭職，本想把教程全部完成，但是由于一次不幸，導(dǎo)致硬盤(pán)中的數(shù)據(jù)大部分丟失，本寫(xiě)了一半的教程也隨之灰飛煙滅。但最近有許多的網(wǎng)友通過(guò)博客、QQ、MSN、E-MAIL等途徑與我聯(lián)系，希望能繼續(xù)更新這個(gè)教程，甚至有網(wǎng)友居然撥打我的手機(jī)(我不知道大家是如何知道我的號(hào)碼的，，哎~~)被大家所感動(dòng)，時(shí)間雖然很緊，但還是抽點(diǎn)時(shí)間來(lái)盡量完成這個(gè)教程吧~~就像鯨魚(yú)叔叔所說(shuō)的，時(shí)間就是奶，越擠就越多~~

首先，有些東西需要說(shuō)明一下。對(duì)于之前的文章，由于為了讓大家更好的區(qū)分各層的關(guān)系，教程中不少地方使用了大寫(xiě)的CLASS或者ID，其實(shí)這樣做是不推薦的，我推薦的方法是使用單詞之間增加下劃線，或者單詞拼接的方法。因?yàn)镃SS是區(qū)分大小寫(xiě)的。大家可以看到，我提供給大家的下載文件中全部都是使用小寫(xiě)來(lái)處理的。

我們先來(lái)處理sidebar的樣式，經(jīng)過(guò)分析，我們可以得知，sidebar有四個(gè)部分，我們將這四個(gè)部分分為四個(gè)層：

繼續(xù)閱讀 →

四、頁(yè)面制作(1)—-用好border和clear

　　由于找工作找房子的原因，隔了這么久才能開(kāi)始寫(xiě)教程，心里感覺(jué)很對(duì)不起一直在關(guān)注本站的朋友，今天是找到房子的第二天，于是趕快繼續(xù)寫(xiě)教程。
　　這一節(jié)里面，主要就是想告訴大家如何使用好border和clear這兩個(gè)屬性。

繼續(xù)閱讀 →

三、頁(yè)面頂部制作(2)—-使用列表li制作菜單

　　開(kāi)始此節(jié)的學(xué)習(xí)前，請(qǐng)確認(rèn)你已經(jīng)參照之前的幾節(jié)內(nèi)容寫(xiě)入了DIV、CSS到index.htm和css.css文件中。
　　這一節(jié)我將告訴大家如何用列表li來(lái)制作菜單。

繼續(xù)閱讀 →

三、頁(yè)面頂部制作(1)

當(dāng)我們寫(xiě)好了頁(yè)面大致的DIV結(jié)構(gòu)后，我們就可以開(kāi)始細(xì)致地對(duì)每一個(gè)部分進(jìn)行制作了。

在上一章中我們寫(xiě)入了一些樣式，那些樣式是為了預(yù)覽結(jié)構(gòu)而寫(xiě)入的，我們把css.css中的樣式全部清除掉，重新寫(xiě)入以下樣式代碼：

繼續(xù)閱讀 →

二、寫(xiě)入整體層結(jié)構(gòu)與CSS

接下來(lái)我們?cè)谧烂嫘陆ㄒ粋€(gè)文件夾，命名為“DIV+CSS布局練習(xí)”，在文件夾下新建兩個(gè)空的記事本文檔，輸入以下內(nèi)容：

繼續(xù)閱讀 →

轉(zhuǎn)自http://www.tblog.com.cn

一、頁(yè)面布局與規(guī)劃

好久沒(méi)有認(rèn)真寫(xiě)點(diǎn)東西了，想起最近這些時(shí)間經(jīng)常有朋友問(wèn)到我有關(guān)于DIV+CSS布局的問(wèn)題，其實(shí)歸根結(jié)底還是由于沒(méi)有入門(mén)造成的。那么接下來(lái)的這篇文章就帶領(lǐng)大家入門(mén)吧…

在網(wǎng)頁(yè)制作中，有許多的術(shù)語(yǔ)，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會(huì)用到一些有關(guān)于HTML的基本知識(shí)，而在你學(xué)習(xí)這篇入門(mén)教程之前，請(qǐng)確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開(kāi)始一步一步使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)吧。

所有的設(shè)計(jì)第一步就是構(gòu)思，構(gòu)思好了，一般來(lái)說(shuō)還需要用PhotoShop或FireWorks(以下簡(jiǎn)稱(chēng)PS或FW)等圖片處理軟件將需要制作的界面布局簡(jiǎn)單的構(gòu)畫(huà)出來(lái)，以下是我構(gòu)思好的界面布局圖。

繼續(xù)閱讀 →