由于是布局教程例子，在版面的細(xì)節(jié)上沒有花更多時間精細(xì)修飾，不過我覺得模板的版面不錯，懂CSS的可以下載進(jìn)行更細(xì)致的美工將會是一個很不錯的網(wǎng)頁，初步學(xué)習(xí)的可以下載來修改修改屬性參數(shù)從而更形象掌握屬性的特性，以達(dá)到更深掌握CSS的目的。


CSS是不是真的很難學(xué)?其實不難，只是缺少了掌握的經(jīng)驗，拿著一本書硬肯，有沒有收獲?有!但可能成效不大，作為過來人我覺得被動學(xué)習(xí)想要記住的東西是很難的，學(xué)習(xí)它我的經(jīng)驗是可以先掌握精要(重要屬性開始)，待掌握精要自然而然這些屬性遠(yuǎn)遠(yuǎn)不夠滿足自己的需求引起自己求知的欲望，自動延伸其他相關(guān)的屬性從而自然掌握和加深對CSS的認(rèn)識。這是我認(rèn)為的一種方法(可惜我學(xué)的時候要是有人這么告訴我會走少很多彎路)。第一次寫經(jīng)驗和大家共享，語言組織上或許有些欠缺，還請網(wǎng)友包含，但相信在以后更多的經(jīng)驗中，會寫的更好。以下是我總結(jié)的一些經(jīng)驗和我認(rèn)為必要講的一些概念性解釋。有經(jīng)驗分享歡迎發(fā)表評論共同探討。

　　在現(xiàn)時的網(wǎng)頁技術(shù)中，CSS+DIV已經(jīng)成為一種主流的網(wǎng)站標(biāo)準(zhǔn)，我們可以稱他為(web標(biāo)準(zhǔn))。CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫，它是一種用來表現(xiàn) HTML 或 XML 等文件式樣的計算機(jī)語言。

　　在了解和學(xué)習(xí)CSS之前，首先我們要了解這種計算機(jī)語言對我們存在著那些優(yōu)勢和方便，理解這個我個人覺得很基礎(chǔ)但也很必要，有助于明確CSS+DIV學(xué)習(xí)目的。腳本之家綜合網(wǎng)站技術(shù)和設(shè)計人員的體會，并從網(wǎng)絡(luò)應(yīng)用的角度，將CSS+DIV網(wǎng)站設(shè)計的優(yōu)勢和問題歸納如下：

　　首先，CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬(真正意義在于，增加了有效關(guān)鍵詞占網(wǎng)頁總代碼的比重)使用web標(biāo)準(zhǔn)制作的網(wǎng)站具有搜索引擎友好有一定優(yōu)勢;從程序與網(wǎng)頁的美工方面，兩者可以相互獨立再結(jié)合從而減輕工作量避免重負(fù)開發(fā)。

　　其次是CSS+DIV制作的網(wǎng)站使得網(wǎng)站改版相對簡單，很多問題只需要改變CSS而不需要改動程序，從而降低了網(wǎng)站改版的成本，節(jié)省很多的時間。在和開發(fā)室的同事都有合作過類似的項目案例，相信同事對這點或多或少能感覺到實質(zhì)的方便感受。

　　最后一點是在剛開始接觸的時候感覺很不好控制，反而覺得table更好控制方位，并且有可能會有抵觸使用DIV編寫寫網(wǎng)頁布局的情緒。其實這個是一個適應(yīng)過程，我們可以通過大量的實際操作和練習(xí)并用心領(lǐng)會要點。之后就能感覺得出它確實是千變?nèi)f化，一個頁面不同的布局有可能有不同實現(xiàn)布局的寫法，但無論如何寫法都好，代碼都是朝一個原則走的：就是：定義的名稱盡可能的通用性，也就是用最少的代碼定義更多的盒模具我稱它為(一名多用);命名要規(guī)范性、組合性，方便其他設(shè)計師見名解用。另外一個是關(guān)于使用ID還是使用Class，對于這個有很多人可能會很模糊。其實是相對的，不過現(xiàn)在我寫的習(xí)慣主要是使用class比較多，我覺得這個更方便并適合自己的編寫習(xí)慣。

