科讯CMS新闻列表 排行 标题前序号 添加

科讯CMS新闻列表 依据我项目布局排行9条 标题前序号 添加 前三个背景红色字体白色 后6条 背景白色黑色的边框

先看效果

布局

css 样式部分

.wrap .dec ul li .top2 {

background: #E10602;

color: #FFFFFF;

width: 16px;

height: 16px;

float: left;

text-align: center;

line-height: 16px;

margin-left: 10px;

margin-top: 3px;

margin-right: 10px;

font-size: 14px;

border: 1px #D5D5D5 solid;

}

.wrap .dec ul li .top4 {

width: 16px;

height: 16px;

float: left;

text-align: center;

line-height: 16px;

margin-left: 10px;

margin-top: 3px;

margin-right: 10px;

font-size: 14px;

background-color: #fff;

color: #000;

border: 1px #D5D5D5 solid;

}

jq 部分记得引用jquery 我用得是1.11.3版的不过 这个eq什么版本都应该可以

var $n=$('.wrap .dec ul li');

$n.find('div').eq(0).removeClass('top4').addClass('top2');

$n.find('div').eq(1).removeClass('top4').addClass('top2');

$n.find('div').eq(2).removeClass('top4').addClass('top2');

当然可以定义成变量 优化

下面是标签部分

{LB_首页推荐新闻9个} 插入到你的首页模板

就完成了此效果的制作 注意标签中的{@autoid} 行号的添加 也可以写{@auto(n}的形式 因为我是通过JQ处理样式 所以就没有用这个 我感觉我的方法更方便

标签：科讯,CMS,序号