欢迎你来到站长之家！
很多大型网站上都有一些经典的网站模块，这些网站模块可以改善网页布局的美观效果，而且模块实现起来也很简单。本文就来介绍一种比较实用的网站模块“左图片右标题简介”，见下图所示，下图为站长之家从大型网站搜狐网站上截图下来的。
其实，这些网站模块都是通过DIV+CSS技术来实现的，适合于很多大中小型网站，于是很多的企业网站和个人网站也都开始效仿实现这些网站模块。在此利用DIV+CSS技术制作和测试了这种“上标题下图片简介”的网站模块，也就是左边显示图片，右边显示标题和内容简介的模块。各位站长们也可以在自己的网站上实现这样的布局，实现起来也很简单。下面是“上标题下图片简介”的网站模块实现的实例代码，该代码在多个浏览器如IE、Chrome、360浏览器上都能正常测试通过，各位站长们可以直接参考使用，甚至将代码直接运用到自己的网站上：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>推出“左图片右标题简介”网站模块的实现</title>
<style type="text/css">
.zzdj_div{ margin:0 auto; width:330px; overflow:hidden}
.zzdj_div img{ float:left; width:110px; height:75px}
.zzdj_div .right_div{ float:right; width:210px; text-align:left}
.zzdj_div .right_div .top_title{ height:30px; line-height:25px; font-size:14px; font-weight:bold; display:block; overflow:hidden;}
.zzdj_div .right_div .top_title a{color:#000;}
.zzdj_div .right_div .bottom_intro{ height:60px; font-size:12px; margin-top:8px; overflow:hidden;}
</style>
</head>
<body>
<div class="zzdj_div">
<a href="http://www.zzdj.net"><img src="exam.jpg" border="0" /></a>
<div class="right_div">
<span class="top_title"><a href="http://www.zzdj.net">站长网-站长交流学习的平台</a></span>
<span class="bottom_intro">各位站长们，站长网这一全新交流和学习的平台随时欢迎您来此一起来交流合作，相互学习，共同进步...[<a href="#">详情</a>]</span>
</div>
</div>
</body>
</html>
本实例代码显示的结果示意图如下：
（本页地址为：http://www.zzdj.net/tech/tech-11.html，请尊重别人的劳动，不要复制和采集。转载请注明本文出处）
