同模板同标签打造不同栏目的不同显示风格-领先建站CMS提供服务商我们专注于CMS建站产品的研发

2672 查看	4 回复

主题：[分享]同模板同标签打造不同栏目的不同显示风格 [收藏主题]

转到：

无风当前离线

1622 主题	5 广播	29 粉丝

级别:高一年

用户积分:5963 分
登录次数:199 次
注册时间:2009/10/12
最后登录:2024/4/4
官方认证：仿站大师

无风发表于：2009/11/21 17:33:00 | 只看该作者查看该作者主题楼主

有课程找生源就上科汛课堂街

给不同的频道制作不同的样式，可能很多朋友都是考虑的绑定不同的模板或者是制作不同的标签吧，这里介绍一个超级简单的方法，

不用制作另外的标签，也不用制作另外的模板，只需要制作不同的css样式就可以了，这也是div标准布局优越于表格布局的好处，表现和内容是分离的，既然同不同的css样式，那么关键点就是调用不同的css样式，那么怎么调用呢？

我们先看看下面这个演示效果

http://wufeng.59970.com/ces/?list-561.html

点击栏目一栏目二栏目三会看到不同的显示效果

这是页面代码

<ul class="css3">
<h4 class="cssa">样式一</h4>
<h4 class="cssb">样式二</h4>
<h4 class="cssc">样式三</h4>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
<li>需要其它样式的是不是还得再绑定一个列表页把列表显示样式的标签换了才行</li>
</ul>

css部分（不会css的朋友赶紧去补下吧）

/*统一定义列表样式*/
li { list-style-type:none; line-height: 26px; }
span { color:#999999; font-size: 12px; }
/*给ul几个不同的样式*/
.css1 { font-size: 12px; color: #009900; }
.css2 { font-size: 12px; color: #0033FF; }
.css3 { font-size: 12px; color: #FF0000; }

/*用包含选择符来控制li，这样不同的ul就可以出现不同的li的效果*/
.css1 li { font-size: 12px; color: #0066FF; background: url(arrow_r.gif) no-repeat left center; padding-left: 15px; }
.css1 .cssb { display:none;}.css1 .cssc { display:none;}
.css2 li { font-size: 12px; color: #FFFFFF; background: #006633; height: 26px; margin-top: 2px; margin-bottom: 2px; }
.css2 .cssa { display:none;}.css2 .cssc { display:none;}
.css3 li { font-size: 12px; color: #000000; border-bottom: 1px dotted #CCCCCC; }
.css3 .cssa { display:none;}.css3 .cssb { display:none;}

上面这些相信有些css基础的朋友都能看明白的，那么我们怎么给这个ul赋予不同的css类名呢

科讯系统给了我们太多的方便，就看你有没有去发现

在栏目编辑中有个自设选项，科讯给我们了十个选项，呵呵，应该是够用的了，我们的css调用就要靠这个完成了

我们在这里填上css1（其他栏目仿此），根据你的设置填写不同的css名

然后在模板中<ul class="css3">调用css样式的这个地方，我们改成下面的代码

<ul class="{$GetClassDefineContent1}"> ，那么前台的显示结果就是<ul class="css3">，这样我们的目的就达到了

刷新一下页面，是不是有了不同的效果呢

同样的道理，我们还可以设置同一个模板的更多不同的部分，只需要在模板中加上{$GetClassDefineContent1}{$GetClassDefineContent2}等等，比如你的栏目有不同的图片需要放上去，用这个方法也是可以做到的，如果不懂可以跟帖或者到群里讨论

科汛商学院助您快速入门