频道栏目
首页 > 程序开发 > Web开发 > PHP教程 > 开源程序 > discuz > 正文
Discuz!论坛预定义CSS样式
2016-01-07 15:31:53           
收藏   我要投稿

Discuz! 预定义了很多CSS样式,保存在template/default/common/common.css文件中,只要是包含了header.htm这个头部文件,预定义的CSS文件一定会加载,所以,熟练了解这些预定义的样式对插件的开发很有必要,这让我们省了很多事。

下面就介绍一些常用的预定义样式

1. 浮动及浮动溢出的清理

/*左右浮动*/
.z{float:left;}
.y{float:right;}
/*浮动清理*/
.cl:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.cl{zoom:1;}

上面的浮动使用方法是:


 


 


2. 文字字体大小
.xs1{font-size:12px!important;}
.xs2{font-size:14px!important;}
.xs3{font-size:16px!important;}
3. 灰色文字
"56">.xg1,.xg1a{color:{LIGHTTEXT}!important;}
.xg1.xi2{color:{HIGHLIGHTLINK}!important;}
.xg2{color:{MIDTEXT};}

4. 高亮文字(1为橙色,2为蓝色)

.xi1,.onerror{color:{NOTICETEXT};}
.xi2,.xi2a,.xi3a{color:{HIGHLIGHTLINK};}
5. 文字粗体
.xw0{font-weight:400;}
.xw1{font-weight:700;}
6. 下面框
"56">.bbda{border-bottom:1pxdashed{COMMONBORDER};}
.bbs{border-bottom:1pxsolid{COMMONBORDER}!important;}
7. 去除边框
.bw0{border:none!important;}
.bw0_all,.bw0_allth,.bw0_alltd{border:none!important;}
8. 去除背景
"56">.bg0_c{background-color:transparent!important;}
.bg0_i{background-image:none!important;}
.bg0_all{background:none!important;}
9. 预定义margin
.mtn{margin-top:5px!important;}
.mbn{margin-bottom:5px!important;}
.mtm{margin-top:10px!important;}
.mbm{margin-bottom:10px!important;}
.mtw{margin-top:20px!important;}
.mbw{margin-bottom:20px!important;}
10. 预定义padding
.ptn{padding-top:5px!important;}
.pbn{padding-bottom:5px!important;}
.ptm{padding-top:10px!important;}
.pbm{padding-bottom:10px!important;}
.ptw{padding-top:20px!important;}
.pbw{padding-bottom:20px!important;}
11. 圆角(注意:可能会弃用)
"56">.brs,.avtimg,.oshr{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.brm{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.brw{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}
12. 布局居中通用容器
/*窄布局*/
.wp{margin:0auto;width:960px;}
/*宽布局*/
.bw{padding:015px;}
/*顶部导航*/
#toptb{line-height:24px;}
/*页头*/
#hd{border-bottom:{HEADERBORDER}solid{SPECIALBORDER};{HEADERBGCODE}}
/*页面主区域*/
#ct{min-height:300px;}
/*尾部*/
#ft{padding:10px050px;border-top:1pxsolid{COMMONBORDER};line-height:1.8;color:{FOOTERTEXT};}

13. 横向及纵向居中

.vm{vertical-align:middle;}
.hm{text-align:center;}

14. 下拉菜单

"56">.showmenu{padding-right:16px;background:url({IMGDIR}/arrwd.gif)no-repeat100%50%;cursor:pointer;white-space:nowrap;}
#um.showmenu{margin-right:-5px;}

15. 鼠标变成指针

.cur1{cursor:pointer;}

夜深了,先写到这里哦。。。。。。

点击复制链接 与好友分享!回本站首页
相关TAG标签 样式 论坛
上一篇:Discuz x3.1后台发送邮件的设置方法
下一篇:dizcuzX3.1安装图文教程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站