立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 4956|回复: 0

[美化修改教程] 修改discuz中的css样式

[复制链接]
发表于 2015-1-28 15:05:39 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有账号?立即注册

x
一、CSS书写规范

1、属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; }

2、属性的书写顺序:

针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

3、按照元素模型由外及内,由整体到细节书写,大致分为五组:

位置:position,left,right,float

盒模型属性:display,margin,padding,width,height

边框与背景:border,background

段落与文本:line-height,text-indent,font,color,text-decoration,...

其他属性:overflow,cursor,visibility,...

4、谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式。

选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> Clearfix

5、勿使用冗余低效的 CSS 写法,例如:ul li a span { ... }

6、慎用 !important

7、建议使用在 class/id 名称中的词语

表示状态:a->active

表示结构:h->header,c->content,f->footer

表示区域:mn->main,sd->side,nv-navigation,mu->menu

表示样式:l-list,tab,p_pop

8、命名方式尽量不通用,使用自己的前缀。例如:(.header => .archy_hd / .footer => .archy_ft / ......)

二、CSS多IE下兼容HACK写法

所有 IE浏览器适用:        .ie_all .foo { ... }
IE6 专用:                .ie6 .foo { ... }
IE7 专用:                .ie7 .foo { ... }
IE8 专用:                .ie8 .foo { ... }

三、常用CSS

1、左浮动、右浮动
.z { float: left; }
.y { float: right; }
复制代码
2、因为左右浮动造成的父级浮动溢出,及使用方法
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

<div class="cl">
    <div class="z"></div>
</div>
复制代码
3、大标题字体
.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }
复制代码
4、行内分割竖线
.pipe { margin: 0 5px; color: #CCC; }
复制代码
5、文字字体大小
.xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }
.xs1 { font-size: 12px !important; }
.xs2 { font-size: 14px !important; }
.xs3 { font-size: 16px !important; }
复制代码
6、灰色文字
.xg1, .xg1 a { color: {LIGHTTEXT} !important; }
.xg1 .xi2 { color: {HIGHLIGHTLINK} !important; }
.xg2 { color: {MIDTEXT}; }
复制代码
7、高亮文字,1为橙色,2为蓝色
.xi1, .onerror { color: {NOTICETEXT}; }
.xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }
复制代码
8、文字粗体
.xw0 { font-weight: 400; }
.xw1 { font-weight: 700; }
复制代码
9、层下边线
.bbda { border-bottom: 1px dashed {COMMONBORDER}; }
.bbs { border-bottom: 1px solid {COMMONBORDER} !important; }
复制代码
10、去除边框
.bw0 { border: none !important; }
.bw0_all, .bw0_all th, .bw0_all td { border: none !important; }
复制代码
11、去除背景
.bg0_c { background-color: transparent !important; }
.bg0_i { background-image: none !important; }
.bg0_all { background: none !important; }
复制代码
12、外边距样式
.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; }
复制代码
13、内边距样式
.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; }
复制代码
道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程 ( 皖ICP备15000319号-1 )

GMT+8, 2024-12-25 14:05

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表