css网站布局实录:用css网站布局之十步实录!(四)来源: 发布时间:星期五, 2008年9月26日 浏览:40次 评论:0
第四步:网页布局与div浮动等
1.浮动:首先让边框浮动到主要内容的右边。用css控制浮动。 Example Source Code [www.52css.com] #sidebar-a{ float:right; width:280px; background:darkgreen; } 表现如下: 2.往主要内容的盒子中写入一些文字。在html文件中写入: 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代码如下: Example Source Code [www.52css.com] #content{ margin-right:280px; background:green; } 同时往边框里写入一些文字。在html文件中写入: 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中写入: Example Source Code [www.52css.com] #footer{ clear:both; background:orange; height:66px; } 表现如下: 返回: 0
相关文章
读者评论
发表评论 |