- 掛牌上市企業
- 60秒人工響應
- 99.99%連通率
- 7*24h人工
- 故障100倍補償
利用CSS+Div進行網頁布局和排版 |
| 發布時間: 2012/8/20 17:31:52 |
|
本文將講述如何進行網頁的布局和排版。所謂布局，英文名稱叫做Layouts，是指網頁上不同功能分區的數量以及它們之間排列的位置和順序。從事網頁布局這項工作非常像報紙的主編，將每天大大小小長短不一的新聞在固定的版面中進行擺放，以達到最好的效果。
目前，利用CSS和Div組合對頁面進行布局已經成為一個公認的標準方法，而在這之前，流行甚至唯一的方式就是利用表格進行頁面布局。本文就先從它們兩個各自的優缺點談起。
1、表格還是Div
“生存還是死亡？這是一個問題。”對于網頁布局來說，用表格還是用Div，也是一個問題。在Div+CSS占網頁布局統治地位的今天，在學習它的時候，有必要先回顧一下表格的方法。
2、利用表格進行網頁布局
利用表格進行網頁布局的方法其實很簡單：將網頁分為幾個表格，頁面上方，一般是導航條的位置，一個表格；頁面中間，內容列表，新聞圖片等等，分為2到3欄，一個表格；頁面下部，文字導航條，版權聲明等等，一個表格。如果在頁面中間的內容部分有所需要，還可以在其中進一步嵌套表格。
3、利用Div+CSS進行網頁布局
既然利用表格進行網頁布局有前面所提到的一些缺點，近年來人們開始逐漸利用Div+CSS的方法實現布局的任務。
Div+CSS的方法最大的優點就是講內容和布局分開處理，去掉了表格那么多的繁瑣標簽，縮減了網頁文件大小。根據網頁的流行結構，利用Div+CSS能夠完成如下多種布局：
創建一列式網頁布局。
創建兩列式網頁布局。
創建多列式網頁布局。
創建不規則網頁布局。
從下面的內容開始，我們將學習利用Div和CSS創建網頁布局的具體過程。
4、用Div+CSS創建一列式網頁布局
上文中提到了網頁布局的概念與兩種布局方法，特別是傳統表格布局的優劣。本小節將介紹用Div+CSS創建網頁布局的具體過程。
我們已經瀏覽過眾多的網站，從目前流行的結構來看，主流網站的網頁布局一般有如下幾種：
一列式布局：整個網頁一列到底部，不分左右兩欄，類似大部分書籍的排版方式。
兩列式布局：網頁主要部分分為左、右兩個區域，分別放置不同的內容，類似大部分雜志的排版方式，多用于一般商業網站、博客等等。
多列式布局：網頁主要部分分為左、中、右三個甚至更多的區域，分別放置不同的內容，類似不少報紙的排版方式，多用于一般商業網站等等。 本文出自：億恩科技【www.artduck.net】 |
0371-60135900
京公網安備41019702002023號
香港服務器租用
美國服務器租用
電信骨干機房
聯通骨干機房
