当前位置: 首页 > 图文教程 > 专题中心 > joomla教程和joomla模板制作教程 > Joomla入门教程 > Joomla教程:为页面和模块添加独立的自定义Class

Joomla入门教程
Joomla教程:在Joomla 1.5中使用SEF网址
Joomla教程:重置用户密码的3种方法
Joomla教程:使用图片和CSS实现翻转效果菜单
Joomla教程:保持Blog视图中的文章标题链接
Joomla教程:一套模板实现多种布局模式
Joomla教程:去掉分类文章列表中的文章序号
Joomla教程:禁止未分类文章被站内搜索
Joomla教程:网站首页第一次加载时播放一次Flash动画
Joomla中文教程:创建并使用插件对文章内容进行修改
Joomla教程:查看并修改模板的CSS
Joomla教程:为“read more”链接添加对应的文章标题
Joomla教程:为页面和模块添加独立的自定义Class
Joomla教程:在templateDetails.xml中添加语言文件声明
Joomla中文教程:构建多重站点
Joomla教程:在Who is online模块中显示用户名
Joomla教程:本地搭建的Joomla站点发送邮件
在Joomla自定义HTML模块组合使用Google小工具
Joomla教程:mod-rewrite是否真的被开启
Joomla教程:控制Section中的分类列表页面的显示方式
Joomla教程:文章页面中显示指定的模块

Joomla入门教程 中的 Joomla教程:为页面和模块添加独立的自定义Class


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-12-07   浏览: 214 ::
收藏到网摘: n/a

Joomla的菜单项和模块设置中,页面Class后缀(Page Class Suffix)和模块Class后缀(Module Class Suffix)这两个参数允许你为Joomla生成的HTML页面增加自定义的class,使我们可以通过CSS为一些页面或模块设定独特的样式。

在添加自定义class时,我们可以在class名称前增加一个空格,例如“ myNewClass”(即“空格+myNewClass”),这样该class名称就是一个我们希望得到的独立的class。例如,原本的HTML

<div class="componentheading">

将变为:

<div class="componentheading myNewClass">

注意,如果在新class名称前没有加空格,那么HTML会变为:

<div class="componentheadingmyNewClass">

通过增加空格的方式为元素添加class后缀之后,我们的目标元素div就有两个class名称了。现在元素的样式没有任何变化,因为“componentheading”这个class依然在起作用想要改变元素的样式,我们必须为新的class增加一些CSS代码。

例如,我们希望class中包含“myNewClass”的元素有一种特殊的背景色,那么可以在CSS文件中增加如下代码:

.componentheading.myNewClass { background-color: #FFE4E1; /* mistyrose */}

因为我们在CSS选择器中采用了连缀的方式,所以只有某元素同时拥有“componentheading”和“myNewClass”这两个class时,该样式才会被使用。

需要注意的是,在通过设定Class后缀参数的方式来增加HTML元素的class名称时,要确保新的class不会与原有的重名。