你的位置：首页 > 帝国CMS » 正文

帝国cms列表样式快速复制(更改)的技巧

发布时间：2021-01-31 22:04:58

作品分类：帝国 cms css 批量

帝国cms列表样式快速复制(更改)技巧

帝国cms需要新建一个数据模型，例如一个文章模型，完全不同的文章列表型模板。现在需要对旧的模板进行改造，可以快速实现，从速度效率上压低网站建设成本。
一、修改列表样式的id，例如#lieb更改为#wenzhang，可以快速进行干预并切换新的css。
二、生成帝国cms文章列表页。
三、将固定位的以下一段css拷贝到新的css中，基本实现平移切换。
方法基本如上所示，只是代码根据各自列表页结构不同而略有不同

css代码：

#wenzhang dl{padding-top: 15px;
padding-bottom: 15px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ddd;
padding: 0 5px;margin-bottom: 10px;
}

#wenzhang #tu {width: 200px;
height: 120px;
line-height: 100%;
overflow: hidden;
float: left;
margin-right: 15px;margin: 2px;}
#wenzhang #zi1{ color: #888;
line-height: 22px;
height: 43px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
font-size: 14px;}
#wenzhang h2{font-size: 16px;
margin-top: 0px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 0px;}
#wenzhang h2 a{ color: #1487f4;}
#wenzhang h2 a:hover { background: #1487f4; color: #fff; }
#wenzhang .tags{ font-size: 14px;
margin-top: 10px;
overflow: hidden;}

#wenzhang .tags a:hover{
background: #1487f4;
color: #fcfeff;
}
#wenzhang .tags a:nth-child(3) { background: #1487f4; color: #fcfeff }

#wenzhang .tags a {
display: inline-block;
color: #0976dc;
border: #1487f4 1px solid;
padding: 3px 10px;
border-radius: 3px;
margin-right: 5px;
font-size: 12px;
margin-bottom: 5px;
}

@media screen and (max-width:675px) {
#wenzhang .tags{display:none;}
#wenzhang #zi1{height:100%; display: -webkit-box;-webkit-line-clamp: 5;}
#wenzhang h2{ padding-left: 5px;}

}

具体样式可以参考无忧银饰网，不过希望网站还在运营中，很漂亮。