巧用CSS包含选择符定义文章标题 简介效果_动易Cms教程

　　想实现一个这样效果的文章标题＋文章简介效果（如下图所示）：
　　1.让标题独立显示一行，并可以链接，背景颜色可设置。
　　2.内容简介独立显示在另一行，背景颜色可设置。

　　这个效果可以直接利用系统的标签功能，并辅以CSS中的包含选择符来实现的，本文即为运用CSS包含选择符来实现所需效果的方法。

　　CSS中的包含选择符，可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：table a {font-size: 12px;}，在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。下面用具体实例来讲解如何实现上述图片中的效果。

　　先查阅一下动易起航：http://qihang.powereasy.net/Index.html这个页面中的效果。起航首页中相关的代码是：

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qh_title001">　<FONT color=#009900>◆</FONT> <A href="/Announce/Index.html" target="_blank"><STRONG>近期培训公告</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”这个定义成浅红背景，再定义“.qh_tdbg001 div”为浅蓝色背景。

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

　　而标题字有链接，且为暗棕色，只要再加上定义：

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

　　在按上面定义制作后，在所需效果的页面底部会出现一栏空行，显示了蓝色背景（见下图）：

查看更多 动易Cms教程  动易Cms模板