站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:網站首頁 >> 網站技術 >>



站長之家推出“左圖片右標題簡介”網站模塊的實現


【發布人:站長之家    發布日期:2015-04-05】

很多大型網站上都有一些經典的網站模塊,這些網站模塊可以改善網頁布局的美觀效果,而且模塊實現起來也很簡單。本文就來介紹一種比較實用的網站模塊“左圖片右標題簡介”,見下圖所示,下圖為站長之家從大型網站搜狐網站上截圖下來的。

左圖片右標題簡介網站模塊實例圖片一

其實,這些網站模塊都是通過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.hdfwko.tw"><img src="exam.jpg" border="0" /></a>
<div class="right_div">
<span class="top_title"><a href="http://www.hdfwko.tw">站長網-站長交流學習的平臺</a></span>
<span class="bottom_intro">各位站長們,站長網這一全新交流和學習的平臺隨時歡迎您來此一起來交流合作,相互學習,共同進步...[<a href="#">詳情</a>]</span>
</div>
</div>

</body>
</html>

本實例代碼顯示的結果示意圖如下:

左圖片右標題簡介網站模塊實例圖片二


(本頁地址為:http://www.hdfwko.tw/tech/tech-11.html,請尊重別人的勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家【www.hdfwko.tw】

四川快乐12开奖号