用css網站布局之十步實錄！（四）

2020-03-24 17:58:51

字體：大中小

來源：轉載

供稿：網友

第四步：網頁布局與div浮動等1.浮動：首先讓邊框浮動到主要內容的右邊。用css控制浮動。
Example Source Code [#sidebar-a{
float:right;
width:280px;
background:darkgreen;

表現如下：
2.往主要內容的盒子中寫入一些文字。在html文件中寫入： Example Source Code [ divid= content
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
/div
但是你可以看到主要內容的盒子占據了整個page-container的寬度，我們需要將#content的右邊界設為280px。以使其不和邊框發生沖突。
css代碼如下： Example Source Code [#content{
margin-right:280px;
background:green;

同時往邊框里寫入一些文字。在html文件中寫入： Example Source Code divid= sidebar-a
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
/div
表現如下：
這也不是我們想要的，網站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動，由于是浮動，所以可以理解為它位于整個盒子之上的另一層。因此，底框和內容盒子對齊了。
因此我們往css中寫入： Example Source Code [#footer{
clear:both;
background:orange;
height:66px;

表現如下：
本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：瀏覽器兼容HTML5和CSS3的問題

下一篇：CSS入門基礎教程：CSS邊距屬性