专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » css网站布局实录:用css网站布局之十步实录！（四） »正文

css网站布局实录:用css网站布局之十步实录！（四）

来源: 发布时间:星期五, 2008年9月26日 浏览:40次 评论:0
第四步：网页布局与div浮动等

1.浮动：首先让边框浮动到主要内容的右边。用css控制浮动。

\"div Example Source Code [www.52css.com]
#sidebar-a{
float:right;
width:280px;
background:darkgreen;
}

　　表现如下：

\"\"/

2.往主要内容的盒子中写入一些文字。在html文件中写入：

\"div Example Source Code [www.52css.com]
<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代码如下：

\"div Example Source Code [www.52css.com]
#content{
margin-right:280px;
background:green;
}

　　同时往边框里写入一些文字。在html文件中写入：

\"div Example Source Code [www.52css.com]
<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中写入：

\"div Example Source Code [www.52css.com]
#footer{
clear:both;
background:orange;
height:66px;
}

　　表现如下：

\"\"/

返回：
标签：cssdiv网站布局 css网站布局 网站布局实录 css网站布局实录

相关文章

读者评论

  • 共0条 分0页

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

Dig排行

阅读排行

评论排行