pp电子

   从论坛上来看,尚有好些用户不熟悉css,今天我们说说pp电子CMS文章列表标签的挪用并谈谈怎样用css控制列表的效果。。希望能对你有所资助....

      新闻列表是一个网站的主要组成元素。。我们会经常遇到它，，如那里置他的外观显得尤为主要。。今天我们举个实例来说明，，实例中,我们将问题与日期作单独的浮动，，并且在链接的鼠标悬停时，，泛起出差别的色彩转变。。并且我们控制LI的配景，，让其也爆发一些交互。。总体上的效果还不错。。各人可以看看下面的效果图：

    

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

 

实现方法:

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

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

 

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

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

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

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

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

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

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

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

文章内容：输入文章内容,若是内容较长可以插入分页符举行分页

所属专题：即文章属于哪个专题，，如无专题即不选择

添加日期：即文章更新的日期

文章品级：总共5级，，可凭证文章举行评定阅读的品级数

点击数：即本篇文章初始的浏览次数，，可作弊

模板选择：点击选择模板举行对本篇文章举行绑定模板

自界说文件名：即可以自由给本篇文章界说一个文件名，，一旦设定不可更改

审核状态：即本篇文章所在的状态是待审核照旧已审核，，已审核即可宣布在前台给网友会见，，待审核前台则不可会见

-------------------------------------------------------------------------------------------------------------------------------------------------------点击“确定生涯”后，，我们会看到如下图所示的界面：

系统提醒添加文章乐成！

我们看到右下边有四种操作：

修改文章：即对适才添加的文章举行编辑

继续添加文章：即添加新文章

文章治理：即回到文章治理首页’

预览文章内容：点击即可在前台预览到我们适才添加的文章效果

 

文章添加讲到这边........................................................................

 

最先建标签

 

点击"标签"--"系统函数标签",可以自己再建标签治理目录或者直接进入"官方自带标签",新建文章列表标签,如下图:

 

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

 

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

这边就不再讲若是放入标签到模板了,各人可以参考http://www.kesion.com/tech/V5/教程

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

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

pp电子自带模板的样式都是在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

最后效果如下图: