阅读量:0
PHPWind7.0风格CSS样式详解包括布局、字体、颜色、边框等，帮助开发者自定义网站外观。
PHPWind7.0是一款流行的论坛系统，其内置的CSS样式对于自定义模板和优化用户体验至关重要，以下是对PHPWind7.0风格CSS样式的详细解析：
基础样式设置
1、全局字体与背景
字体大小与类型：body{fontsize:9pt; fontfamily:Verdana;}
背景图片：background:url($imgpath/$stylepath/bodybg.gif) repeatx;
字体颜色：color:#333;
2、标签默认样式
内边距与外边距：h1, h2, h3, h4, h5, h6, form, body {padding:0; margin:0;}
文本截断：td, th, div {wordbreak:breakall; wordwrap:breakword;}
图片边框：img {border:0;}
3、标题样式
：h1 {fontsize:16px; margin:0;}
H2与H3标题：h2, h3 {display:inline; fontsize:1.0em;}
H3字体粗细：h3 {fontweight:normal;}
H3链接颜色：h3 a {color:#444; marginright:.5em;}
H2链接颜色：h2 a {color:#000;}
4、清除浮动与文本对齐
清除浮动：.c {clear:both; height:0px; font:0px/0px Arial;}
文本加粗：.b {fontweight:700;}
文本不换行：.w {whitespace:nowrap;}
文本对齐：.tal {textalign:left;} .tac {textalign:center;} .tar {textalign:right;}
5、浮动属性
向右浮动：.fr {float:right;}
向左浮动：.fl {float:left;}
链接与按钮样式
1、链接样式
基本链接颜色：a {textdecoration:none; color:$linkcolor;}
鼠标悬停效果：a:hover {color:#0070AF; textdecoration:underline;}
2、字体大小
不同字体大小：.f9 {fontsize:10px;} .f10 {fontsize:11px;} .f12 {fontsize:12px;} .f14 {fontsize:14px;}
3、去除粗体字
正常字体：.fn, .fn a {fontweight:normal;}
4、自定义颜色
多种颜色选择：.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;} /*深蓝*/
5、主要颜色自定义
首页版块颜色：.f_one {background:$forumcolorone;} .t_one {background:$forumcolorone;} .r_one {background:$forumcolorone;}
6、按钮样式
普通按钮：.abtn {cursor:pointer; border:1px solid $tdcolor; color:$linkcolor; padding:2px 8px 2px; fontfamily:simsun; background:#fff; margin:2px;}
鼠标悬停效果：.abtn:hover {border:1px solid $tablecolor; textdecoration:none;}
布局与结构样式
1、导航与个人信息
重要栏目导航：li.current {backgroundcolor:#006AAA; fontweight:bold; border:1px solid #4598C6; borderbottom:0;}
顶部用户名：#一键 {position:absolute; left:0.6em; bottom:1px; _bottom:2px; width:32px; height:20px; cursor:pointer;}
头部信息：#用户登录 {paddingleft:50px; color:#000; paddingbottom:.2em;} #用户登录信息 {paddingright:.5em;}
2、索引信息
菜单栏：#配置文件菜单栏 {border:$ tdcolor 1px solid; bordertop:.6em; background:url($imgpath/$stylepath/bg.png) 0 400px repeatx #E1F6F9;}
收藏板块：#最喜欢的自由衰减 {lineheight:150%;} #最喜欢的自由衰减UL认证 {padding:0; margin:0 0 0 75px; color:#AAA;} #最喜欢的自由衰减利 {float:left; textalign:justify; padding:0; margin:0; paddingleft:1em; liststyle:none; background:url($imgpath/$stylepath/最喜欢的，fid.gif) 0.2em 0.5em norepeat;}
3、通用公告框
面包屑导航：#面包屑 {bordertop:1px solid $tdcolor; height:28px; overflow:hidden; background:url($imgpath/$stylepath/menubg.gif) repeatx #EFFCFE ; lineheight:27px;} #面包屑，屑项目 {overflow:hidden; height:28px; padding:0 1.3em 0 1.3em; background:url($imgpath/$stylepath/面包屑，item.gif) norepeat right top; float:left; position:relative; right:7px;} #面包屑，屑项目，强 {color:#60AFE6; lineheight:29px;} #面包屑，屑，项目I（位置是：绝对的高度：28px;宽度：7px;左：0px;顶部：0） #面包屑，屑项目：悬停资料（背景：url($imgpath/$stylepath/面包屑，item.gif)右下角不重复；） #面包屑，屑项目：悬停（背景颜色：＃EFF9C8，文字装饰：无）
4、主框架与归纳
主框架：#主 {width:$tablewidth; margin:auto; padding:1px 0 0;} /*中间得整体框架样式*/
归纳边框：.吨（边界：1px固体$ tablecolor，边境顶：2px固体$ tablecolor，保证金：0汽车＃333333;高：自动;溢出：隐藏;）/*风格里所有的框架边框样式[后台风格编辑里的归纳外边框颜色]*/ .吨表（边界：0px固体$ forumcolorone，保证金：0;宽度：100％;边境顶：无;）/*样式，吨里的桌子框架样式*/ .t2（边境顶：$ tablecolor 1px固体;保证金：0px汽车5px;）/*浏览页里的框架[无修改必要]*/ .T3航站楼（保证金：4px汽车3px;） .T3航站楼表（填充：0px;）/[无修改必要] */ .t4（填充0px;）/[无修改必要] */ .t5（边界1px固体$ tdcolor，保证金：0汽车＃333333;高：自动;溢出：隐藏;）/*浅边框样式*/
表头：.h头（边框底部：1px固体$ headborder;背景：$ headcolor，文本对齐：左;颜色：$ headfontone;填充：2px .5时间0;线高度：220％;） .h头跨度（字体体重：正常;） .h头氢（字体重量：大胆） .h头1（字体 family：宋体;颜色：$ headfontone） .h头跨度，，h头跨度（颜色：$ headfonttwo;） .h头a.a2（保证金左：12px;）/*标题栏样式*/ .上半年（颜色：＃008ef1;保证金：0 0 1em 0;）/*文章浏览页标题补充样式*/ .氢气（背景：$ headcolor;颜色：$ headfontone，文本对齐：左，填充：0 12px 0 12px;高度：28px;线高度：28px;边框底部：1px固体$ tdcolor;） .氢气1（颜色：$ headfontone;）/*文章浏览页标题栏*/ .H3的（边框底部：1px固体$ headborder;背景：$ headcolor，文本对齐：左;颜色：$ headfontone;线高度：24px;填充右：＃333333;） .H3的一个（字体 family：宋体;颜色：$ headfontone）
通过以上详细的解析，可以看出PHPWind7.0的CSS样式涵盖了从基础设置到高级布局的各个方面，为开发者提供了丰富的自定义选项，在实际应用中，可以根据具体需求对这些样式进行修改和扩展，以实现更加个性化和专业的论坛界面。
常见问题解答（FAQs）
1、如何修改PHPWind7.0的全局字体大小？
答案：要修改全局字体大小，可以调整body选择器中的fontsize属性，将fontsize从9pt改为12pt，代码如下：
```css
body {fontsize:12pt;}
```
2、如何在PHPWind7.0中为所有链接添加下划线？
答案：要为所有链接添加下划线，可以修改a选择器的textdecoration属性，将textdecoration从none改为underline，代码如下：
```css
a {textdecoration:underline;}
```
| 类名 | 样式说明 | 示例代码 |
| .mainbox | 主要内容区域的容器 | .mainbox { width: 980px; margin: 0 auto; padding: 10px; backgroundcolor: #fff; border: 1px solid #e1e1e1; } |
| .titlebar | 标题栏样式 | .titlebar { backgroundcolor: #f2f2f2; padding: 10px; borderbottom: 1px solid #e1e1e1; } |
| .threadlist | 帖子列表样式 | .threadlist { marginbottom: 20px; } |
| .threadlist li | 帖子列表项样式 | .threadlist li { liststyletype: none; padding: 10px; borderbottom: 1px solid #e1e1e1; } |
| .threadlist li .subject | 帖子标题样式 | .threadlist li .subject { fontsize: 16px; fontweight: bold; color: #333; } |
| .postinfo | 帖子信息样式 | .postinfo { color: #666; fontsize: 12px; } |
| .postcontent | 帖子内容样式 | .postcontent { margintop: 10px; } |
| .postcontent img | 帖子中的图片样式 | .postcontent img { maxwidth: 100%; height: auto; } |
| .pagination | 分页样式 | .pagination { textalign: center; margintop: 20px; } |
| .pagination a | 分页链接样式 | .pagination a { margin: 0 5px; textdecoration: none; color: #333; } |
| .pagination a:hover | 分页链接悬停样式 | .pagination a:hover { color: #f00; } |
| .searchform | 搜索表单样式 | .searchform { marginbottom: 20px; } |
| .searchform input[type="text"], .searchform input[type="submit"] | 搜索框和按钮样式 | .searchform input[type="text"], .searchform input[type="submit"] { padding: 5px; border: 1px solid #e1e1e1; } |
这个归纳只是一个基本的示例，PHPWind 7.0的CSS样式可能包含更多的类名和样式规则，在实际开发中，你可能需要根据具体的设计需求调整和扩展这些样式。
