中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

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

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

表現(xiàn)如下：

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

<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ù)了整個page-container的寬度，我們需要將#content的右邊界設(shè)為280px。以使其不和邊框發(fā)生沖突。

css代碼如下：

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

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

<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)如下：

這也不是我們想要的，網(wǎng)站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動，由于是浮動，所以可以理解為它位于整個盒子之上的另一層。因此，底框和內(nèi)容盒子對齊了。

因此我們往css中寫入：

#footer {
clear: both;
background: orange;
height: 66px;
}

表現(xiàn)如下：

出處：Jorux Notebook
責(zé)任編輯：moby

上一頁 將網(wǎng)站分為五個div 下一頁 網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。