phpwind6.3的css样式详解
时间:2008-06-27 21:35:37
来源: 作者: 点击:次 出处:技术无忧
这边以wind风格为例子,如有问题,请及时指出
body{font-family:Tahoma;font-size:12px;background:$bgcolor; color:#333}
/*网页页面定义：依次定义了字族,字体大小,背景,字体颜色*/
h1,h2,h3,h4,h5,h6,form,body{padding:0;margin:0}
/*设置部分标签的内填充和外边距 [ 没有重定义的必要 ]*/
td,th,div{word-break:break-all;word-wrap:break-word}
/*设置td、th和div元素内的文本强行截断单词，此代码仅对ie有用。[ 没有重定义的必要 ]*/
table{empty-cells:show;}
/*设置全局框架设置 [ 没必要修改 ] */
img{border:0}
/* 全局图片样式 [ 没必要修改 ]*/
h1{font-size:16px;margin:.5em 1em 1em 0}
/* 文章浏览页里得标题样式 */
h3,h2{display:inline;font-size:1.0em;}
h3{font-weight:normal}
/*h3 文章列表页文章标题*/
h2 a {color:#000}
/*h2 板块列表页板块名称标题*/
h3 a { color:#333}
/*h3 首页板块名称 和 文章列表页文章标题 得字体颜色*/
h4{margin:20px 0 10px;font-size:1.1em}
.c{clear:both;height:0px;font:0px/0px Arial;}
/* 清除浮动样式 [ 没必要修改 ] */
.b{font-weight:bold}
/* 字体加粗 [ 没必要修改 ] */
.w{white-space:nowrap}
/* 强制在同一行内显示所有文本 [ 没必要修改 ] */
.tal{text-align:left}
/*文本左对齐*/
.tac{text-align:center}
/*文本中对齐*/
.tar{text-align:right}
/*文本右对齐*/
.fr{float:right}
/*往左边浮动*/
.fl{float:left}
/*往右边浮动*/
/*a link 基本连接颜色*/
a{text-decoration:none;color:$linkcolor}
连接样式[鼠标未移动上去，显示的样式]
a:hover{text-decoration:underline;}
鼠标移动上去显示的样式
.abtn{cursor:pointer;border:1px solid $tablecolor;color:$linkcolor;padding:2px 8px 2px; font-family:simsun}
快速回复里的 字体检查，数据回复 以及 列表也里的 板块权限查看，帖子浏览记录 等样式
/*字体大小*/
.f9{font-size:11px;}
.f10{font-size:11px;}
.f12{font-size:12px}
.f14{font-size:14px}
.fn,.fn a{font-weight:normal}
/* 列表页栏目分类字体样式 */
/*span color 数值自定义*/
.s0{color:#333}
.s1{color:#008000;} /* 绿色 */
.s2{color:#984B98;} /* 紫色 */
.s3{color:#FA891B;} /* 橙色 */
.s4{color:#0033FF;} /* 蓝色 */
.s5{color:#659B28} /* 绿浅色 */
.gray{color:#818a89} /* 灰色 [ 比如底部版权信息里得非连接字颜色 ] */
/*次要文字颜色-可定义*/
/*main color 数值自定义*/
.f_one
/*首页版块里的第一颜色*/
.f_two
/*首页版块里鼠标移动到上面所显示的颜色*/
.t_one
/* 主题列表版块里的第一颜色*/
.t_two
/* 主题列表版块里鼠标移动到上面所显示的颜色*/
.r_one
/* 主题浏览里的主题内容背景*/
.r_two
/* 主题浏览里用户信息的背景*/
以上可以分开设置
如
.f_one{background:$forumcolorone;}
.t_one{background:$forumcolorone;}
.r_one{background:$forumcolorone;}
也可以默认设置
.f_one,.t_one,.r_one{background:$forumcolorone;}
/*form*/
textarea,input,select{font:12px Arial;padding:1px 3px 0 3px;vertical-align:middle;margin-bottom:1px}
/* 输入框,标题填写,下拉框 综合样式 [可以一起设置，也可以分开在下面的几个表里设置] */
select{border:solid 1px $tdcolor;}
/* 下拉框具体设置 */
.btn{background:#fff url($imgpath/$stylepath/h.gif) 0 bottom repeat-x;color:$headfontone;border-width:1px;padding-left:15px;padding-right:15px;vertical-align:middle}
/* 按钮设置 */
.input{border:solid 1px $tablecolor;padding:2px 0px 2px 1px;font-size:1.0em;vertical-align:middle}
/* 标题填写输入框 */
form{display:inline;}
/*无修改必要*/
textarea{border:solid 1px $tablecolor;}
/* 大型文本输入框样式 */
/*header*/
#header{width:$mtablewidth;margin:auto;}
/*头部宽度样式 [后台风格编辑里的 头部和尾部表格宽度设置之一] */
/*toolbar*/
.toptool{border-bottom:1px solid $tdcolor;background:$cbgcolor url($imgpath/$stylepath/guide.gif) 0 bottom repeat-x;}
.toptool span{padding:1px 5px;line-height:180%}
/*头部导航样式 */
/*index info*/
#infobox,#profile-menubar{border:$tdcolor 1px solid;margin-top:-.6em;background:url($imgpath/$stylepath/infobox.gif) 0 0 repeat-x #E1F6F9 ; }
/* 首页登陆框的样式 [包含公告栏] */
#notice{padding:.3em 0;height:18px; border-top:1px dashed $tablecolor}
/* 公告栏样式 */
#notice a{padding-left:1em; background:url($imgpath/$stylepath/dotB.png) no-repeat 0 .1em; margin-left:1em}
/* 公告栏连接字体得样式 */
/*banner*/
.banner img{vertical-align:middle;}
/* 头部logo的位置样式 */
/*guide*/
.guide{background:$cbgcolor url($imgpath/$stylepath/guide.gif) 0 bottom repeat-x; padding:.6em .5em; border:1px solid $tdcolor; color:#ccc;}
td.guide{ border:0; border-bottom:1px solid $tdcolor}
/* 重要栏目导航 [如 社区服务等] */
/*table*/
.t{border:1px solid $tablecolor;margin:0px auto 8px; height:auto; overflow:hidden}
/* 风格里所有的框架边框样式 [后台风格编辑里的 表格外边框颜色 ] */
.t table{border:1px solid $forumcolorone;margin:0; width:100%}
/* 样式.t里的table框架样式 */
.t2{border-top:$tablecolor 1px solid;margin:0px auto 5px;}
/* 浏览页里的框架 [ 无修改必要 ] */
.t3{margin:auto}
/* [ 无修改必要 ] */
.t4{padding:1px 0 1px 1px}
/* [ 无修改必要 ] */
/*table head*/
.h{border-bottom:1px solid $headborder;background:$headcolor url($imgpath/$stylepath/h.gif) 0 0 repeat-x;text-align:left;color:$headfontone;padding:.3em .5em 0; line-height:210%}
/* 表格标题栏样式 可修改背景 框大小 [如 分类栏目的名称] */
.h span{font-weight:normal;}
/* [ 无修改必要 ] */
.h h2{font-weight:bold}
/* 标签的字体加粗 */
.h a{font-family:Arial;color:$headfontone}
/* 表格标题栏字体样式 */
.h a.a2{margin-left:12px;}
/* 连接字的样式距离 */
.closeicon { margin-top:.5em}
/* 表格标题栏样式右边打开关闭小图标控制 */
/* tab */
.tab{ float:left; padding:0 .8em 0;border:1px solid $forumcolorone;background:$headborder ; border-bottom:0; line-height:200%; margin-top:3px; cursor:pointer; margin:2px 0; }
.h span.activetab{ border-color: $tablecolor; cursor:default; font-weight:700}
/* 备用css[ 无修改必要 ] */
/*table tr1*/
.tr1 th{padding:5px 10px;text-align:left;vertical-align:top;font-weight:normal;}
.tr1 td.td1{border:1px solid $tdcolor;}
/* 列表页里左右框架样式[如无必要不用修改] */
/*table tr2*/
.tr2{background:$cbgcolor url($imgpath/$stylepath/tr2bg.png) 0 0 repeat-x;color:$cbgfont;}
.tr2 td,.tr2 th{line-height:18px;border-bottom:1px solid $cbgborder;padding:2px 6px 0px;/*border-top:1px solid $tablecolor;*/}
/* 表格副标题栏 可修改背景 框大小 [如 首页 主题 文章 最后发表 版主] */
.tr2 a{color:$cbgfont;margin:2px 2px 0}
/* 表格副标题栏连接字体的样式 */
/*table tr3*/
.tr3 td,.tr3 th{border-bottom:1px solid $tdcolor;padding:.3em .6em}
.tr3 th{text-align:left;font-weight:normal;}
.z .tr3:hover {background:$forumcolortwo}
/* 首页板块内控制[无修改必要] */
.tr4{background:$headcolor url($imgpath/$stylepath/h.gif) 0 bottom repeat-x;color:$headfontone;}
.tr4 td{padding:4px 10px;}
/* 备用css[ 无修改必要 ] */
.tr td,.tr th{padding:2px}
/* 框架[ 无修改必要 ] */
/*topic content tips*/
.tpc_content{font-size:14px;font-family:Arial;padding:0 2% 0 0.5%;margin:0 0 2%}
/* 浏览页里 [如 管理提醒之类的样式] */
.tips{background:$forumcolortwo;border:$tdcolor 1px solid;padding:5px;margin:0 1% 1% 0;float:left;text-align:center;}
/* 备用css[ 无修改必要 ] */
.tiptop{border-bottom:1px solid $tdcolor;padding:0 ;vertical-align:middle;}
/* 本帖最近评分记录等样式 */
.tipad{border-top:1px solid $tdcolor;margin:10px 0 0;padding:5px 0 0;}
/* 浏览页里 评分,禁言,屏蔽,提醒等 样式控制 */
.quote{width:80%;font-size:70%;color:$headfontone;margin:8px 2px 2px;padding:0}
/* 管理提醒等样式的分控制:框架,字体,字颜色等 */
.blockquote{width:80%;color:#81888c;border:1px solid $tdcolor;border-left-width:3px;padding:5px;margin:0 0 1%}
/* 浏览页里的,引用,代码等 样式框架控制,分别为:宽度,字颜色,边框控制,左边框加强,内距离,外距离 */
/*menu*/
.menu{position:absolute;background:#fff;border:1px solid $tablecolor;}
/* 下拉框外表样式 */
.menu td, .menu li,.menu ul{background:#fff;padding:0; margin:0}
/* 下拉框内框架样式 */
.menu li{list-style:none;}
/* [无修改必要] */
.menu a{display:block;padding:3px 15px;background:#fff;}
/* 下拉框连接字体样式,包含背景 */
.menu a:hover{background:$linkcolor;text-decoration:none;color:#fff;}
/* 鼠标移动上去显示的样式,包含背景 */
.menu ul.ul1 li a{display:inline;padding:0}
/* [无修改必要] */
/*pages*/
.pages{margin:3px 0;font:11px/12px Tahoma}
.pages *{vertical-align:middle;}
/* 列表页,或浏览页里的分页样式 */
.pages a{padding:1px 4px 1px;border:1px solid $tablecolor;margin:0 1px 0 0;text-align:center;text-decoration:none;font:normal 12px/14px verdana;}
/* 字体样式,包含有边框 */
.pages a:hover{border:$cbgfont 1px solid;background:$cbgcolor;text-decoration:none;color:$headfontone}
/* 鼠标移动上去显示的样式,包含有边框 */
.pages input{margin-bottom:0px;border:1px solid $cbgfont;height:15px;font:bold 12px/15px Verdana;padding-bottom:1px;padding-left:1px;margin-right:1px;color:$cbgfont;}
/* 分页输入框样式 */
/*footer*/
#footer{width:$mtablewidth;text-align:right;border-top:2px solid $headborder;margin:auto;padding:5px 0;border-bottom:$cbgcolor 12px solid}
/* 整体底部样式栏,有宽度,字体位置定位,上边框样式,下边框样式 */
#main{width:$tablewidth;margin: auto; padding:.8em 0 0}
/* 中间得整体框架样式 */本文引用自ＰＣ５１.ＮＥＴ
body{font-family:Tahoma;font-size:12px;background:$bgcolor; color:#333}
/*网页页面定义：依次定义了字族,字体大小,背景,字体颜色*/
h1,h2,h3,h4,h5,h6,form,body{padding:0;margin:0}
/*设置部分标签的内填充和外边距 [ 没有重定义的必要 ]*/
td,th,div{word-break:break-all;word-wrap:break-word}
/*设置td、th和div元素内的文本强行截断单词，此代码仅对ie有用。[ 没有重定义的必要 ]*/
table{empty-cells:show;}
/*设置全局框架设置 [ 没必要修改 ] */
img{border:0}
/* 全局图片样式 [ 没必要修改 ]*/
h1{font-size:16px;margin:.5em 1em 1em 0}
/* 文章浏览页里得标题样式 */
h3,h2{display:inline;font-size:1.0em;}
h3{font-weight:normal}
/*h3 文章列表页文章标题*/
h2 a {color:#000}
/*h2 板块列表页板块名称标题*/
h3 a { color:#333}
/*h3 首页板块名称 和 文章列表页文章标题 得字体颜色*/
h4{margin:20px 0 10px;font-size:1.1em}
.c{clear:both;height:0px;font:0px/0px Arial;}
/* 清除浮动样式 [ 没必要修改 ] */
.b{font-weight:bold}
/* 字体加粗 [ 没必要修改 ] */
.w{white-space:nowrap}
/* 强制在同一行内显示所有文本 [ 没必要修改 ] */
.tal{text-align:left}
/*文本左对齐*/
.tac{text-align:center}
/*文本中对齐*/
.tar{text-align:right}
/*文本右对齐*/
.fr{float:right}
/*往左边浮动*/
.fl{float:left}
/*往右边浮动*/
/*a link 基本连接颜色*/
a{text-decoration:none;color:$linkcolor}
连接样式[鼠标未移动上去，显示的样式]
a:hover{text-decoration:underline;}
鼠标移动上去显示的样式
.abtn{cursor:pointer;border:1px solid $tablecolor;color:$linkcolor;padding:2px 8px 2px; font-family:simsun}
快速回复里的 字体检查，数据回复 以及 列表也里的 板块权限查看，帖子浏览记录 等样式
/*字体大小*/
.f9{font-size:11px;}
.f10{font-size:11px;}
.f12{font-size:12px}
.f14{font-size:14px}
.fn,.fn a{font-weight:normal}
/* 列表页栏目分类字体样式 */
/*span color 数值自定义*/
.s0{color:#333}
.s1{color:#008000;} /* 绿色 */
.s2{color:#984B98;} /* 紫色 */
.s3{color:#FA891B;} /* 橙色 */
.s4{color:#0033FF;} /* 蓝色 */
.s5{color:#659B28} /* 绿浅色 */
.gray{color:#818a89} /* 灰色 [ 比如底部版权信息里得非连接字颜色 ] */
/*次要文字颜色-可定义*/
/*main color 数值自定义*/
.f_one
/*首页版块里的第一颜色*/
.f_two
/*首页版块里鼠标移动到上面所显示的颜色*/
.t_one
/* 主题列表版块里的第一颜色*/
.t_two
/* 主题列表版块里鼠标移动到上面所显示的颜色*/
.r_one
/* 主题浏览里的主题内容背景*/
.r_two
/* 主题浏览里用户信息的背景*/
以上可以分开设置
如
.f_one{background:$forumcolorone;}
.t_one{background:$forumcolorone;}
.r_one{background:$forumcolorone;}
也可以默认设置
.f_one,.t_one,.r_one{background:$forumcolorone;}
/*form*/
textarea,input,select{font:12px Arial;padding:1px 3px 0 3px;vertical-align:middle;margin-bottom:1px}
/* 输入框,标题填写,下拉框 综合样式 [可以一起设置，也可以分开在下面的几个表里设置] */
select{border:solid 1px $tdcolor;}
/* 下拉框具体设置 */
.btn{background:#fff url($imgpath/$stylepath/h.gif) 0 bottom repeat-x;color:$headfontone;border-width:1px;padding-left:15px;padding-right:15px;vertical-align:middle}
/* 按钮设置 */
.input{border:solid 1px $tablecolor;padding:2px 0px 2px 1px;font-size:1.0em;vertical-align:middle}
/* 标题填写输入框 */
form{display:inline;}
/*无修改必要*/
textarea{border:solid 1px $tablecolor;}
/* 大型文本输入框样式 */
/*header*/
#header{width:$mtablewidth;margin:auto;}
/*头部宽度样式 [后台风格编辑里的 头部和尾部表格宽度设置之一] */
/*toolbar*/
.toptool{border-bottom:1px solid $tdcolor;background:$cbgcolor url($imgpath/$stylepath/guide.gif) 0 bottom repeat-x;}
.toptool span{padding:1px 5px;line-height:180%}
/*头部导航样式 */
/*index info*/
#infobox,#profile-menubar{border:$tdcolor 1px solid;margin-top:-.6em;background:url($imgpath/$stylepath/infobox.gif) 0 0 repeat-x #E1F6F9 ; }
/* 首页登陆框的样式 [包含公告栏] */
#notice{padding:.3em 0;height:18px; border-top:1px dashed $tablecolor}
/* 公告栏样式 */
#notice a{padding-left:1em; background:url($imgpath/$stylepath/dotB.png) no-repeat 0 .1em; margin-left:1em}
/* 公告栏连接字体得样式 */
/*banner*/
.banner img{vertical-align:middle;}
/* 头部logo的位置样式 */
/*guide*/
.guide{background:$cbgcolor url($imgpath/$stylepath/guide.gif) 0 bottom repeat-x; padding:.6em .5em; border:1px solid $tdcolor; color:#ccc;}
td.guide{ border:0; border-bottom:1px solid $tdcolor}
/* 重要栏目导航 [如 社区服务等] */
/*table*/
.t{border:1px solid $tablecolor;margin:0px auto 8px; height:auto; overflow:hidden}
/* 风格里所有的框架边框样式 [后台风格编辑里的 表格外边框颜色 ] */
.t table{border:1px solid $forumcolorone;margin:0; width:100%}
/* 样式.t里的table框架样式 */
.t2{border-top:$tablecolor 1px solid;margin:0px auto 5px;}
/* 浏览页里的框架 [ 无修改必要 ] */
.t3{margin:auto}
/* [ 无修改必要 ] */
.t4{padding:1px 0 1px 1px}
/* [ 无修改必要 ] */
/*table head*/
.h{border-bottom:1px solid $headborder;background:$headcolor url($imgpath/$stylepath/h.gif) 0 0 repeat-x;text-align:left;color:$headfontone;padding:.3em .5em 0; line-height:210%}
/* 表格标题栏样式 可修改背景 框大小 [如 分类栏目的名称] */
.h span{font-weight:normal;}
/* [ 无修改必要 ] */
.h h2{font-weight:bold}
/* 标签的字体加粗 */
.h a{font-family:Arial;color:$headfontone}
/* 表格标题栏字体样式 */
.h a.a2{margin-left:12px;}
/* 连接字的样式距离 */
.closeicon { margin-top:.5em}
/* 表格标题栏样式右边打开关闭小图标控制 */
/* tab */
.tab{ float:left; padding:0 .8em 0;border:1px solid $forumcolorone;background:$headborder ; border-bottom:0; line-height:200%; margin-top:3px; cursor:pointer; margin:2px 0; }
.h span.activetab{ border-color: $tablecolor; cursor:default; font-weight:700}
/* 备用css[ 无修改必要 ] */
/*table tr1*/
.tr1 th{padding:5px 10px;text-align:left;vertical-align:top;font-weight:normal;}
.tr1 td.td1{border:1px solid $tdcolor;}
/* 列表页里左右框架样式[如无必要不用修改] */
/*table tr2*/
.tr2{background:$cbgcolor url($imgpath/$stylepath/tr2bg.png) 0 0 repeat-x;color:$cbgfont;}
.tr2 td,.tr2 th{line-height:18px;border-bottom:1px solid $cbgborder;padding:2px 6px 0px;/*border-top:1px solid $tablecolor;*/}
/* 表格副标题栏 可修改背景 框大小 [如 首页 主题 文章 最后发表 版主] */
.tr2 a{color:$cbgfont;margin:2px 2px 0}
/* 表格副标题栏连接字体的样式 */
/*table tr3*/
.tr3 td,.tr3 th{border-bottom:1px solid $tdcolor;padding:.3em .6em}
.tr3 th{text-align:left;font-weight:normal;}
.z .tr3:hover {background:$forumcolortwo}
/* 首页板块内控制[无修改必要] */
.tr4{background:$headcolor url($imgpath/$stylepath/h.gif) 0 bottom repeat-x;color:$headfontone;}
.tr4 td{padding:4px 10px;}
/* 备用css[ 无修改必要 ] */
.tr td,.tr th{padding:2px}
/* 框架[ 无修改必要 ] */
/*topic content tips*/
.tpc_content{font-size:14px;font-family:Arial;padding:0 2% 0 0.5%;margin:0 0 2%}
/* 浏览页里 [如 管理提醒之类的样式] */
.tips{background:$forumcolortwo;border:$tdcolor 1px solid;padding:5px;margin:0 1% 1% 0;float:left;text-align:center;}
/* 备用css[ 无修改必要 ] */
.tiptop{border-bottom:1px solid $tdcolor;padding:0 ;vertical-align:middle;}
/* 本帖最近评分记录等样式 */
.tipad{border-top:1px solid $tdcolor;margin:10px 0 0;padding:5px 0 0;}
/* 浏览页里 评分,禁言,屏蔽,提醒等 样式控制 */
.quote{width:80%;font-size:70%;color:$headfontone;margin:8px 2px 2px;padding:0}
/* 管理提醒等样式的分控制:框架,字体,字颜色等 */
.blockquote{width:80%;color:#81888c;border:1px solid $tdcolor;border-left-width:3px;padding:5px;margin:0 0 1%}
/* 浏览页里的,引用,代码等 样式框架控制,分别为:宽度,字颜色,边框控制,左边框加强,内距离,外距离 */
/*menu*/
.menu{position:absolute;background:#fff;border:1px solid $tablecolor;}
/* 下拉框外表样式 */
.menu td, .menu li,.menu ul{background:#fff;padding:0; margin:0}
/* 下拉框内框架样式 */
.menu li{list-style:none;}
/* [无修改必要] */
.menu a{display:block;padding:3px 15px;background:#fff;}
/* 下拉框连接字体样式,包含背景 */
.menu a:hover{background:$linkcolor;text-decoration:none;color:#fff;}
/* 鼠标移动上去显示的样式,包含背景 */
.menu ul.ul1 li a{display:inline;padding:0}
/* [无修改必要] */
/*pages*/
.pages{margin:3px 0;font:11px/12px Tahoma}
.pages *{vertical-align:middle;}
/* 列表页,或浏览页里的分页样式 */
.pages a{padding:1px 4px 1px;border:1px solid $tablecolor;margin:0 1px 0 0;text-align:center;text-decoration:none;font:normal 12px/14px verdana;}
/* 字体样式,包含有边框 */
.pages a:hover{border:$cbgfont 1px solid;background:$cbgcolor;text-decoration:none;color:$headfontone}
/* 鼠标移动上去显示的样式,包含有边框 */
.pages input{margin-bottom:0px;border:1px solid $cbgfont;height:15px;font:bold 12px/15px Verdana;padding-bottom:1px;padding-left:1px;margin-right:1px;color:$cbgfont;}
/* 分页输入框样式 */
/*footer*/
#footer{width:$mtablewidth;text-align:right;border-top:2px solid $headborder;margin:auto;padding:5px 0;border-bottom:$cbgcolor 12px solid}
/* 整体底部样式栏,有宽度,字体位置定位,上边框样式,下边框样式 */
#main{width:$tablewidth;margin: auto; padding:.8em 0 0}
/* 中间得整体框架样式 */本文引用自ＰＣ５１.ＮＥＴ
上一篇：CSS hack浏览器兼容一览表
下一篇：下面没有链接了
文章评论
共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面