學習本系列教程需有一定html和css基礎，也就是指您之前做過網頁，會用表格布局。如果您剛開始學習網頁制作，不知道什麼是表格布局及html和css，建議您先去充電，否則學習本教程會非常吃力或者根本就聽不懂。
由于時間關系，本教程隻講解一些基礎知識，讓您從原來的表格布局跨入到web标準（div+css）布局，會使用web标準制作出常見的頁面，這也達到了本教程的目的。
本教程多以執行個體形式循序漸進講解，執行個體涉及到哪些關鍵點或難點就講解什麼，較少講解概念。因為概念這些東西很難說明白，或者說明白你也不一定能聽懂，聽懂了也不一定能了解。是以把概念留給大家以後再深入研究。
由于章節關系，沒有把css和css hack單獨分出，隻是在用到的時候穿插入講解了。html基礎和css基礎隻在第一節中介紹了幾點重要的。
下面我們開始第一天的學習
一、xhtml css基礎知識
首先說一下我們這節課的知識點
文檔類型
語言編碼
html标簽
css樣式
css優先級
css盒模型組成
1）文檔類型
當我們用dreamweaver建立一下html格式文檔時，檢視源代碼，會發現代碼最上部有如下這句話：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
這句話标明本文檔是過渡類型，另外還有架構和嚴格類型，目前一般都采用過渡類型，因為浏覽器對xhtml的解析比較寬松，允許使用html4.01中的标簽，但必須符合xhtml的文法。許多朋友在制作頁面時，往往喜歡把這句删除掉，在這裡建議大家一定要保留這句話，删除它後可能引起某些樣式表失效或其它意想不到的問題。
2）語言編碼
接下來我們還會發現這樣一句話：
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
它标示文檔的語言編碼。就像我們平時所說的漢語、英語一樣。這裡的gb2312告訴浏覽器，本文檔采用簡體中文編碼；還有一種常用的編碼是utf-8編碼，它是國際通用的編碼。不管我們采用哪種編碼，有一點就是包含的css樣式表和其它檔案也必須和本文檔的編碼一樣，要不就會出現亂碼。
3）html标簽
html标簽在頁面中都必須結束。成對的标簽以“/标簽名”結束，有些單一的标簽在本身的結尾打上/來結束，這是xhtml代碼編寫的規範。
成對的标簽：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......
單一的标簽：
<img src="" />
<br />
.......
還需說明一點的是按xhtml規範，标簽必須用小寫。
4）css樣式
加載css樣式有以下四種
外部樣式
内部樣式
行内樣式
導入樣式
<link href="layout.css" rel="stylesheet" type="text/css" />
這種形式是把css單獨寫到一個css檔案内，然後在源代碼中以link方式連結。它的好處是不但本頁可以調用，其它頁面也可以調用，是最常用的一種形式。
<style>
h2 { color:#f00;}
</style>
這種形式是内部樣式表，它是以 結尾，寫在源代碼的head标簽内。這樣的樣式表隻能針對本頁有效。不能作用于其它頁面。
<p style="font-size:18px;">内部樣式</p>
這種在标簽内以style标記的為行内樣式，行内樣式隻針對标簽内的元素有效，因其沒有和内容相分離，是以不建議使用。
@import url("/css/global.css");
連結樣式是以@import url标記所連結的外部樣式表，它一般常用在另一個樣式表内部。如layout.css為首頁所用樣式，那麼我們可以把全局都需要用的公共樣式放到一個global.css的檔案中，然後在layout.css中以@import url("/css/global.css")的形式連結全局樣式，這樣就使代碼達到很好的重用性。
5）css優先級
id優先級高于class
後面的樣式覆寫前面的
指定的高于繼承
行内樣式高于内部或外部樣式
總結：單一的(id)高于共用的(class)，有指定的用指定的，無指定則繼承離它最近的
6）css盒模型組成
css盒模型是本節教程的重點。前面幾個知識點，如果您會用表格布局的話，就非常好了解和掌握了。這裡的盒模型是和table布局的一個不同點。學習web标準，首先要弄懂的就是這個盒模型，這就是div排版的核心所在。傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁内容，改用css排版後，就是通過由css定義的大小不一的盒子和盒子嵌套來編排網頁。這種排版方式的網頁代碼簡潔，表現和内容相分離，維護友善，能相容更多的浏覽器，比如pda裝置也能正常浏覽。
那麼它為什麼叫盒子呢？先說說我們在網頁設計中常聽的屬性名：内容(content)、填充(padding)、邊框(border)、邊界(margin)， css盒子模式都具備這些屬性。
\
我們可以把它想像成現實中上方開口的盒子，然後從正上往下俯視，邊框相當于盒子的厚度，内容相對于盒子中所裝物體的空間，而填充呢，相當于為防震而在盒子内填充的泡沫，邊界呢相當于在這個盒子周圍要留出一定的空間，友善取出。是不是這樣就很容易了解盒模型了。
是以整個盒模型在頁面中所占的寬度是由左邊界+左邊框+左填充+内容+右填充+右邊框+右邊界組成，而css樣式中width所定義的寬度僅僅是内容部分的寬度，這是許多朋友容易搞混的地方
這裡的邊界我們也稱之為：外邊距、外更新檔；填充也叫：内邊距、内更新檔。
如果現在您對css盒模型了解還不夠透徹，繼續往下看，後來的章節會都會應用到盒模型執行個體。
二、如何開始學習web标準？
1）有html和css基礎
學習本系列教程前，要求您有一定的html和css基礎，制作過網頁，會用表格進行網頁布局，這樣學習起來才會很輕松。如果您對這些還不懂，建議先學習這些知識，然後再來學習本教程。
2）轉變觀念
在以前我們制作網站時，總是習慣于先考慮外觀、顔色、字型及布局等所有表現在頁面上的内容。但外觀并不是最重要的，相反最終使用者在通路網頁時的體驗才是優先要考慮的。一個由div＋css布局且結構良好的頁面可以通過css定義成任何外觀，在任何網絡裝置上（包括手機、pda和計算機）上以任何外觀表現出來，而且用div＋css布局建構的網頁以夠簡化代碼，加快顯示速度。
是以要想學好div＋css，首先要轉變觀念，需要抛棄傳統的表格(table)布局方式，采用層(div)布局，并且使用層疊樣式表(css)來實作頁面的外觀。給網站浏覽者更好的體驗。
3）多動手、多動腦
說到這點，有點小兒科了，就像我們上國小時老師常常教我們的那樣。為什麼我在這裡也做為一點列出來呢，我是通過評論發現，有些同學提的問題太沒水準了，稍微動下腦筋就明白了，或者自己動手一試就知道了，但他就懶得試。舉個簡單的例子，拿浏覽器相容來說吧，你寫個樣式之後，在ie和火狐分别打開看一下不就明白了，但就是不去做。還有一個同學留言要我把一個執行個體中的圖檔打包發給他，我一看代碼，就用到一張圖檔，無語了，有你留言的這個時間，自己也早把圖檔下載下傳下來了。是以在這裡告誡大家，一定要多動手、多動腦，不要怕麻煩。另外在學習完一節教程後，一定要自己做一遍執行個體，這樣能更快掌握。
ecshop數位模闆
文章來源：http://www.huiyi8.com/ecshop/shuma/
![WEB前端筆記CSS-3D動畫，網友：很細節，優秀！動畫3D示例結果動畫示例結果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)