很多大型网站上都有一些经典的网站模块,这些网站模块可以改善网页布局的美观效果,而且模块实现起来也很简单。本文就来介绍一种比较实用的网站模块“左图片右标题简介”,见下图所示,下图为站长之家从大型网站搜狐网站上截图下来的。
其实,这些网站模块都是通过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,请尊重别人的劳动,不要复制和采集。转载请注明本文出处)