KesionCMS V8/圖片文章標(biāo)簽

首先，我們來看這個(gè)效果圖：

這也是在網(wǎng)站上非常見的一種效果。分析一下，主要是包括了文章的標(biāo)題，圖片及文章簡介內(nèi)容。那么我們看如果用html來實(shí)現(xiàn)是怎么個(gè)實(shí)現(xiàn)方式呢？就是說如果只把這種效果做成靜態(tài)模板是怎么實(shí)現(xiàn)的呢？

首先定義一個(gè)框架，然后先將標(biāo)題寫出來，再分下半部份左邊圖片和右邊的文章簡介寫出來。大致代碼如下：

<div class="tpw">

   <h2><a href="#">殲15已進(jìn)行地面滑躍起飛試驗(yàn)</a></h2>

    <div class="q_tpm">

         <a class="pic" href="#" target="_blank"><img alt="" src="images/59633460.jpg" name="page_cnt_1" /></a>

 

            <p class="intro">殲15已于去年完成了首次陸上模擬滑躍起飛…<a href="#" target="_blank">[詳細(xì)]</a></p>

 </div>

</div>

不加任何CSS樣式控制的情況，我們看到的效果,如下圖：

我們?yōu)榱四苁顾覀円男Ч麍D一樣，就要定義CSS來控制，樣式如下：

<style>

.tpw{width:300px; }

.tpw h2{ font-size:14px; font-weight:bold;}

.tpw h2 a{ color:#369;}

.tpw h2 :hover{ color:#CC0000;text-decoration:none;}

.tpw .q_tpm{ padding:5px;}

.tpw .q_tpm a.pic{width:100px; float:left;}

.tpw .q_tpm p.intro{width:180px; float:right;}

.tpw .q_tpm p a{ color:#ff3300;}

.tpw .q_tpm p a:hover{text-decoration:none;}

</style>

接下來就是如何將模板綁定到系統(tǒng)后臺后通過標(biāo)簽的形式來調(diào)用這種效果。

和文章列表標(biāo)簽一樣，主要多了調(diào)用一個(gè)文章圖片和簡介。

創(chuàng)建新標(biāo)簽，輸入標(biāo)簽名稱選擇該標(biāo)簽要調(diào)用的內(nèi)容歸屬的模型和欄目，標(biāo)簽循環(huán)體中我們將以上html代碼復(fù)制上去，如下圖：

接著我們將這些假鏈接和標(biāo)題，圖片，內(nèi)容簡介換為標(biāo)簽字段即可。設(shè)置后如下圖所示：

保存標(biāo)簽設(shè)置后回到模板里面將靜態(tài)部份替換為標(biāo)簽，如下圖：

刷新網(wǎng)頁，我們看到最終效果如下圖所示：

參考來源

• http://www.kesion.com/help/

KesionCMS V7使用手冊導(dǎo)航
KesionCMS V8安裝: KesionCMS V8安裝 KesionCMS V8使用: 基本信息設(shè)置|系統(tǒng)設(shè)置|系統(tǒng)相關(guān)使用方法設(shè)置|標(biāo)簽和模板制作方法|其它輔助系統(tǒng)設(shè)置 KesionCMS V8FAQ: FAQ