本文提供了一个使用HTML和CSS进行网页布局的基本示例，展示了如何通过简单的样式设置实现图片并排显示的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>无标题文档</title>
<style type="text/css">
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
.psdthumb li {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; }
.psdthumb .qq { *position:absolute; top:50%; }
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; }
</style>
</head>
<body>
<div class="psdthumb">
<li><div class="qq"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>
<li><div class="qq"><img src="http://img1.cache.netease.com/cnews/netease/logo_w.gif" ></div></li>
</div>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">XXX</a></p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>无标题文档</title>
<style type="text/css">
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
.psdthumb li {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; }
.psdthumb .qq { *position:absolute; top:50%; }
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; }
</style>
</head>
<body>
<div class="psdthumb">
<li><div class="qq"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>
<li><div class="qq"><img src="http://img1.cache.netease.com/cnews/netease/logo_w.gif" ></div></li>
</div>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">XXX</a></p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
