从论坛上来看,还有好些用户不熟悉css,今天我们说说科汛CMS文章列表标签的调用并谈谈如何用css控制列表的效果。希望能对你有所帮助....

      新闻列表是一个网站的重要组成元素。我们会经常遇到它，如何处理他的外观显得尤为重要。今天我们举个实例来说明，实例中,我们将标题与日期作单独的浮动，而且在链接的鼠标悬停时，呈现出不同的色彩变化。而且我们控制LI的背景，让其也产生一些交互。总体上的效果还不错。大家可以看看下面的效果图：

    

此主题相关图片如下：文章列表效果图.gif

 

实现步骤:

登录科汛系统后台,新建栏目,点击"添加栏目"如下图:

此主题相关图片如下：添加栏目.gif

 

如果是根栏目(频道)所属栏目选择"无",如果是子栏目所属栏目选择上一级栏目,输入栏目的中文名称,如新闻频道,英文名称自动会翻译,这是科汛系统的一个特色,在没保存前如果觉得直接翻译太长或是想自己重新命名可以删除并键入自己想的英文名称,在栏目添加完毕想再编辑英文名称就不行了哦...

顺便说一下,
这边可以绑定栏目和内容页的模板,点击"'选择模板"可以选择自己做好的模板绑定.

还有就是栏目序号,序号越小会排列在导航的越前边.

点击"确定增加"完成栏目的添加.

返回到栏目管理首页,如果要添加子栏目则点击"添加子栏目",所属的上一级栏目,如我们要在新闻频道下添加奥运新闻,所属栏目则选择"新闻频道",如下图:

此主题相关图片如下：子栏目添加.gif

栏目建站就讲到这边了........

下面看文章的添加(为了节省时间,直接引用科汛CMS 5.0使用手册内容 http://www.kesion.com/tech/V5/)

此主题相关图片如下：建文章列表标签.gif

 

打开模板编辑,在要显示文章列表的位置插入标签如:{LB_文章列表}

这边就不再讲如果放入标签到模板了,大家可以参考http://www.kesion.com/tech/V5/教程

此主题相关图片如下：原始效果.gif

接下来就是写CSS控制我们要的效果了

科汛自带模板的样式都是在images目录下的style.css里头,我们用dw工具打开style.css文件编辑

/*控制文章列表*/

.pagelist {padding:10px;line-height:200%;letter-spacing:1px;}
.pagelist ul li{height:26px;padding-left:10px;border-bottom:1px dashed #cccccc;position:relative;}
.pagelist ul li a:link,.pagelist ul li a:visited{color:#555;font-size:14px; text-decoration:none;}
.pagelist ul li a:hover{color:#ff6600;font-size:14px;font-size:14px; text-decoration:none;}

/*控制日期字体大小颜色及右对齐*/

.pagelist span{position:absolute;right:15px;color:#555;font-size:14px;}

此主题相关图片如下：css控制后效果.gif