address:http://weibo.com/jx/pic.php?topnav=1
我承认我来看看美女的
为什么这些div的宽度和高度要用js来动态生成啊?
下面是我用css写的:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0}
body{background:#333}
ul{list-style:none;float:left}
ul li{background:#fff;padding:5px;margin:0 5px 5px 0px}
ul li p{text-align:right}
#move{position:absolute;top:50px;width:100px;height:25px;background:orange}
</style>
<script type="text/javascript" src="script/jQuery1.6.js"></script>
</head>
<body>
<ul>
<li>
<div class="td">
<a href=""><img src="http://ww2.sinaimg.cn/mw205/6d52047ajw1dm6azfwh5gj.jpg"/></a>
</div>
<p><a href="">评论</a></p>
</li>
<li>
<div class="td">
<a href=""><img src="http://ww3.sinaimg.cn/mw205/66f5f5dcgw1dm6ttvy015j.jpg"/></a>
</div>
<p><a href="">评论</a></p>
</li>
</ul>
<ul>
<li>
<div class="td">
<a href=""><img src="http://ww2.sinaimg.cn/mw205/6d52047ajw1dm6azfwh5gj.jpg"/></a>
</div>
<p><a href="">评论</a></p>
</li>
<li>
<div class="td">
<a href=""><img src="http://ww1.sinaimg.cn/mw205/690aa27agw1dm6e9upsevj.jpg"/></a>
</div>
<p><a href="">评论</a></p>
</li>
</ul>
<ul>
<li>
<div class="td">
<a href=""><img src="http://ww2.sinaimg.cn/mw205/6d52047ajw1dm6azfwh5gj.jpg"/></a>
</div>
<p><a href="">评论</a></p>
</li>
<li>
<div class="td">
<a href=""><img src="http://ww1.sinaimg.cn/mw205/667f9220gw1dm6k553hg6j.jpg"/></a>
</div>
<p><a href="">评论</a></p>
</li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>
因为是流式布局,每个div高度不一样,根据图片高度来改变
用JS动态生成会更灵活
JS生成容易控制吖