网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网站建设 >> 动易专区 >> SiteWeaver教程 >> 正文
最新文章
· SiteWeaver系统结构功能概述
· SiteWeaver数据表列表
· IE8正式版下Siteweaver后台编辑器无效
· 在自定义标签中运用js
· SiteWeaver会员登录调用方法
· 生成html或刷新栏目JS时提示“写入文
· 实现文章中出现的关键字自动加亮加连
· 搜狐flash幻灯片标签
· SiteWeaver6.8无限级树形导航标签
· SiteWeaver CMS转换升级为SiteWeaver
热门文章
 动易SiteWeaver版自定义动态标签、
 生成html或刷新栏目JS时提示“写入
 文章自定义列表标签【ArticleList】
 SiteWeaver 6.8会员模板使用说明
 SiteWeaver数据表列表
 FLV视频插件 for SW系列
 在自定义标签中运用js
 Siteweaver模板对应的页面
 文章栏目页标签【ArticleList_Chil
 实现文章中出现的关键字自动加亮加
相关文章
SiteWeaver数据表列表
动易系列软件产品4.7版本发布
动易系列软件产品4.6版本发布
IE8正式版下Siteweaver后台编辑器无效的解
BizIdea4.5正式版版新增功能及更新
SiteFactory4.5正式版版新增功能及更新
动易.NET产品3.6版1028更新
BizIdea3.6版新增功能及更新
SiteFactory3.6版新增功能及更新
动易.NET产品3.5版0428更新
SiteFactory3.5版新增功能及更新
BizIdea3.5版新增功能及更新
BizIdea3.1.6版新增功能及更新
SiteFactory3.1.6版新增功能及更新
动易SiteWeaver程序增强版Config_集成Con
Siteweaver模板对应的页面
SiteWeaver学习笔记
动易网站重复内容检测清理器
仿香港凤凰网文章心情投票
SiteFactory内容页实现点击图片浏览下一页
CssNameA、 CssName1和 CssName2自定义CSS参数的使用实例一文
来源:动易 更新时间:2009/11/26 18:00:31 阅读次数:
字体:[ ] 我要投稿
动易系统文章频道的标签中,有个{$GetArticleList(参数列表)}(GetArticleList标签详细说明请参阅:/CMS/ShowArticle.asp?ArticleID=796/CMS/ShowArticle.asp?ArticleID=649文章)。有许多初次接触的朋友对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.在模板中添加以下代码:

后台模板代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="{$InstallDir}Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <!--{$GetArticleList(0,0,false,0,0,20,false,false,"",0,1,1,24,0,false,8,false,false,2,false,false,false,false,false,false,1,2,,,)}--></td>
          </tr>
          <tr>
            <td class=main_shadow></td>
          </tr>
        </table>
        <!--本站最新文章代码结束-->

前台效果:

 

前台网页代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="/Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <table width="100%" cellpadding="0" cellspacing="0"><tr><td valign="top" class=""><img src="/Article/images/article_ontop7.gif" alt="固顶文章"> <a class="" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利</a> (3月27日)<br /></td><td valign="top" class=""><img src="/Article/images/article_elite7.gif" alt="推荐文章"> <a class="" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0--新一波互联网大潮的到来" target="_blank">Web2.0--新一波互联网大</a> (4月12日)<br /></td></tr>……

  从前台网页代码中可以看出,在首页模板中文章列表并没有受任何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(表格式)。将以上代码改成:

后台模板代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="{$InstallDir}Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <!--{$GetArticleList(0,0,false,0,0,20,false,false,"",0,1,2,24,0,false,8,false,false,2,false,false,false,false,false,false,1,2,LinkA,LinkAbg01,LinkAbg02)}--></td>
          </tr>
          <tr>
            <td class=main_shadow></td>
          </tr>
        </table>
        <!--本站最新文章代码结束-->

前台效果:

 

前台网页代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="/Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="LinkAbg01"><img src="/Article/images/article_ontop7.gif" alt="固顶文章"></td><td class="LinkAbg01"><a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利</a></td><td align="right" class="LinkAbg01">3月27日</td><td width="10" valign="top" class="LinkAbg01"><img src="/Article/images/article_elite7.gif" alt="推荐文章"></td><td class="LinkAbg01"><a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0--新一波互联网大潮的到来" target="_blank">Web2.0--新一波互联网大</a></td><td align="right" class="LinkAbg01">4月12日</td></tr><tr><td width="10" valign="top" class="LinkAbg02"><img src="/Article/images/article_elite7.gif" alt="推荐文章"></td><td class="LinkAbg02"><a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3269" title="智能多线核心技术" target="_blank">智能多线核心技术</a></td><td align="right" class="LinkAbg02">4月12日</td><td width="10" valign="top" class="LinkAbg02"><img src="/Article/images/article_elite7.gif" alt="推荐文章"></td><td class="LinkAbg02"><a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3268" title="电信网通南北网络连通不畅的问题一直难以解决" target="_blank">电信网通南北网络连通不畅</a></td>

