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



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


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

很多網站上都有一些典型的網站模塊,這些經典的模塊可以明顯改善用戶體驗,這種布局非常美觀,一般都是通過DIV+CSS技術實現的,適合于很多大中小型網站,也往往是眾多網站效仿的對象。在這里,站長之家也利用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:280px}
.zzdj_div .top_title{height:40px; line-height:40px; font-weight:bold; font-size:16px;}
.zzdj_div .top_title a{color:#000;}
.zzdj_div .bottom_div{ overflow:hidden}
.zzdj_div .bottom_div img{ float:left; width:90px; height:60px;}
.zzdj_div .bottom_div span{ float:right; width:180px; height:60px; line-height:20px; text-align:left; font-size:12px; white-space:normal;}
</style>
</head>
<body>

<div class="zzdj_div">
<span class="top_title"><a href="http://www.hdfwko.tw">站長網--站長們交流和學習的平臺</a></span>
<div class="bottom_div">
<a href="http://www.hdfwko.tw"><img src="exam.jpg" border="0" /></a>
<span>各位站長們,新的交流和學習的平臺歡迎您來此交流合作,相互學習共同進步...[<a href="#">詳情</a>]</span>
</div>
</div>

</body>
</html>

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

上標題下圖片簡介網站模塊實例圖片二


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

信息顯示圖片
頁腳blank圖片

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

四川快乐12开奖号