标准组合-左图右文
css代码:
<style type="text/css">
<!--
*{margin:0px;padding:0px;border:0px;list-style-type:none;font-size:12px;text-decoration: none;}
.list{height: 303px;width: 248px;border: 1px solid #B0C5E4;overflow: hidden;}
.list .title {height: 32px;line-height: 32px;background-image: url(images/bg_repeatx.png);background-repeat: repeat-x;background-position: 0px -164px;padding-right: 10px;padding-left: 5px;margin-bottom: 2px;}
.list .title h4 {font-size: 14px;font-weight: bold;float: left;background-image: url(images/icon.gif);background-repeat: no-repeat;background-position: 0px 10px;padding-left: 12px;}
.list .title a {float: right;color: #316AC5;}
.list .title a:hover {float: right;color: #FF0000;text-decoration: underline;}
.list .tw {height: 55px;display: block;border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #E1E1E1;width: 95%;margin-right: auto;margin-left: auto;padding-top: 5px;padding-bottom: 5px;}
.list .tw .pic{float: left;margin-right: 5px;}
.list .tw .pic img {display: block;}
.list .tw .pic a {border: 1px solid #CCC;padding: 1px;height: 50px;width: 50px;display: block;}
.list .tw .pic a:hover {border: 1px solid #F00;}
.list .tw .wd {overflow:hidden;}
.list .tw .wd b{display:block;height: 20px;padding-top: 2px;}
.list .tw .wd em{font-style: normal;line-height: 16px;color: #666;}
.list .tw .wd b a{color:#06c;}
.list .tw .wd b a:hover{color:#F00;}
-->
</style>
html代码:
<div class="list">
<div class="title"><h4>网站制作</h4><a href="" target="_blank" title="">查阅更多</a></div>
<dl class="tw">
<dt class="pic"><a href="#"><img src="images/demo_pic.jpg" alt="代码复用测试页面列" /></a></dt>
<dd class="wd"><b><a title="网站制作学习网制作" href="#" target="_blank">网站制作学习网制作</a><a href="http://www.xipingbar.com" title="网站制作学习网" target="_blank"></a></b><em>站制作学习网网站制作学习网网站制作学习网网 ..</em></dd>
</dl>
<dl class="tw">
<dt class="pic"><a href="#"><img src="images/demo_pic.jpg" alt="代码复用测试页面列" /></a></dt>
<dd class="wd"><b><a title="网站制作学习网制作" href="#" target="_blank">网站制作学习网制作</a><a href="http://www.xipingbar.com" title="网站制作学习网" target="_blank"></a></b><em>站制作学习网网站制作学习网网站制作学习网网 ..</em></dd></dl>
<dl class="tw">
<dt class="pic"><a href="#"><img src="images/demo_pic.jpg" alt="代码复用测试页面列" /></a></dt>
<dd class="wd"><b><a title="网站制作学习网制作" href="#" target="_blank">网站制作学习网制作</a><a href="http://www.xipingbar.com" title="网站制作学习网" target="_blank"></a></b><em>站制作学习网网站制作学习网网站制作学习网网 ..</em></dd>
</dl>
<dl class="tw">
<dt class="pic"><a href="#"><img src="images/demo_pic.jpg" alt="代码复用测试页面列" /></a></dt>
<dd class="wd"><b><a title="牛虻和他的父亲、情人和她的情人" href="#" target="_blank">牛虻和他的父亲、情人和她</a><a href="http://www.xipingbar.com" title="网站制作学习网" target="_blank"></a></b><em>站制作学习网网站制作学习网网站制作学习网网 ..</em></dd>
</dl>
</div>
</body>
图片就自己选择吧,路径改好了就ok了
原文章%77w%77%2Ef%6F%72%61%73%70%2E%63n
转www.载for网站制作学习asp必.cn究