css两栏式布局示例
生活随笔
收集整理的這篇文章主要介紹了
css两栏式布局示例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
請先看圖,這里主要用到了float屬性,該屬性的值指出了對象是否及如何浮動
語法：? float : none | left |right
?
參數：? none : 對象不浮動;left : 對象浮在左邊;right : 對象浮在右邊?
?請看代碼,請CSS高手指教,其他還可以用position來實現兩欄,只是用習慣了float.
Code<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>經典兩欄布局實例</title>
<style?type="text/css">
????/*?通用空白間距?*/
.blank9{?height:9px;width:100%;}
#wrap{width:960px;margin:?0?auto;}?
#header
{
????height:80px;
????margin:?0?auto;
????clear:?both;
????border:#CCCCCC?1px?solid;????
}
?/*?左邊?*/
#sideleft
{
????height:120px;
????float:?left;
????width:200px;
????overflow:?hidden;
????border:#CCCCCC?1px?solid;????
}
/*?右邊?*/
#sideright
{
????height:120px;
????float:?right;
????width:?750px;
????overflow:?hidden;
????background-color:?#fcf8f7;
????border:#CCCCCC?1px?solid;
}
/*?頁尾?*/
#footer{height:?50px;border:#CCCCCC?1px?solid;margin:?0?auto;}
</style>
</head>
<body>
<div?id="wrap">
??<div?id="header">
????
??<a?name="top"></a>
????<span>頁頭</span>
????</div>
????<div?class="blank9"></div>
??<div?id="sideleft">
??<span>左邊</span>
????</div>
??<div?id="sideright">
????
?<span>右邊</span>
????</div>????
????<div?class="blank9"></div>
??<div?id="footer">
????<div?id="foot">
<span>頁腳</span>
</div>
??</div>
</div>
</body>
</html>
轉載于:https://www.cnblogs.com/bluedy1229/archive/2008/12/23/1360733.html
總結
以上是生活随笔為你收集整理的css两栏式布局示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 吐泡泡
- 下一篇： 嵌入式linux字体库,嵌入式 初探fr