淺談分析表格佈局與Div+CSS佈局的區別

時間 2019-11-11

標籤淺談分析表格佈局 div+css div css 區別欄目 HTML 简体版

原文原文鏈接

(1)表格佈局css

表格佈局容易掌握，佈局方便。但表格佈局須要經過表格的間距或者使用透明的gif圖片來填充佈局板塊間的間距，這樣佈局的網頁中表格會生成大量難以閱讀和維護的代碼；並且表格佈局的網頁要等整個表格下載完畢後才能顯示全部內容，全部表格佈局瀏覽速度較慢[2]。html

(2)CSS+DIV佈局佈局

一般要實現比較精確和自適應的層佈局須要設置層的樣式，即用CSS控制層的位置。CSS+DIV佈局採用Div來定位，經過Div的border(邊框)、padding(填充)、margin(邊界)和Float（浮動）等屬性來控制板塊的間距，具體實施是經過建立Div標籤並對其應用CSS網站

[3]定位及浮動屬性來實現。ui

CSS+DIV佈局須要編寫大量CSS樣式代碼來控制各佈局DIV層，所以要掌握它相對錶格佈局會困難一些。但CSS+DIV佈局較表格佈局更加靈活實用，網站佈局後很容易就能調整網站的佈局結構；並且CSS+DIV佈局的各佈局DIV層能夠依次下載顯示，所以其訪問速度較表spa

[4]格佈局要快。htm

　　表格佈局網頁實例圖片

如下爲用表格佈局的一個網頁的代碼[5]。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />ci

<title>表格佈局</title> </head> <body>it

<tr>

<tr>

<tr>

</tr>

<tr>

　　CSS+DIV佈局網頁實例

<style type="text/css"> <!-- body{

text-align:center; } #container{

position:relative;

background-color:#00FF00;

margin-top:0px;

margin-right:auto;

margin-bottom:0px;

margin-left:auto;

height:765px;

width:900px;

text-align:left; } #header{

position:relative;

background-color:#FF0000;

height:82px;

width:900px;

text-align:left; } #links{

position:relative;

background-color:#FF9900;

height:32px;

width:900px;

text-align:left; } #left{

position:relative;

background-color:#FFFF66;

height:618px;

width:190px;

text-align:left;

float:right; } #main{

position:relative;

background-color:#00FFFF;

height:618px;

width:710px;

text-align:left;

float:left; } #footer{

position:relative;

background-color:#FF00FF;

height:64px;

width:900px;

text-align:left;

float:left; } --> </style> </head> <body> <div id="container">

代碼說明：

(1)代碼中共包含6個div標籤，分別表明6個層。其中最外層的id爲container的div

[7]起到一個容器的做用，用於容納其它5個層。

(2)選擇器body和#container的樣式用於將最外層id爲container的div（容器層）水平居中顯示。

(3)其它幾個選擇器樣式如#header，#links，#left，#main和#footer分別用來控制容器內5個層的顯示。

(4)選擇器#left和#main中有一個重要CSS屬性float。其中在選擇器#left中設置爲float:left；而選擇器#main中設置爲float:right。該屬性設定了id爲left的層居左顯示，id爲main的層則居右顯示。

(5)若是想將id爲left和main的層交換位置，只須要在選擇器#left中設置float:right；同時在選擇器#main中設置float:left便可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。