網(wǎng)站制作9個(gè)永恒的3列布局技術(shù)
深圳網(wǎng)站建設(shè)的目標(biāo)是找到一個(gè)布局，具有總的布局靈活性，相等的高度柱，只是做工精細(xì)。讓Digg深，見下面的資源列表提供華麗而有效的3柱基于CSS的布局通常有充分的布局結(jié)構(gòu)，如標(biāo)題、導(dǎo)航欄、內(nèi)容的容器，側(cè)邊欄和頁(yè)腳。

1.#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
}
2.#centercontent {
margin-left: 199px;
margin-right:199px;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
3.#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
}

2）3列流體CSS布局-與人造列和100%高度
1.#left { float: left; width: 155px; padding: 5px; position: relative;/*** IE needs this ***/ }
2.#right { float: right; width: 110px; padding: 5px; position: relative;
/*** IE needs this ***/ margin-right: -120px; /** This negative margin-right value is the same as the right column width (width + padding). ***/ position: relative; /*** IE needs this ***/ }
3.#content { float: right; margin-right: -165px;/*** Same length as .outer padding-left but with negative value ***/ width: 100%; position: relative;/*** IE needs this ***/ }

3）3-col通過CSS布局
沒有表，沒有絕對(duì)定位（根本沒有定位），沒有黑客（！）所有列的高度相同。
1.#left { float:left; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
2.#right { float:right; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
3.#middle { margin:0 150px; background:yellow; font-size:80%; }

4）3列-側(cè)翼菜單
三列，元素的智能順序。

5）多列布局爬出盒子
這是列表之外的文章的一部分，這三列的布局以一種稍微不同的方法：邊界是直接應(yīng)用于集裝箱部

1.#container{ background-color:#0ff; float:left; width:500px; border-left:150px solid #0f0; » /* The width and color of the left rail */ border-right:200px solid #f00; » /* The width and color of the right rail */ }
2.#leftRail{ float:left; width:150px; margin-left:-150px; position:relative; }
3.#center{ float:left; width:500px; margin-right:-500px; }
4.#rightRail{ float:right; width:200px; margin-right:-200px; position:relative; }

6）LayoutGala的3個(gè)固定柱
1.div#container {width:700px;margin:0 auto}
2.div#wrapper {float:left;width:100%}
3.div#content {margin-right: 300px}
4.div#navigation {float:left;width:150px;margin-left:-150px}
5.div#extra {float:left;width:150px;margin-left:-300px}
6.    

7）3固定搜索引擎優(yōu)化
1.#page_margins {width: 980px; min-width: 980px; max-width:none }
2.#main { float:left; width: 100%; background-color: transparent; background-image: url(../../images/bg_pattern.png); background-repeat:repeat-y; background-position:left; }
3.#col1 { width: 480px; float:left; margin-left: 240px; }
4.#col2 { width: 240px; float:left; margin-left: -720px; }
5.#col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right;}

（8）一個(gè)真正的布局
1.#block_1 { float: left; width: 34%; margin-left: 33%; }
2.#block_2 { float: left; width: 33%; margin-left: -67%; }
3.#block_3 { float: left; width: 33%; }

9）馬克斯設(shè)計(jì)-液體瘋狂
一個(gè)很好的液體例子，可以用來(lái)做報(bào)紙一樣的布局。
必須檢查布局銀行

CSS布局- 950像素-簡(jiǎn)化您的CSS設(shè)計(jì)與這些簡(jiǎn)單的純CSS布局
threecolumnlayouts–CSS討論收集了一噸的3欄布局和各迅速總結(jié)，即流體/固定，頁(yè)眉/頁(yè)腳！