　　以下是腳本之家整理認(rèn)為需要首先認(rèn)識和掌握基本常用的屬性：

　　CSS必須了解和掌握的重要屬性：

　　margin : auto | length 由浮點數(shù)字和單位標(biāo)識符組成的長度值 | 百分?jǐn)?shù)。百分?jǐn)?shù)是基于父對象的高度。對于內(nèi)聯(lián)對象來說，左右外延邊距可以是負(fù)數(shù)值。

　　padding : length 由浮點數(shù)字和單位標(biāo)識符組成的長度值 | 或者百分?jǐn)?shù)。百分?jǐn)?shù)是基于父對象的寬度。

　　float : none | left |right 這個是浮動，在定義布局中必定用到的屬性，在使用它的時候要注意產(chǎn)生的走位和瀏覽器兼容性問題，要在很多的實踐操作中多了解這個屬性。有這個屬性就要了解以下這個配套使用的屬性“清除”

　　clear : none | left |right | both; none 允許兩邊都可以有浮動對象both不允許有浮動對象;left不允許左邊有浮動對象 right不允許右邊有浮動對象。

　　background:url(images/aardvark.gif) left top no-repeat | repeat-x | repeat-y 定義背景圖片來美化版面也是我們很常用到的屬性。

　　overflow : visible | auto | hidden | scroll 這個作用在布局中我通常利用他來防止、解決瀏覽器兼容出現(xiàn)問題

　　border:1px solid #CCCCC 這個是定義邊框大小，線條，顏色的屬性。

　　list-style-image list-style-position list-stle-type 這個列表屬性通常使用在有序列表和無序列表當(dāng)中，列表在定義網(wǎng)頁標(biāo)題索引文字連接中經(jīng)常使用，這是驗證CSS定義優(yōu)越于表格的典型代表。

　　以上是腳本之家認(rèn)為在學(xué)習(xí)CSS中必須要熟記和理解的CSS屬性，充分理解了它門的特性能夠大大提高我們應(yīng)用布局的自由度。所以學(xué)習(xí)這個并不是很難，掌握以上樣式你會發(fā)覺，以前不了解的時候做起頁面來感覺力不從心，掌握后很自然根據(jù)自己的邏輯思維完全可以去實現(xiàn)自己想要的布局和版面，并且CSS抵觸情緒會緩解很多。

　　談到這，我要提出一個很常見的問題。我認(rèn)為WEB標(biāo)準(zhǔn)并不是禁止table全部使用DIV,包括我自己剛開始的時候也有這樣的錯誤想法，“標(biāo)準(zhǔn)”我的理解是規(guī)范設(shè)計師養(yǎng)成一個良好的編寫習(xí)慣，達(dá)到一種主流的統(tǒng)一。有的情況下表格的在網(wǎng)頁的功能實現(xiàn)上還是會有優(yōu)越于DIV的時候，并且無節(jié)制DIV使用過多耗費ie解析增加cpu負(fù)擔(dān)。這也是我們值得注意的問題。

　　掌握以上常用的屬性的同時，下面通過參考網(wǎng)絡(luò)博客由設(shè)計銘 編寫的一個CSS三列布局模板，主要圍繞如何掌握CSS精要，學(xué)習(xí)網(wǎng)頁布局教程實例模板，網(wǎng)友可以下載該模板根據(jù)文章內(nèi)容細(xì)心琢磨，從而領(lǐng)會掌握技術(shù)。該模板經(jīng)過本站編排涵蓋上面列出重要的CSS屬性。

　　由于是布局教程例子，在版面的細(xì)節(jié)上沒有花更多時間精細(xì)修飾，不過我覺得模板的版面不錯，懂CSS的可以下載進(jìn)行更細(xì)致的美工將會是一個很不錯的網(wǎng)頁，初步學(xué)習(xí)的可以下載來修改修改屬性參數(shù)從而更形象掌握屬性的特性，以達(dá)到更深掌握CSS的目的。

最新評論