闲坐敲棋

有约不来过夜半,闲敲棋子落灯花

导航

通用 CSS

Posted on 2011-12-22 22:49  闲坐敲棋  阅读(293)  评论(0编辑  收藏  举报
/*---------------------------------------------------------通用CSS开始----------------------------------------------- */

@charset "utf-8";

/* ------------------------------------全局定义---------------------------------------- */

/* 将具有默认margin和padding的标记置零,所有标记的margin、padding都在使用时具体定义 */
*
{ margin:0;padding:0;}

/* 修正IE5.x和IE6的斜体溢出bug */
* html body
{ overflow:visible;}
* html iframe, * html frame
{ overflow:auto;}
* html frameset
{ overflow:hidden;}

/* 常用标签,基本标签默认样式取消,HTML标签,取消基本标签默认样式,防止不同浏览器显示效果不同,text-align:center; 解决不同浏览器居中问题 */
body
{ color:#000; background:#FFF; font:12px/22px Verdana,Arial,sans-serif,"Times New Roman",宋体; text-align:center;}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,tr
{ margin:0; padding:0;}
input,select
{ font-size:12px; vertical-align:middle;}

/* 设置内容左对齐,恢复因BODY设置剧中产生的继承 */
body div
{ text-align:left;}

/* 标签属性,textarea,input 强制输入时内容超出时换行 */
textarea,input
{ word-wrap:break-word; word-break:break-all; padding:0px;}

/* 清除ul列表标记的样式,ul列表更多的用在不需要列表前置符号的样式里 */
li
{ list-style-type:none;}

/* 定义图片边框,当图片作为链接内容被填充时,会有默认边框出现,重定义掉 */
img
{ border:0 none;}

/* 定义默认的链接样式,仅仅是作为默认样式提供,可以在各自的实例中覆盖掉 */
a:link, a:visited
{ color:#04C; text-decoration:none;}
a:hover
{ color:#F60; text-decoration:underline;}

/* 去掉链接的虚线框 */
a
{ outline:none; star:expression(this.onFocus=this.blur());}

/* 定义H系列标签,覆盖H系列标签默认属性 */
h1
{ font-size:24px;}
h2
{ font-size:20px;}
h3
{ font-size:18px;}
h4
{ font-size:16px;}
h5
{ font-size:14px;}
h6
{ font-size:12px;}

/* ------------------------------------通用属性定义---------------------------------------- */

/* 鼠标样式 */
.pointer
{ cursor:pointer;}

/* 取消边框 */
.NoBorder
{ border:0 none;}

/* 文本对齐方式 */
.t_l
{ text-align:left;}
.t_c
{ text-align:center;}
.t_r
{ text-align:right;}

/* 字母和单词换行设置,强制内容换行,强制内容不换行 */
.Break
{ word-break:break-all; word-wrap:break-word;}
.Nobreak
{ word-break:keep-all; word-wrap:normal;}

/* 浮动定义 */
.FL
{ float:left;}
.FR
{ float:right;}

/* 定义文本下划线 */
.UnLine
{ text-decoration:underline;}
.DisunLine
{ text-decoration:none;}

/* 定位关系 */
.absolute
{ position:absolute;}
.relative
{ position:relative;}

/* 下划点虚线 */
.dotLine
{ background:url(../image/dot01.gif) repeat-x left bottom;}

/* ul列表 */
.ul-fl li
{
float
:left; height:23px; line-height:23px; padding-left:20px;
}
.ul-fl-d li
{
float
:left; height:23px; line-height:23px; background:url(../images/dot/dot3-3.jpg) no-repeat 8px 10px; padding-left:20px;
}
.ul-no-f li
{
height
:23px; width:100%; overflow:hidden; line-height:23px; background:url(../images/dot/dot3-3.jpg) no-repeat 8px 10px; padding-left:20px;
}

/* ------------------------------------通用容器定义---------------------------------------- */

/* 容器 */
.wrapper
{ clear:both; overflow:hidden;}

/* 隐藏元素,当元素内容内容超出元素height 或 width 时,隐藏之 */
.o-hidden
{ overflow:hidden;}

/*
* 隐藏元素,visibility可以隐藏元素,但是还是会在布局中占位
*/
.invisible
{ visibility:hidden;}

/* 从页面布局上隐藏元素,从布局上隐藏元素 */
.hidden
{ display:none;}
.block
{ display:block;}

/* ------------------------------------清理元素--------------------------------------- */

/* 清理浮动元素,当浮动换行时后面元素不希望浮动,添加此属性,防止IE BUG */
.clear
{ clear:both; height:0px; width:100%; font-size:1px; line-height:0px; visibility:hidden; overflow:hidden;}


/* ------------------------------------常用样式定义---------------------------------------- */

/* 边框定义,由大写B开头,表示系统公用边框样式 */
.BTW
{ border-top-width:1px;}
.BRW
{ border-right-width:1px;}
.BLW
{ border-left-width:1px;}
.BBW
{ border:0px; border-bottom-width:1px;}
.Bord1
{ border:1px solid #999;}
.Bord2
{ border:2px solid #999;}

/* 边框宽度 (BW开头) */
.BW1
{ border-width:1px;}
.BW2
{ border-width:2px;}
.BW3
{ border-width:3px;}
.BW4
{ border-width:4px;}
.BW5
{ border-width:5px;}

/* 边框样式 (Bs开头) */
.BsS
{ border-style:solid;}
.BsD
{ border-style:dotted;}

/* 边框颜色 (Bc开头) */
.BcBlue
{ border-color: #00F;}
.BcBlack
{ border-color: #000;}

/* 下划线 */
.BotLine
{ border-bottom:1px solid #CFCFCF; overflow:hidden;}
.BotDotLine
{ background: url(../image/dot01.gif) repeat-x left bottom;}
.BotDotLine01
{ width:95%; margin:0 auto; background: url(../image/dot01.gif) repeat-x; height:1px; line-height:1px; overflow:hidden;}
.BotDasLine
{ border-bottom:1px dashed #CFCFCF; overflow:hidden; height:1px; line-height:1px;}
.border-r-dot
{ background:url(../image/dot02.gif) repeat-y right top;}

/* 宽度定义,由小写C开头,表示color */
.W1024,.W786,.W975,.W972
{ width:968px; margin:0 auto;}
.W1024
{ width:1024px;}
.W786
{ idth:786px;}
.W975
{ width:975px;}
.W972
{ width:972px;}

/* 颜色功能定义,由小写C开头,表示color */
.cRed
{ color:#F00;}
.cWhite
{ color:#FFF;}
.cGreen
{ color:#0F0;}
.cGray
{ color:#666;}
.cBlue
{ color:#00F;}
.cblack
{ color:#000;}

/* 定义某个项目常用颜色 */
.c001
{ color:#663;}

/* 定义字体样式,由大写字母F开头,表示FONT */

/* 字体样式 */
.FB
{ font-weight:bold;}
.FN
{ font-weight:normal;}
.FI
{ font-style:italic;}

/* 字体大小 */
.F10
{ font-size:10px;}
.F11
{ font-size:11px;}
.F12
{ font-size:12px;}
.F13
{ font-size:13px;}
.F14
{ font-size:14px;}
.F16
{ font-size:16px;}
.F18
{ font-size:18px;}

/* 定义间距,上下2个DIV间距,用DIVH开头。上下DIV有间距时使用,尽量不使用margin/padding值,防止不同浏览器出现BUG。使用下面属性可兼容大多浏览器。*/
.DivH5,.DivH10,.DivH15,.DivH20,.DivH25,.DivH30,DivH1,.DivH40
{ width:100%; overflow:hidden;}
.DivH1
{ height:1px;}
.DivH5
{ height:5px;}
.DivH8
{ height:8px;}
.DivH10
{ height:10px;}
.DivH15
{ height:15px;}
.DivH20
{ height:20px;}
.DivH25
{ height:25px;}
.DivH30
{ height:30px;}
.DivH40
{ height:40px;}

/* 定义行高,LH 使用较少,主要定义line-height属性 */
.LH1
{ line-height:1px;}
.LH10
{ line-height:10px;}
.LH15
{ line-height:15px;}
.LH18
{ line-height:18px;}
.LH20
{ line-height:20px;}
.LH25
{ line-height:25px;}
.LH30
{ line-height:30px;}
.LH35
{ line-height:35px;}

/* 标题样式定义 PTit 在定义p标签元素或其它元素时,需要同时定义行高和高度,一般使用在标题显示中. */

.PTit25,.PTit20,.PTit18,.PTit30,.PTit,.PTit1,.PTit22
{ width:100%; overflow:hidden;}
.PTit30
{ line-height:30px; height:30px;}
.PTit25
{ line-height:25px; height:25px;}
.PTit22
{ line-height:22px; height:22px;}
.PTit20
{ line-height:20px; height:20px;}
.PTit18
{ line-height:18px; height:18px;}
.PTit15
{ line-height:15px; height:15px;}
.PTit10
{ line-height:10px; height:10px;}
.PTit1
{ line-height:1px; height:1px;}

/* 更多样式设计 MORE 显示在右侧更多/MORE样式,可根据需求扩展 */

.More
{ text-align:right; position:absolute; top:0; right:3px;}
.MoreR5
{ position:absolute; top:0px; right:3px; font:12px normal; }
.MoreR15
{ position:absolute; top:0px; right:15px; font:12px normal;}

/* 普通列表样式定义,文章列表样,一般列表使用,ul li列表 */
.ArtList,.ArtList25,.ArtList22,.ArtList24
{ width:100%; overflow:hidden; margin:0 auto;}
.ArtList li
{ width:100%; height:20px; line-height:20px; overflow:hidden;}
.ArtList25 li
{ width:100%; height:25px; line-height:25px; overflow:hidden;}
.ArtList24 li
{ width:100%; height:24px; line-height:24px; overflow:hidden;}
.ArtList22 li
{ width:100%; height:22px; line-height:22px; overflow:hidden;}

/* ------------------------------------备注---------------------------------------- */

/*
在终极页面中调用该通用样式时,应该注意显示效果的不同,因为后台上传信息时编辑器里面样式并没有调用本默认样式表.
所以在编辑器中标签会有默认的属性,用户在添加信息时,这些信息都是附带默认样式的.
如果用我们在终极页面也调用本默认CSS文件的话,许多标签如:p,td,li......标签默认样式都被取消,因此显示效不同.
解决办法:
在终极页面显示内容区域还原这些标签的默认属性.
*/

/*
ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,tr{ margin:auto; padding:inherit;}
input,select{ font-size:inherit;}
img{border:inherit;}
ul,li{margin:auto; padding:inherit;}
li{ list-style-type:disc;}
*/

/*----------------------------------------------------------------通用CSS结束-----------------------------------------