CSS網(wǎng)頁布局Page Layout
使用CSS布局非常簡單，如果你習(xí)慣使用tables布局，可能開始時有點(diǎn)困難，但其實(shí)很容易，事實(shí)上只是觀念的不同。
你需要把網(wǎng)頁的每個部分看成獨(dú)立的塊，你可以絕對或相對定位塊。
Positioning 定位
positon屬性可以指定元素為absolute,relative,static或是fixed。
static是元素默認(rèn)屬性，按HTML出現(xiàn)的先后順序。
relative比較像static，但元素可以使用top,right,bottom和left設(shè)定初始屬性。
absolute把元素從HTML里面拉出，一切由它自己決定，在這里，絕對定位元素可以使用top,right,bottom,left定位在任何地方。
fixed行為像absolute，但它絕對定位的元素參照瀏覽器窗口與網(wǎng)頁沒有關(guān)系。所以，理論上，fixed元素可以固定在屏幕上當(dāng)頁面滾動時。為什么說是理論上的？因為IE7以下的瀏覽器不支持。
使用絕對定位布局
可以使用絕對定位創(chuàng)建傳統(tǒng)的兩列布局，如下：
Example Source Code [www.52css.com]
上面加上CSS：
Example Source Code [www.52css.com]
上面導(dǎo)航條設(shè)定在左邊，寬度是10em。因為導(dǎo)航條是絕對定位，所以流動的頁面上什么也不動，需要設(shè)定內(nèi)容的左邊margin等于導(dǎo)航條的寬度。
真是簡單。你沒有限制這兩列的距離，使用聰明的布局，你可以隨心所欲安排許多塊。如果你想添加第三列，比如：
Example Source Code [www.52css.com]
最后階段去絕對定位元素，因為它們獨(dú)立存在，無法正確了解它們哪里結(jié)束。如果你使用上面的例子，所有的頁面有小的導(dǎo)航條和大的內(nèi)容區(qū)域到可以，但是，特別是寬度和大小使用相對值，你必須經(jīng)常放棄定位的希望，比如位于元素最下面的底部布局。如果你想定位底部，采用浮動模式比絕對定位好。
Floating 浮動
浮動元素可以在一條線上移動。
浮動一般使用在定位頁面里的小型元素，但也可使用在大塊里，比如導(dǎo)航。
上面的HTML例子使用下面CSS：
Example Source Code [www.52css.com]
如果你不希望接下來的元素包圍浮動對象，可以使用clear屬性。clear:left清除浮動在左邊的元素，clear:right清除浮動在右邊的元素，clear:both清除所有。如果你想添加底部footer，可以像下面：
Example Source Code [www.52css.com]
footer將在所有列下面，不管它們的長度如何。
這篇介紹了定位和浮動的基本情況，強(qiáng)調(diào)頁面的大塊，但記住，上面方法可以運(yùn)用到塊里面的任何元素。通過組合使用position,floating,margins,padding和border，你可以表現(xiàn)出任何網(wǎng)頁設(shè)計，table布局能做的CSS沒有什么不能做。
使用表格布局的理由就是考慮古老的瀏覽器。CSS的優(yōu)勢在于擁有很高的可用性，而且體積上只有使用table布局的部分大小。
TEST
你需要把網(wǎng)頁的每個部分看成獨(dú)立的塊，你可以絕對或相對定位塊。
Positioning 定位
positon屬性可以指定元素為absolute,relative,static或是fixed。
static是元素默認(rèn)屬性，按HTML出現(xiàn)的先后順序。
relative比較像static，但元素可以使用top,right,bottom和left設(shè)定初始屬性。
absolute把元素從HTML里面拉出，一切由它自己決定，在這里，絕對定位元素可以使用top,right,bottom,left定位在任何地方。
fixed行為像absolute，但它絕對定位的元素參照瀏覽器窗口與網(wǎng)頁沒有關(guān)系。所以，理論上，fixed元素可以固定在屏幕上當(dāng)頁面滾動時。為什么說是理論上的？因為IE7以下的瀏覽器不支持。
使用絕對定位布局
可以使用絕對定位創(chuàng)建傳統(tǒng)的兩列布局，如下：
Example Source Code [www.52css.com]<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
上面加上CSS：
Example Source Code [www.52css.com]#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
上面導(dǎo)航條設(shè)定在左邊，寬度是10em。因為導(dǎo)航條是絕對定位，所以流動的頁面上什么也不動，需要設(shè)定內(nèi)容的左邊margin等于導(dǎo)航條的寬度。
真是簡單。你沒有限制這兩列的距離，使用聰明的布局，你可以隨心所欲安排許多塊。如果你想添加第三列，比如：
Example Source Code [www.52css.com]#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
最后階段去絕對定位元素，因為它們獨(dú)立存在，無法正確了解它們哪里結(jié)束。如果你使用上面的例子，所有的頁面有小的導(dǎo)航條和大的內(nèi)容區(qū)域到可以，但是，特別是寬度和大小使用相對值，你必須經(jīng)常放棄定位的希望，比如位于元素最下面的底部布局。如果你想定位底部，采用浮動模式比絕對定位好。
Floating 浮動
浮動元素可以在一條線上移動。
浮動一般使用在定位頁面里的小型元素，但也可使用在大塊里，比如導(dǎo)航。
上面的HTML例子使用下面CSS：
Example Source Code [www.52css.com]#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
如果你不希望接下來的元素包圍浮動對象，可以使用clear屬性。clear:left清除浮動在左邊的元素，clear:right清除浮動在右邊的元素，clear:both清除所有。如果你想添加底部footer，可以像下面：
Example Source Code [www.52css.com]#footer {
clear: both;
}
clear: both;
}
footer將在所有列下面，不管它們的長度如何。
這篇介紹了定位和浮動的基本情況，強(qiáng)調(diào)頁面的大塊，但記住，上面方法可以運(yùn)用到塊里面的任何元素。通過組合使用position,floating,margins,padding和border，你可以表現(xiàn)出任何網(wǎng)頁設(shè)計，table布局能做的CSS沒有什么不能做。
使用表格布局的理由就是考慮古老的瀏覽器。CSS的優(yōu)勢在于擁有很高的可用性，而且體積上只有使用table布局的部分大小。
TEST
浙公網(wǎng)安備 33010602011771號