网页布局心得

关于网页布局心得（ www.dayday28.com）

做的事情重复的次数多了，总会发现那么点乐趣和自己的一点心得和见解。

下面我就分享下我在网页布局中是如何避免一些不必要的麻烦。

1.除了父级元素定义宽度外，里面的子元素通常不给宽度。如果需要填充，统一用子元素填充，例如：

<div class="left"> 
    <ul> 
        <li>快乐永恒快乐永恒</li> 
        <li>快乐永快乐永恒恒</li> 
        <li>快乐永快乐永恒恒</li> 
        <li>快乐永快乐永恒恒</li> 
        <li>快乐永快乐永恒恒</li> 
        <li>快乐永快乐永恒恒</li> 
    </ul> 
</div>

<style type="text/css"> 
.left{width:200px;border:solid 1px #ccc;}/*父级元素*/
.left ul{margin:0;padding:10px;}/*子元素*/
.left ul li{list-style-type:none;height:30px;line-height:30px;} 
</style>

2.子元素一旦用了浮动，父元素一定要清除浮动 ，例如：

<div class="left"> 
    <ul> 
        <li>快乐永恒快乐永恒</li> 
        <li>快乐永快乐永恒恒</li> 
        <li>快乐永快乐永恒恒</li> 
        <li>快乐永快乐永恒恒</li> 
        <li>快乐永快乐永恒恒</li> 
        <li>快乐永快乐永恒恒</li> 
    </ul> 
</div>

<style type="text/css"> 
.left ul{margin:0;padding:10px;border:solid 1px #ccc;zoom:1;}/*子元素用了浮动所以需要清除浮动*/
.left ul:after{content:"";display:block;height:0;clear:both;visibility:hidden;} 
.left ul li{list-style-type:none;height:30px;line-height:30px;background:#ccc;float:left;width:200px;margin:1px;} 
</style>

待续……