師阿捷2023年發布在《
網頁設計師
》上的，乙個非常經典的布局，在ie、mozilla和opera瀏覽器中均可以實現居中和高度自適應。完整**如下（在阿捷的**基礎上作了部分修改）：
＜title＞seo參考:xhtml之經典三行兩列布局＜/title＞
＜style type=」text/css」＞
body
#header
#contain
#mainbg
#right
#left
#footer
.text
＜/style＞
＜/head＞
＜body＞
＜div id=」header」＞header＜/div＞
＜div id=」contain」＞
＜div id=」mainbg」＞
＜div id=」right」＞
＜div class=」text」＞＜p＞核心內容＜/p＞＜/div＞
＜/div＞
＜div id=」left」＞
＜div class=」text」＞left＜/div＞
＜/div＞
＜/div＞
＜/div＞
＜div id=」footer」＞footer＜/div＞
＜/body＞
＜/html＞
效果演示圖：
下面從seo角度分析這個布局的優勢：
我們先按網頁設計慣例來看頁面中的內容分布，一般情況下，頭部（a區）為站點導航，底部（d區）為輔助導航及版權資訊等，左側（b區）會放搜尋、列表、排行等功能性內容，核心內容就集中在右側（c區）。
如上圖標識所示，按傳統的布局，**編寫順序是「a->b->c->d」，也可以理解為「功能->功能->核心內容->功能」。
都知道，搜尋引擎蜘蛛爬行時，是按著頁面**順序自上而下的，這種情況下蜘蛛很難最快的爬行到核心內容；而當頁面**過多的時候蜘蛛完全有可能沒有爬行到核心內容就折回，抓取到的是與其他頁面一樣的功能內容時，這個頁面就成為相似網頁。
再來看本布局方式，頁面**順序是「a->c->b->d」，按內容分布可以理解為「功能->核心內容->功能->功能」，在不改變頁面展示的情況下，將核心內容部分放到了前面。
這樣，蜘蛛爬行時就能在最短時間內索引到網頁的核心內容。
再加上xhtml標準設計**精簡的優勢，蜘蛛爬行的效率和質量都會很高，也會更受蜘蛛歡迎的。
聖杯布局（三行三列布局）
布局效果類似聖杯，所以叫聖杯布局。就是三行三列布局 核心 主要就是實現中間主體部分中的左右定寬 中間自適應的布局效果 左右定寬 left,right left center right class left div class right div class center div 改變順序，需要把c...
探索CSS實現三行三列等高布局
2006 02 13 07 47 07 author greengnn font size large medium all 第一步 建立乙個結構 xhtml開始於header,footer,and container css先定義container，給將要加入的sideleft，和siderigh...
完美的DIV三行三列自適應高度布局
我們一般拿出來討論的自適應高度的div布局，都是指有背景區分的，不用區分的三列布局很容易。不過在實際應用中很少有 這樣用，大多都是不用背景區分的。不過在這裡我們並不討論這種布局的實用性到底如何，而只是討論實現這種布局的一種較完美的解決方案而已。所謂自適應高度，也就是不管某一列撐長而其它列的高度也跟跟...