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


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

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

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

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

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

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

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

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

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

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

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

　　clear : none | left |right | both; none 允許兩邊都可以有浮動(dòng)對(duì)象both不允許有浮動(dòng)對(duì)象;left不允許左邊有浮動(dòng)對(duì)象 right不允許右邊有浮動(dòng)對(duì)象。

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

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

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

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

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

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

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

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

最新評(píng)論