DIV+CSS三行兩列經典布局

DIV+CSS三行兩列經典布局

這個XHTML1標准的DIV+CSS布局是聞名網頁預設師阿捷2004年宣布在《網頁預設師 》上的,一個十分經典的布局,在IE、Mozilla和Opera瀏覽器中均可以成功實現當中和高度自適合。完整代碼如下所述(在原代碼的基礎上作了一決定范收拾):

html
head
metahttp-equiv=’Content-Type’ content=”text/html; charset=gb2312″
titleSEO參照:XHTML之經典三行兩列布局- seobbs.net/title
style type=”text/css”

body {
background: #999;
text-align: center;
color:#333;
font-family:Verdana,Arial, Helvetica, sans-serif;
}

a:link,visited {color:#004592;text-decoration:none;}
a:hover {color:#004592;text-decoration:underline;}
a:active {color:#004592;text-decoration:none;}

img {border:0px;}

#header {
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
text-align: left;
}

#contain {
margin-left: auto;
margin-right: auto;
width: 776px;
}

#mainbg {
float: left;
padding: 0px;
width: 776px;
background: #60A179;
}

#right {
float:right;
margin: 2px0px 2px0px;
padding: 0px;
width: 574px;
background: #ccd2de;
text-align:left;
}

#left {
float: left;
margin: 2px 2px0px0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}

#footer {
clear:both;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
}

.text {margin:0px;padding:20px;}

/style

/head

body

div id=”header”header/div

div id=”contain”
div id=”mainbg”
div id=”right”
div class=”text”textp段落/pp段落/pp段落/pp段落/pp段落/p/div
/div
div id=”left”
div class=”text”left/div
/div
/div
/div

div id=”footer”footer/div

/body

/html

頁面式樣圖見下頁圖示

 

頁面成功實現當中常XHTML技術剖析請到我編輯收拾的帖子 ,或《網頁預設師 》檢查,效果演習及
代碼:

下邊從SEO角度剖析這個布局的優勢:
我們先按網頁預設向例來看頁面中的內部實質意義散布,普通事情狀況下,頭部(A區)為站點導航,底部
(D區)為匡助導航及版權信息等,左側(B區)會放搜索、列表、長幼次序等功能性內部實質意義,中心內部實質意義
就集中在右側(C區)。
如上所述圖標識所示,按傳統的布局,代碼編著順著次序是『A-B-C-D』,也可以了解為『功能-功能
-中心內部實質意義-功能』。
都曉得,搜索引擎網站蛛蛛爬動時,是按著頁面代碼順著次序自上而下的,這種事情狀況下蛛蛛很難最快
的爬動到中心內部實質意義;而當頁面代碼過多的時刻蛛蛛絕對可能沒有爬動到中心內部實質意義就折回,抓取
到的是與其它頁面同樣的功能內部實質意義時,這個頁面就變成相仿網頁。
為了防止這麼的事情狀況,涵蓋新浪 、搜狐 、網易 在內的眾多網站(有可能也涵蓋你^_^),都
在預設時將頁面中B區和C區對換。
再來看本布局形式,頁面代碼順著次序是『A-C-B-D』,按內部實質意義散布可以了解為『功能-中心內部實質意義
-功能-功能』,在未變更頁面展覽的事情狀況下,將中心內部實質意義局部放到達面前。
這麼,蛛蛛爬動時就能在最瞬息間內引得到網頁的中心內部實質意義。
再加上XHTML標准預設代碼精簡的優勢,蛛蛛爬動的速率和品質都會頎長,也會更受蛛蛛熱烈歡迎
的。