您當前位置：首頁 > web前端 > htmlcss > CSS基礎教程：兩列布局的實例代碼

CSS基礎教程：兩列布局的實例代碼

來源：程序員人生發布時間：2014-02-18 20:42:58 閱讀次數：3516次

　　網(LieHuo.Net)教程 css作為今天網頁制作的主要語言，已經成為每個站長必學的東西，如果您還不會css，還在用dw制作table的網頁，那么您的網站就可能無法得到有效的seo和其它性能優化，從而丟掉市場。今天網小編給大家推薦一篇基礎教程，每位站長都可以看的懂，高手請飄過。

　　先看css部分：

以下為引用的內容：
#wrap {
border:1px solid blue;
margin:0 auto;
overflow:hidden; /* 這里加上 overflow 屬性，就可以不用添加清除浮動的代碼了,使父容器能夠包含住子層。 */
width:950px; /* 這里的寬度也要設置，而不要使用瀏覽器默認的自適應寬度100% */
}
#content {
border:1px solid #C3CFEA;
float:left;
margin:10px 0;
overflow:hidden;
padding:10px 10px 15px; /* 注意這里的padding 設置 */
width:680px; /* 注意這兒的寬度，只是指層的內容區(content)的寬度。實際寬度為 680px + 10px(右補白) + 10px (左補白) + 1px (右邊框) + 1px(左邊框) = 702 px; */
}
#sidebar {
border:1px solid #FF0000;
color:#FF0000;
float:right;
margin:10px 0;
overflow:hidden;
padding:0 10px 20px;
width:220px; /*實際寬度為 220px + 10px + 10px + 1 + 1 = 242px */
}

　　上述css在HTML中的使用：

以下為引用的內容：
<div id="wrap">
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
</div>

　　注意上面各層的寬度設置：242px + 702px = 944px < 950px 這個條件一定要滿足。

　　再看演示：

<html><head><title>網LIEHUO.NET,關注站長,建設互聯網！</title></head><style>#wrap {border:1px solid blue;margin:0 auto;overflow:hidden; /* 這里加上 overflow 屬性，就可以不用添加清除浮動的代碼了,使父容器能夠包含住子層。 */width:950px; /* 這里的寬度也要設置，而不要使用瀏覽器默認的自適應寬度100% */}#content {border:1px solid #C3CFEA;float:left;margin:10px 0;overflow:hidden;padding:10px 10px 15px; /* 注意這里的padding 設置 */width:680px; /* 注意這兒的寬度，只是指層的內容區(content)的寬度。實際寬度為 680px + 10px(右補白) + 10px (左補白) + 1px (右邊框) + 1px(左邊框) = 702 px; */}#sidebar {border:1px solid #FF0000;color:#FF0000;float:right;margin:10px 0;overflow:hidden;padding:0 10px 20px;width:220px; /*實際寬度為 220px + 10px + 10px + 1 + 1 = 242px */}</style><div id="wrap"><div id="content">content</div><div id="sidebar">sidebar</div></div></body></html>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 sybase常用指令

下一篇 跨域資源共享的10種方式

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS基礎教程：兩列布局的實例代碼