首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Discuz!论坛预定义CSS样式

作者：暗夜风线_371 | 来源：互联网 | 2014-05-27 15:53
Discuz!预定义了很多CSS样式，保存在template/default/common/common.css文件中，只要是包含了header.htm这个头部文件，预定义的CSS文件一定会加载，所以，熟练了解这些预定义的样式对插件的开发很有必要，这让我们省了很多事。下面就介绍一些常用的预定义

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, .xg1 a { color: {LIGHTTEXT} !important; }
.xg1 .xi2 { color: {HIGHLIGHTLINK} !important; }
.xg2 { color: {MIDTEXT}; }

4. 高亮文字（1为橙色，2为蓝色）

.xi1, .onerror { color: {NOTICETEXT}; }
.xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }
5. 文字粗体
.xw0 { font-weight: 400; }
.xw1 { font-weight: 700; }
6. 下面框
"56">.bbda { border-bottom: 1px dashed {COMMONBORDER}; }
.bbs { border-bottom: 1px solid {COMMONBORDER} !important; }
7. 去除边框
.bw0 { border: none !important; }
.bw0_all, .bw0_all th, .bw0_all td { 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, .avt img, .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: 0 auto; width: 960px; }
/* 宽布局 */
.bw { padding: 0 15px; }
/* 顶部导航 */
#toptb { line-height: 24px; }
/* 页头 */
#hd { border-bottom: {HEADERBORDER} solid {SPECIALBORDER}; {HEADERBGCODE} }
/* 页面主区域 */
#ct { min-height: 300px; }
/* 尾部 */
#ft { padding: 10px 0 50px; border-top: 1px solid {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-repeat 100% 50%; cursor: pointer; white-space: nowrap; }
#um .showmenu { margin-right: -5px; }

15. 鼠标变成指针

.cur1 { cursor: pointer; }

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


推荐阅读
author-avatar
暗夜风线_371
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有