用css網站布局之十步實錄！(四)_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
第四步：網頁布局與div浮動等
1.浮動：首先讓邊框浮動到主要內容的右邊。用css控制浮動。
表現如下：
2.往主要內容的盒子中寫入一些文字。在html文件中寫入：
但是你可以看到主要內容的盒子占據了整個page-container的寬度，我們需要將#content的右邊界設為280px。以使其不和邊框發生沖突。
css代碼如下：
同時往邊框里寫入一些文字。在html文件中寫入：
表現如下：
這也不是我們想要的，網站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動，由于是浮動，所以可以理解為它位于整個盒子之上的另一層。因此，底框和內容盒子對齊了。
因此我們往css中寫入：
表現如下：
1.浮動：首先讓邊框浮動到主要內容的右邊。用css控制浮動。
示例代碼 [www.ghpqjb.com]
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
float: right;
width: 280px;
background: darkgreen;
}
表現如下：
2.往主要內容的盒子中寫入一些文字。在html文件中寫入：
示例代碼 [www.ghpqjb.com]
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
但是你可以看到主要內容的盒子占據了整個page-container的寬度，我們需要將#content的右邊界設為280px。以使其不和邊框發生沖突。
css代碼如下：
示例代碼 [www.ghpqjb.com]
#content {
margin-right: 280px;
background: green;
}
margin-right: 280px;
background: green;
}
同時往邊框里寫入一些文字。在html文件中寫入：
示例代碼 [www.ghpqjb.com]
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
表現如下：
這也不是我們想要的，網站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動，由于是浮動，所以可以理解為它位于整個盒子之上的另一層。因此，底框和內容盒子對齊了。
因此我們往css中寫入：
示例代碼 [www.ghpqjb.com]
#footer {
clear: both;
background: orange;
height: 66px;
}
clear: both;
background: orange;
height: 66px;
}
表現如下：
相關DIV+CSS實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-用css網站布局之十步實錄！(四)
。