PHPWind7.0风格css样式详解

关键字描述:详解 样式 风格 solid 必要   修改 padding:0 margin:0

body{font-size:9pt; background:url($imgpath/$stylepath/bodybg.gif) repeat-x ; font-family:Verdana; 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有用。 [ 没有重定义的必要 ] */

img{border:0} /*默认图片边框初始化*/ [ 没必要修改 ]

h1{font-size:16px;margin:0;} /* 文章浏览页里得标题样式 */ [ 没必要修改 ]

h3,h2{display:inline;font-size:1.0em;}
h3{font-weight:normal}
h3 a{color:#444;margin-right:.5em;}
/*h3 文章列表页文章标题*/

h2 a{color:#000;} /*h2 板块列表页板块名称标题*/

.c{clear:both;height:0px;font:0px/0px Arial;} /* 清除浮动样式 [ 没必要修改 ] */

.b{ font-weight:700} /* 字体加粗 [ 没必要修改 ] */

.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{color:#0070AF; text-decoration:underline} /*鼠标移动上去显示的样式*/

/*字体大小*/ [ 没必要修改 ]
.f9{font-size:10px;}
.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} /* 绿浅色 */
.s7{color:#ff00a2;} /*粉色*/
.s8,.s8 a{color:#006699;} /*深蓝*/
.gray,.gray a{color:#888;} /*次要文字颜色-可定义*/
.gray3{color:#777;}
.gray2{color:#94938c;}
.link5{ color:#006AAA} /*深蓝*/

/*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;}

/*按钮*/
.abtn{cursor:pointer;border:1px solid $tdcolor;color:$linkcolor;padding:2px 8px 2px; font-family:simsun;background:#fff;margin:2px;}
.abtn:hover{border:1px solid $tablecolor;text-decoration:none;}
/*连接文字按钮*/
关键字描述:详解 样式 风格 solid 必要   修改 padding:0 margin:0

.btn{cursor:pointer;color:#fff;background:#80d1fb url($imgpath/$stylepath/bg.png) 0 top repeat-x;border-width:1px;padding-left:15px;padding-right:15px;vertical-align:middle}
/* 全局通用按钮设置 */

.btn2{border: 1px solid $tdcolor;background:$forumcolortwo;border-width:1px;padding-left:5px;padding-right:5px;vertical-align:middle;color:#555;}
.btn2:hover{border:1px solid $tablecolor;color:#0070AF;}
.btn3{margin-left:2em;vertical-align:middle;cursor:pointer;text-decoration:underline;}
/*其他类型按钮*/

/*form*/
textarea,input,select{font:12px Arial;padding:1px 3px 0 3px;vertical-align:middle;margin-bottom:1px}
/* 输入框,标题填写,下拉框 综合样式 [可以一起设置,也可以分开在下面的几个表里设置] */

select{border:solid 1px $tdcolor;} /* 下拉框具体设置*/ [ 没必要修改 ]

.input{border: 1px solid; border-color: #c0c0c0 #ededed #ededed #c0c0c0;padding:2px 0px 2px 1px;font-size:1.0em;vertical-align:middle;color:#000;}
/* 标题填写输入框 */

form{display:inline;} /*无修改必要*/

textarea{border: 1px solid; border-color: #c0c0c0 #ededed #ededed #c0c0c0;} /* 大型文本输入框样式 */

/*header*/
#header{width:$mtablewidth;margin:auto;} /*头部宽度样式 [后台风格编辑里的 头部和尾部表格宽度设置之一] */

PHPWind7.0风格css样式详解

扫一扫手机访问