想實(shí)現(xiàn)一個(gè)這樣效果的文章標(biāo)題＋文章簡(jiǎn)介效果（如下圖所示）：
　　1.讓標(biāo)題獨(dú)立顯示一行，并可以鏈接，背景顏色可設(shè)置。
　　2.內(nèi)容簡(jiǎn)介獨(dú)立顯示在另一行，背景顏色可設(shè)置。

　　這個(gè)效果可以直接利用系統(tǒng)的標(biāo)簽功能，并輔以CSS中的包含選擇符來(lái)實(shí)現(xiàn)的，本文即為運(yùn)用CSS包含選擇符來(lái)實(shí)現(xiàn)所需效果的方法。

　　CSS中的包含選擇符，可以單獨(dú)對(duì)某種元素包含關(guān)系定義的樣式表，元素1里包含元素2，這種方式只對(duì)在元素1里的元素2定義，對(duì)單獨(dú)的元素1或元素2無(wú)定義，例如：table a {font-size: 12px;}，在表格內(nèi)的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認(rèn)大小。下面用具體實(shí)例來(lái)講解如何實(shí)現(xiàn)上述圖片中的效果。

　　先查閱一下動(dòng)易起航：http://qihang.powereasy.net/Index.html這個(gè)頁(yè)面中的效果。起航首頁(yè)中相關(guān)的代碼是：

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qh_title001">　<FONT color=#009900>◆</FONT> <A href="/Announce/Index.html" target="_blank"><STRONG>近期培訓(xùn)公告</STRONG></A></td>
<td rowspan="3">&nbsp;</td>
<td class="qh_title001">　<FONT color=#FF0099>◆</FONT> <A href="/Lectures/Index.html" target="_blank"><STRONG>最新錄像教程</STRONG></A></td>
</tr>
<tr>
<td valign="top" class="qh_tdbg001"><!--{$GetArticleList(1003,0,True,0,True,6,False,False,"",0,3,1,50,200,False,2,False,False,0,False,False,False,False,False,False,1,1,ClassBlue14,,)}--> </td>
<td valign="top" class="qh_tdbg001"><!--{$GetArticleList(1011,0,True,0,True,6,False,False,"",0,3,1,50,200,False,2,False,False,0,False,False,False,False,False,False,1,1,ClassBlue14,,)}--></td>
</tr>
<tr>
<td class="qh_tdbg002">&nbsp;</td>
<td class="qh_tdbg002">&nbsp;</td>
</tr>
</table>

　　這里，假如您要顯示成在圖片上所示的效果，只要在CSS樣式中，將“.qh_tdbg001”這個(gè)定義成淺紅背景，再定義“.qh_tdbg001 div”為淺藍(lán)色背景。

.qh_tdbg001 {background:#FFF8F0;}
.qh_tdbg001 div {background:#F0F7FF;}

　　而標(biāo)題字有鏈接，且為暗棕色，只要再加上定義：

.qh_tdbg001 a, .qh_tdbg001 a:link, .qh_tdbg001 a:visited, .qh_tdbg001 a:active, .qh_tdbg001 a:hover
{color:#874604;}

　　在按上面定義制作后，在所需效果的頁(yè)面底部會(huì)出現(xiàn)一欄空行，顯示了藍(lán)色背景（見(jiàn)下圖）：

查看更多 動(dòng)易Cms教程  動(dòng)易Cms模板