动易技术中心 /建站知识/动易相关

[组图]CssNameA、CssName1和CssName2自定义CSS参数使用实例

作者：雅虎 来源：本站原创 点击数： 次 发布时间：2006年07月28日

　　在动易系统文章频道的标签中，有个{$GetArticleList(参数列表)}（GetArticleList标签详细说明请参阅：动易2006版文章频道标签和文章列表标签GetArticleList自定义CSS控制参数说明）。有许多初次接触的朋友对CssNameA、 CssName1和 CssName2这三个自定义CSS控制参数的使用还不是很了解，现从使用的角度说明如下：

一、CssNameA、 CssName1和 CssName2这三个自定义CSS控制参数说明：

以下是引用片段：
27 CssNameA ----可选参数，调用自定义有链接的文字CSS风格样式名。本参数兼容4.03版，可缺省
28 CssName1 ----可选参数，调用自定义无链接的文字CSS样式名，可显示奇数表格行背景与日期等无链接的文字样式。本参数兼容4.03版，可缺省
29 CssName2 ----可选参数，调用自定义无链接的文字CSS样式名，可显示偶数表格行背景与日期等无链接的文字样式。本参数兼容4.03版，可缺省
详细使用说明请参阅《文章列表标签GetArticleList自定义CSS控制参数说明》一文。

二、实例操作过程说明：

1.在模板中添加以下代码：

后台模板代码：
     
       









                                                                                                       
本站最新文章

           

       

前台效果：

 

前台网页代码：
     
       




                                                     
本站最新文章

            ……
class="">固顶文章 class="" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利 (3月27日)
 推荐文章 Web2.0－－新一波互联网大 (4月12日)

　　从前台网页代码中可以看出，在首页模板中文章列表并没有受任何CSS样式控制。

2.添加风格样式定义

　　依次点击“系统设置”->“网站风格管理”，修改后台网站风格，添加以下自己定义的CSS样式定义代码：

CSS定义：
/* ******LinkA表示首页最新文章中带有链接的文字的风格样式，带下划线****** */
a.LinkA:link {color: #0000ff;text-decoration: underline;}
a.LinkA:visited {color: blue;text-decoration: underline;}
a.LinkA:hover{color: #ff0000;text-decoration: underline;}
a.LinkA:active {color: blue;text-decoration: underline;}

/* ******首页最新文章中间隔各行的风格样式，分奇数行与偶数行****** */
.LinkAbg01 /* --奇数行文章列表内容间隔颜色的定义1-- */
{
background:#E3F0FB;color:#F500D0;
}
.LinkAbg02 /* --偶数行栏目文章列表内容间隔颜色的定义2-- */
{
background:#F6FAFE;color:#ff0000;
}

　　请注意：在模板中调用参数时要注意设置ShowType参数 -----显示方式（1为普通样式，2为表格式，3为各项独立式，4为智能多列式，5为输出DIV，6为输出RSS ）。在网页代码中添加的CssNameA、 CssName1和 CssName2这三个自定义CSS控制参数时，设置不同的显示方式（ShowType）参数其效果不同，这三个自定义CSS在表格式的显示方式下效果最好。

3.添加CssNameA、 CssName1和 CssName2这三个自定义CSS控制参数

　　在风格中添加好a.LinkA.LinkAbg01和.LinkAbg02这三个自定义CSS风格后，可以修改模板中的文章列表标签（{$GetArticleList(参数列表)}），在标签中添加上这三个自定义CSS风格的控制参数。

修改一：显示方式为2（表格式）

　　显示方式（ShowType）为2（表格式）。将以上代码改成：

后台模板代码：
     
       









                                                                                                       
本站最新文章

           

       

前台效果：

 

前台网页代码：
     
       




                                                     
本站最新文章

           
固顶文章 class="LinkAbg01">class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利 class="LinkAbg01">3月27日 推荐文章 Web2.0－－新一波互联网大 4月12日
class="LinkAbg02">推荐文章 class="LinkAbg02">class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3269" title="智能多线核心技术" target="_blank">智能多线核心技术 class="LinkAbg02">4月12日 推荐文章 电信网通南北网络连通不畅

小结：

　　系统在有链接的文字中（即的调用（即class="LinkA" href="/Article/ShowArticle……），这样这里有链接的文字就受自定义CSS风格中a.LinkA样式的控制。
　　在奇数行的表格中，添加上了class="LinkAbg01"（即		 class="LinkAbg01">），可控制和显示奇数表格行背景与日期等无链接的文字样式；
　　在偶数行的表格中，添加上了class="LinkAbg02"（即		 class="LinkAbg02">），可控制和显示偶数表格行背景与日期等无链接的文字样式。

修改二：显示方式为1（普通样式）

　　显示方式（ShowType）为1（普通样式）。将以上代码改成：

后台模板代码：
     
       









                                                                                                       
本站最新文章

           

       

前台效果：

 

前台网页代码：
     
       




                                                     
本站最新文章

            固顶文章 class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利 (3月27日)
推荐文章 class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0－－新一波互联网大潮的到来" target="_blank">Web2.0－－新一波互联网大 (4月12日)

……

修改三：显示方式为3（各项独立式）

　　显示方式（ShowType）为3（各项独立式）。将以上代码改成：

后台模板代码：
     
       









                                                                                                       
本站最新文章

           

       

前台效果：

 

前台网页代码：
     
       




                                                     
本站最新文章

           
……
class="LinkAbg01">固顶文章 class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利[3月27日]
 class="LinkAbg01">推荐文章 class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0－－新一波互联网大潮的到来" target="_blank">Web2.0－－新一波互联网大[4月12日]
class="LinkAbg01">推荐文章 class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3269" title="智能多线核心技术" target="_blank">智能多线核心技术[4月12日]

修改四：显示方式为4（智能多列式）

　　显示方式（ShowType）为4（智能多列式）。将以上代码改成：

后台模板代码：
     
       









                                                                                                       
本站最新文章

           

       

前台效果：

 

前台网页代码：
     
       




                                                     
本站最新文章

           
……
class='LinkAbg01'>class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利
class='LinkAbg02'>class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0－－新一波互联网大潮的到来" target="_blank">Web2.0－－新一波互联网大

修改五：显示方式为5（输出DIV式）

　　显示方式（ShowType）为4（输出DIV式）。将以上代码改成：

后台模板代码：
     
       









                                                                                                       
本站最新文章

           

       

前台效果：

 

前台网页代码：
     
       




                                                     
本站最新文章

           
class="LinkAbg01"> 固顶文章  class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利[3月27日]
class="LinkAbg02"> 推荐文章  class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0－－新一波互联网大潮的到来" target="_blank">Web2.0－－新一波互联网大[4月12日]

……

　　如果要让div输出定义显示一行多列的效果，如一行四列效果，请进一步参阅《GetArticleList以div输出定义一行四列效果》一文。