用css網(wǎng)站布局之十步實(shí)錄！(四)_DIV+CSS實(shí)例

編輯Tag賺U幣

教程Tag：暫無Tag,歡迎添加,賺取U幣!

第四步：網(wǎng)頁布局與div浮動(dòng)等

1.浮動(dòng)：首先讓邊框浮動(dòng)到主要內(nèi)容的右邊。用css控制浮動(dòng)。

示例代碼 [www.hl5o.cn]

#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}

　　表現(xiàn)如下：

2.往主要內(nèi)容的盒子中寫入一些文字。在html文件中寫入：

示例代碼 [www.hl5o.cn]

<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>

　　但是你可以看到主要內(nèi)容的盒子占據(jù)了整個(gè)page-container的寬度，我們需要將#content的右邊界設(shè)為280px。以使其不和邊框發(fā)生沖突。
　　css代碼如下：

示例代碼 [www.hl5o.cn]

#content {
margin-right: 280px;
background: green;
}

　　同時(shí)往邊框里寫入一些文字。在html文件中寫入：

示例代碼 [www.hl5o.cn]

<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>

　　表現(xiàn)如下：