小结:

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

修改二:显示方式为1(普通样式)

  显示方式(ShowType)为1(普通样式)。将以上代码改成:

后台模板代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="{$InstallDir}Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <!--{$GetArticleList(0,0,false,0,0,10,false,false,"",0,1,1,24,0,false,8,false,false,2,false,false,false,false,false,false,1,1,LinkA,LinkAbg01,LinkAbg02)}--></td>
          </tr>
          <tr>
            <td class=main_shadow></td>
          </tr>
        </table>
        <!--本站最新文章代码结束-->

前台效果:

 

前台网页代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="/Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <img src="/Article/images/article_ontop7.gif" alt="固顶文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利</a> (3月27日)<br /><img src="/Article/images/article_elite7.gif" alt="推荐文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0--新一波互联网大潮的到来" target="_blank">Web2.0--新一波互联网大</a> (4月12日)<br />
……

修改三:显示方式为3(各项独立式)

  显示方式(ShowType)为3(各项独立式)。将以上代码改成:

后台模板代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="{$InstallDir}Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <!--{$GetArticleList(0,0,false,0,0,20,false,false,"",0,1,3,24,0,false,8,false,false,2,false,false,false,false,false,false,1,2,LinkA,LinkAbg01,LinkAbg02)}--></td>
          </tr>
          <tr>
            <td class=main_shadow></td>
          </tr>
        </table>
        <!--本站最新文章代码结束-->

前台效果:

 

前台网页代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="/Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <table width="100%" cellpadding="0" cellspacing="0"><tr><td valign="top" class="LinkAbg01"><img src="/Article/images/article_ontop7.gif" alt="固顶文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利</a>[3月27日]<br /></td><td valign="top" class="LinkAbg01"><img src="/Article/images/article_elite7.gif" alt="推荐文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0--新一波互联网大潮的到来" target="_blank">Web2.0--新一波互联网大</a>[4月12日]<br /></td></tr><tr><td valign="top" class="LinkAbg01"><img src="/Article/images/article_elite7.gif" alt="推荐文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3269" title="智能多线核心技术" target="_blank">智能多线核心技术</a>[4月12日]<br /></td>
……

修改四:显示方式为4(智能多列式)

  显示方式(ShowType)为4(智能多列式)。将以上代码改成:

后台模板代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="{$InstallDir}Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <!--{$GetArticleList(0,0,false,0,0,10,false,false,"",0,1,4,24,0,false,8,false,false,2,false,false,false,false,false,false,1,1,LinkA,LinkAbg01,LinkAbg02)}--></td>
          </tr>
          <tr>
            <td class=main_shadow></td>
          </tr>
        </table>
        <!--本站最新文章代码结束-->

前台效果:

 

前台网页代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="/Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <table width="100%" cellpadding="0" cellspacing="0"><tr><td valign='top' class='LinkAbg01'><a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利</a></td></tr><tr><td valign='top' class='LinkAbg02'><a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0--新一波互联网大潮的到来" target="_blank">Web2.0--新一波互联网大</a></td></tr>
……

修改五:显示方式为5(输出DIV式)

  显示方式(ShowType)为4(输出DIV式)。将以上代码改成:

后台模板代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="{$InstallDir}Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <!--{$GetArticleList(0,0,false,0,0,10,false,false,"",0,1,5,24,0,false,8,false,false,2,false,false,false,false,false,false,1,1,LinkA,LinkAbg01,LinkAbg02)}--></td>
          </tr>
          <tr>
            <td class=main_shadow></td>
          </tr>
        </table>
        <!--本站最新文章代码结束-->

前台效果:

 

前台网页代码:
      <!--本站最新文章代码开始-->
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=main_title_575><A class=class href="/Article/ShowNew.asp"><B>本站最新文章</B></A></td>
          </tr>
          <tr>
            <td class=main_tdbg_575 vAlign=top height=194>
            <table width="100%" cellpadding="0" cellspacing="0"><tr><div class="LinkAbg01"><img src="/Article/images/article_ontop7.gif" alt="固顶文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3241" title="[上海]都只要2000 三星飞利浦对轰17英寸液晶" target="_blank">[上海]都只要2000 三星飞利</a>[3月27日]</div><div class="LinkAbg02"><img src="/Article/images/article_elite7.gif" alt="推荐文章"> <a class="LinkA" href="/Article/ShowArticle.asp?ArticleID=3270" title="Web2.0--新一波互联网大潮的到来" target="_blank">Web2.0--新一波互联网大</a>[4月12日]</div>
……

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号