貼兩篇xhtml＋css相關的文章，回應用戶關切

很高興「優才網」公號用戶會利用這個平台提出一些問題，此篇文章回應用戶對xhtml入門的基礎知識的需求而貼出，希望能夠切實地幫助到用戶理解此類知識。

什麼是XHTML?

1. xhtml指的是可擴展超文本標記語言。

2. xhtml與html4.01幾乎是相同的。

3. xhtml是更嚴格更純凈的html版本。

4. xhtml是以xml應用的方式定義的html。

5. xhtml是2001年1月發布的W3C推薦標準。

6. xhtml得到所有主流瀏覽器的支持。

網站開發之DIV+CSS

簡單布局網站入門篇

這篇文章主要介紹如何使用DIV和CSS簡單布局一個網站的首頁，通常將網站劃分為頂部（Logo、導航條）、中部（頁面主要內容、左右欄目）、底部（製作方介紹、超鏈接）。

這是非常基礎的一篇引入性文章，採用案例的方式進行介紹，希望對你有所幫助。運行結果如下圖所示：

main.html主頁面代碼

主要通過div進行布局，同時用戶設置導航條，滑鼠懸停時背景顏色切換。

css/main.css代碼

該部分代碼主要是CSS文件，用於布局和設置主頁面。

下面講解幾個重點：

1.在

布局過程中，需要在CSS中設置"margin:0 auto;"，才能讓它居中顯示，這段代碼的含義是：第一個值就是元素的上下邊距0，第二個值就是左右邊距。當元素的定義了width屬性時，auto還能實現居中的效果。

2.在CSS中設置h2，需要添加"float: left;"，使其水平顯示，不增加該句的效果：如下所示：

3.整個DIV布局代碼如下所示，h2會向下移動一段距離，這時CSS中通過"margin-top: 4px;"進行微調。

4.懸停的核心代碼如下所示，其中"text-decoration: none;"設置超鏈接無下劃線，然後是懸停在超鏈接a和字體h2的變換效果。注意冒號(:)和hover之間不能有空格，否則效果消失。

簡單補充CSS內容，更多的是希望你從課本中學習，這篇文章我以案例為主。

什麼是CSS

CSS（Cascading Style Sheet，層疊樣式表）是一種格式化網頁的標準方式，它擴展了HTML的功能，使網頁設計者能夠以更有效的方式設置網頁格式。它是將樣式信息與網頁內容分離的一種標記性語言。

樣式定義的語法

樣式表項的組成

Selector

Selector定義樣式作用的對象，property為CSS屬性，value為屬性對應的值。

CSS直接在標記符中嵌套

HTML標記符的style屬性

例如：

，

其中，style屬性的取值形式為「CSS屬性:CSS屬性值」，使用多個屬性用分號分隔。

在STYLE標記符定義樣式

樣式定義的方式為：

Selector

運行結果如下所示：

鏈接外部樣式表文件

使用LINK標記符

樣式表文件可以用文本編輯器編輯，也可以用FP或DW編輯，內容為樣式定義。

其中CSS的代碼如下所示：

運行結果如下所示：

文章來源：

http://www.tuicool.com/articles/MBZ7NbY

利用DIV+CSS快速布局頁面

在各類智能手機和平板出現前的很長一段時間裡，Web網頁都是通過表格進行布局的。由於表格在視覺呈現上的直觀，早期很多WYSIWYG（所見即所得）的網頁設計軟體通常也多使用表格。

但是這種布局方式有很大的局限性——比如，同一行或列的單元格在長度、寬度上會相互影響和制約等。如今，表格式布局早已不再流行，本文就此介紹將其「拍死在沙灘上」，目前最為廣泛採用的網頁布局方式——DIV + CSS。

什麼是 DIV+CSS

所謂DIV+CSS，是指通過HTML「層」標籤——

，輔以CSS中對該「層」寬度、排列等樣式的定義，來實現網頁布局的一種方式。

如果你不懂什麼是CSS和HTML，可以參考前端入門篇（一）：如何把設計稿還原成真實網頁。

（http://www.jianshu.com/p/a981158df5a8）

為什麼要用 DIV

為什麼要用 Div取代Table？一言以蔽之：靈活。

Table的格式其實是一定的——首先要有一個表格，其次表格里要有行，每一行又分為許多列(單元格)。

如果在同一行的某個單元格中，要布局放入更多內容，而左右兩邊的單元格不變的話，要怎麼實現？

只能在單元格里再嵌套一個表格。如果嵌套層數少那還好，一旦層數多起來，絕逼要瘋。

這還是不涉及修改的情況。如果某天你老闆拍腦袋說，把登錄模塊給我從右邊移到左邊，你就等著加班吧。

與之相對地，用Div布局就遠為靈活。首先，每一個

中都可以嵌入另外一個或幾個

，子子孫孫可無窮盡也。另外，要修改某個Div的布局位置，也只需要相應的調整其CSS樣式即可。

如何連接Div和CSS

但是Div所謂的靈活也並非隨心所欲、胡亂排布，它也是遵守一定的排布規則的——事實上，它在排布上與Table還是有些相似的。具體來說，Table的排布方式一般如下。

而一般Div的排布方式也與之類似，只不過並沒有表格、行、單元格 這許多層級，只是單一層級的

而已。

那麼問題來了，這些Div長得一毛一樣啊，我怎麼讓瀏覽器知道它們是在什麼位置的？這裡就輪到CSS出場了。

我們通過CSS樣式的定義，再在HTML的

中調用這些樣式，就可以實現Div和CSS的連接。

舉例來說，如果我們在CSS中聲明了一個樣式——.row，那麼在HTML中就可以註明某一或某些Div適用這一類，來調用這一樣式。如下，第二層的Div就使用了row這個樣式。

將頁面等分成12欄

分欄布局是使用Div+CSS布局網頁的一種主要布局方式，主要通過把頁面等分成12欄來實現。為什麼要分成12欄？話說網頁被分成12欄也太恐怖了吧，在小點的屏幕上每一欄大概只有兩個手指寬吧？啊喂，會引發密集恐懼症的吧？

等等，你先別急，先來想想一般你看到的網站都會分成幾欄？一欄？有的。兩欄？也有。三欄？這個好像還比較常見。四欄？這個也比較常見。欄數再加下去也不是沒有，但是就像之前說的，恐怕要引發密恐了。

那麼這幾個數字和12有什麼關係呢？很簡單，都能整除12。所以說，把頁面分成12欄的好處就是——能利用合并欄來將頁面等分成2、3、4 欄，如下圖。

而在利用這個12 column grid以後，在使用CSS布局上也會有非常大的好處。具體是什麼好處呢？我們來直接看代碼的實例吧。首先我們在CSS中，定義如下樣式。

有了這些不同寬度的column樣式定義，我們就可以開始自由地排列頁面中的Div啦，舉例來說，假設下邊圖中的黑框就是我們網頁中要布局的層，那我們就可以用其下的代碼來實現。

怎麼樣，很簡單吧？

關於Div+CSS布局網頁的好處，除了上文所述外，還有就是能應用於響應式（Responsive）頁面。至於什麼是響應式頁面以及如何適配，請移步前端入門篇（三）：響應式網頁設計 101。

（http://www.jianshu.com/p/599d5134ce65）

文章來源：

https://zoomyale.com/2016/intro_to_frontend_2/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！