div+css布局 我是菜鸟 请教高手

html-css06

div+css布局 我是菜鸟 请教高手,第1张

跟你讲下思路，每一行里面的三个高度都一样的话，你应该分出三层来做，然后在每个行里面分左中右三个用float来排布，

<style>

body{font-size:20pxcolor:#ffffont-weight:bold}

.Head,.Main,.Bottom{width:1004pxmargin:0px autooverflow:hiddenbackground:#000margin-top:10px}

.Head{height:50px}

.Top_Left,.Top_Center,.Top_Right{background:#fffheight:200pxoverflow:hiddencolor:#000display:inlineline-height:200pxtext-align:center}

.Top_Left{width:200pxfloat:left}

.Top_Center{width:390pxmargin-left:10pxfloat:left}

.Top_Right{widtH:390pxfloat:right}

.Bottom{height:100px}

</style>

<div class="Head">这个是头部</div>

<div class="Main">

<div class="Top_Left">上左</div>

<div class="Top_Center">上中</div>

<div class="Top_Right">上右</div>

</div>

<div class="Main">

<div class="Top_Left">中左</div>

<div class="Top_Center">中中</div>

<div class="Top_Right">中右</div>

</div>

<div class="Main">

<div class="Top_Left">下左</div>

<div class="Top_Center">下中</div>

<div class="Top_Right">下右</div>

</div>

<div class="Bottom">底部</div>

这是初步的排布，具体的还是得你自己去熟悉下

因为你的ul里的li已经左浮动脱离了文档流，如果你的a标签也绝对定位脱离文档流，那么#a1的父标签里就等于什么也没有了，在火狐里父标签没有东西包含就会没有高度，所以看上去就没有背景颜色了。

你可以用firebug看看#nav的“布局”，宽高是500 x 0

你可以在#nav里加一句 overflow:hidden就可以了

<div></div>是网页html的一种标签，这两个标签放在<body></body>里一起用，会产生一种类似表格效果的东西，但是这个<div></div>表格可以特别灵活的通过css这种方法来改动大小，颜色，格式，位置。

改动完毕，你就往你的网页这个<div></div>表格里放各种你需要上网的东西，当然还可以放一个多个<div></div>表格,还可以用css方式改

最后就有了你自己的css+div

也就是你的灵活的网页