RIP的防环机制
2007-04-26 23:23
316 查看
第二种布局效果图如下:(总的来说这个比前一个要来的简单)
要求:每个li上下左右都是相同的10px
查看demo
html代码如下:
Css代码如下:
与上一个实例不同的地方关键就是ul和li的css,而最最主要的就是这两段代码
ul的padding:0 10px 10px 0;和li的margin:10px 0 0 10px;你也可以考虑下其他组合方式,
但是一定要注意设置ul的padding-bottom为10px,不然在ie6 7下最下面是没有10px距离的,这个前面已经讨论了。如不明白请看上一篇
查看demo
要求:每个li上下左右都是相同的10px
查看demo
html代码如下:
<div> <ul> <li><a href="#"><img src=\'#\'" /1.jpg" /><b>你好</b></a></li> <li><a href="#"><img src=\'#\'" /2.jpg" /><b>你好</b></a></li> <li><a href="#"><img src=\'#\'" /3.jpg" /><b>你好</b></a></li> <li><a href="#"><img src=\'#\'" /4.jpg" /><b>你好</b></a></li> <li><a href="#"><img src=\'#\'" /5.jpg" /><b>你好</b></a></li> <li><a href="#"><img src=\'#\'" /6.jpg" /><b>你好</b></a></li> </ul> </div>
Css代码如下:
*{ margin:0; padding:0; } body{ text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; } a{ text-decoration:none; color:#666; } a img{ border:none; } div{ margin:0 auto; width:520px; text-align:left; background:#CCC; } ul{ overflow:hidden; _height:1%; padding:0 10px 10px 0; } li{ float:left; display:inline; margin:10px 0 0 10px; width:160px; } b{ width:160px; display:block; text-align:center; }
与上一个实例不同的地方关键就是ul和li的css,而最最主要的就是这两段代码
ul的padding:0 10px 10px 0;和li的margin:10px 0 0 10px;你也可以考虑下其他组合方式,
但是一定要注意设置ul的padding-bottom为10px,不然在ie6 7下最下面是没有10px距离的,这个前面已经讨论了。如不明白请看上一篇
查看demo