網頁布局教程:掌握CSS網頁布局屬性

2024-07-11 09:04:08

字體：大中小

來源：轉載

供稿：網友

武林網(www.companysz.com)文章簡介：由于是布局教程例子，在版面的細節上沒有花更多時間精細修飾，不過我覺得模板的版面不錯，懂CSS的可以下載進行更細致的美工將會是一個很不錯的網頁，初步學習的可以下載來修改修改屬性參數從而更形象掌握屬性的特性，以達到更深掌握CSS的目的。

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

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

　　在了解和學習CSS之前，首先我們要了解這種計算機語言對我們存在著那些優勢和方便，理解這個我個人覺得很基礎但也很必要，有助于明確CSS+DIV學習目的。網頁教學網綜合網站技術和設計人員的體會，并從網絡應用的角度，將CSS+DIV網站設計的優勢和問題歸納如下：

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

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

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

　　以下是網頁教學網整理認為需要首先認識和掌握基本常用的屬性：

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

　　margin : auto | length 由浮點數字和單位標識符組成的長度值 | 百分數。百分數是基于父對象的高度。對于內聯對象來說，左右外延邊距可以是負數值。

　　padding : length 由浮點數字和單位標識符組成的長度值 | 或者百分數。百分數是基于父對象的寬度。

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

　　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 這個作用在布局中我通常利用他來防止、解決瀏覽器兼容出現問題

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

　　list-style-image list-style-position list-stle-type 這個列表屬性通常使用在有序列表和無序列表當中，列表在定義網頁標題索引文字連接中經常使用，這是驗證CSS定義優越于表格的典型代表。

　　以上是網頁教學網認為在學習CSS中必須要熟記和理解的CSS屬性，充分理解了它門的特性能夠大大提高我們應用布局的自由度。所以學習這個并不是很難，掌握以上樣式你會發覺，以前不了解的時候做起頁面來感覺力不從心，掌握后很自然根據自己的邏輯思維完全可以去實現自己想要的布局和版面，并且CSS抵觸情緒會緩解很多。

　　談到這，我要提出一個很常見的問題。我認為WEB標準并不是禁止table全部使用DIV,包括我自己剛開始的時候也有這樣的錯誤想法，“標準”我的理解是規范設計師養成一個良好的編寫習慣，達到一種主流的統一。有的情況下表格的在網頁的功能實現上還是會有優越于DIV的時候，并且無節制DIV使用過多耗費ie解析增加cpu負擔。這也是我們值得注意的問題。

　　掌握以上常用的屬性的同時，下面通過參考網絡博客由設計銘編寫的一個CSS三列布局模板，主要圍繞如何掌握CSS精要，學習網頁布局教程實例模板，網友可以下載該模板根據文章內容細心琢磨，從而領會掌握技術。該模板經過本站編排涵蓋上面列出重要的CSS屬性。

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

上一篇：CSS選擇器大全

下一篇：你怎么書寫CSS代碼？