曲径通幽论坛

标题: PHPWind7.3css-传统模式详解 [打印本页]

作者: beyes 时间: 2009-4-12 12:53
标题: PHPWind7.3css-传统模式详解
w7.3从页面构架上来说分2部分，页面内容部分和底部辅助导航工具条。
页面内容部分可以在分为2部分： header, main (main包含 footer)

以huopo风格为例

Header涉及到的样式 (下有图例)
      #header 比较适合加头部背景
       #topbar 自定义导航的宽度控制
          #nav-top 自定义导航
       .head-wrap 比较适合加logo背景，包括右边的banner广告
          #head logo与banner广告的宽度控制
                  logo
                  nav-operate
      .nav-wrap 适合加导航背景
          #nav 导航宽度控制
              #nav-global 模式间的切换
              #nav-bbs 传统论坛的一些菜单
              #nav-user 用户登录后的信息
                  .userinfo-gps 会员信息弹出框

Main 涉及到的一些样式
     #main    如果body里加背景，建议#main也加上背景和内补丁，与body背景做区分
         #notice   公告样式
         .information   公告下面的的论坛信息
         #breadCrumb   每个页面都有的当前位置样式
         .ad-text    头部文字广告样式
         .t        通用表格样式
         .h        通用标题栏样式
         .tr2        通用副标题栏样式
         .tr3        通用表格列表样式
   #footer
         .bottom    底部自定义导航

底部辅助导航工具条
     .startbar-wrapper    考虑到兼容性问题，不建议改动
     .startbar            考虑到兼容性问题，不建议改动
     .startbar-ui    样式控制
     包含的其他样式在 template/wind/bottom.htm 考虑到兼容性问题，不建议改动

全局相关

复制代码

html{overflow-y:scroll;} /*主要用于显示浏览器右边拉动条，防止页面切换无拉动条产生的跳动感*/

body{font-size:9pt; background:bgcolor;font-family:Verdana; color:#333;} /*全局控制，可加背景，设置非链接字体颜色以及字体等*/

h3{font-weight:normal}/*h3 文章列表页文章标题*/

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

h3 a{color:#444;zoom:1;} /*zoom:1 主要作用是链接下划线对齐*/

h4{margin:20px 0 10px;font-size:1.1em} /*考虑到浏览器的兼容上，不建议修改*/

/*a link 基本连接颜色*/

a{text-decoration:none;/*color:linkcolor;*/color:#0070AF;} /*全局链接字体颜色*/

a:hover{text-decoration:underline;}

/*span color 数值自定义*/

.black,.black a{color:#333} /*黑色*/

.s1{color:#008000;} /*绿色*/

.s2{color:#984B98;} /*紫色*/

.s3{color:#ff6600;} /*橙色*/

.s4{color:#0033FF;} /*蓝色*/

.s5{color:#659B28} /*浅绿*/

.s7,.s7 a{color:#ff00a2;} /*粉红*/

.s8,.s8 a{color:#006699;} /*蓝色*/

.gray,.gray a{color:#908c8c;} /*次要文字颜色-可定义*/

.red{color:#ff0000;}/*红色*/

.mode-main-left a,.blue,.blue a,.c-t-500 span a{color:#2384bc;} /*蓝色*/

/*内补丁*/

.pdD{padding:.3em .5em} /*考虑到浏览器的兼容上，不建议修改*/

.p10{padding:11px;}/*考虑到浏览器的兼容上，不建议修改*/

/*main color 数值自定义*/

.f_one,.t_one,.r_one{background:forumcolorone;} /*论坛列表颜色一，可在后台风格编辑处编辑*/

.f_two,.t_two,.r_two{background:forumcolortwo;}/*论坛列表颜色二，可在后台风格编辑处编辑*/

复制代码

/*按钮*/

.btn{border-color: #4c9542 #668f01 #668f01 #4c9542;margin-right:1em;color:#fff;background:#89bf01;} /*主按钮*/

.btn,.bt{border-width:1px;cursor:pointer;padding:.1em 1em;*padding:0 1em;font-size:9pt; line-height:130%; overflow:visible}

.bt{cursor:pointer;background:#f0f0f0;color:#000;vertical-align:middle;border-color: #e7e7e7 #666666 #666666 #e7e7e7;} /*辅助按钮*/

复制代码

/*伪类按钮*/

.bta{cursor:pointer;color:linkcolor;padding:2px8px;background:forumcolortwo;margin:2px;white-space:nowrap;border:1pxsolid tdcolor;}

.bta 常直接加到 a链接的 class里

复制代码

.abtn2 a{border:1px solid #fbfdff;padding:2px 4px 1px;color:#555;}

.abtn2 a:hover{border:1px solid #2195d2;color:#2195d2;text-decoration:none;background:#fff;}

用于加到 a链接外面的 div 或者 span 等包含 a链接的模型里

复制代码

/*图像*/

.img a img{border:1px solid tdcolor;padding:3px;background:forumcolorone;}

.img a:hover img{border:1px solid headborder;background:forumcolorone;}

.u-img img{padding:1px;background:forumcolorone;border:1px solid tdcolor;}

常用于图片样式外的模型class里
如
<div class="img">
<img src="xxx.png" />
</div>

复制代码

/*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:2px0px 2px 1px;font-size:1.0em;vertical-align:middle;color:#000;} /*输入框*/

textarea{border: 1px solid; border-color: #c0c0c0 #ededed #ededed #c0c0c0;} /* 文本框*/

关于wind-reset.css的样式解释 wind-reset.css样式为pw专用初始化以及通用样式库

这里介绍修改风格常用的几个样式
.cc 清楚浮动，用于加在有浮动样式的父盒子模型。例如

<div class="cc">
<div class="fl">有浮动的</div>
</div>

复制代码

/*通用样式*/

.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} /*靠左浮动*/

.pr{position:relative} /*相位定位*/

常用的字体大小，可以直接加到想要变化字体的class里

复制代码

.f9{font-size:10px;}

.f10,small,.small{font-size:11px;}

.f12{font-size:12px}

.f14{font-size:14px}

.f16{font-size:16px;}

.f24{font-size:24px;}

.fn,.fn a{font-weight:normal} /*去除粗体*/

/*浏览页里的样式*/

复制代码

h1{font-size:14px;margin:15px;color:#017fc6;} /*文章标题名*/

.honor{line-height:130%;padding:3px 8px 5px 12px;overflow:hidden;color:#777;} /*用户个性签名*/

.tpc_content{font-family:Arial;padding:0 15px 2em 15px;margin:0;line-height:2em;}

.tpc_content font{line-height:1.1em;}

.tpc_content a{text-decoration:none;color:#0070AF;}

.tpc_content a:hover{text-decoration:underline}

.tpc_content ol{list-style-type:decimal;}

.tpc_content ul{list-style-type:disc;}

/*内容样式，不建议做大改动，.tpc_content a 链接颜色可做变动*/

.tips{background:#fdfffc;border:cbgborder1px solid;padding:5px;margin:5px 15px 5px15px;text-align:left;line-height:20px;float:left;}

.tipsli{list-style:none;width:30%;height:24px;line-height:24px;min-width:210px;margin:05px;float:left;overflow:hidden;text-overflow:ellipsis;}

.tipad{margin:2em 1em 0 1em;padding-bottom:10px;}

.tipad .fr a{color:#888;}

/*包含评分，广告等，不建议大改动，可修改background:#fdfffc;border:cbgborder 1px solid; 做细节变动等 */

.tiptop{border-bottom:1px dashed #ccc ;padding:0 0 0 1px;height:27px;line-height:27px;margin:0 15px 0 15px;color:#666666;}

.tiptop a{color:#99cc00;}

/*发贴楼层那一块，根据实际情况变动*/

.blockquote3{width:80%;border:1pxdashed #CCC;background:#f7f7f7 url(imgpath/blockquote3.png) right topno-repeat;margin:10px 0;padding:5px 10px;}

.blockquote3 .quote{color:#999;font-size:12px;}

.blockquote3 .text{padding:0 10px 10px 10px;}

/*帖子引用，可根据实际情况做变动*/

.blockquote{width:65%;zoom:1;padding:5px8px 5px;line-height:1.3;border:1px dashed#eda85f;background:#fff7dd;color:#666666;margin:0 15px;}

.quote{width:67%;}

.block-img{background:#fff7dd url(imgpath/attention.png) 8px 6px no-repeat;padding-left:28px;margin:0 15px 10px;}

/*管理提醒，帖子操作，楼主回复等*/

.blockquote2{border:1px solid; border-color: #c0c0c0 #ededed #ededed#c0c0c0;margin:0px;padding:0 0 02em;line-height:2em;overflow:hidden;background:#fff}

.blockquote2 ol{margin:0 0 0 1.5em;padding:0;}

.blockquote2ol li{border-left:1px solid#ccc;background:#f7f7f7;padding-left:10px;font-size:12px;font-family:"CourierNew" serif;list-style-type:decimal-leading-zero;padding-right:1em;}

.blockquote2 ol li:hover{background:#fff;color:#008ef1;}

.blockquote2 ol li{list-style-type:decimal;}

/*帖子代码样式*/

/*pages*/

.pages{border:1px solid tdcolor;margin:3px 0;height:24px;line-height:24px;float:left;}

.pages a,.pages b,.pages .pagesone{display:block;float:left;}

.pages a{padding:0 7px;color:#333;}

.pages b{padding:0 7px;background:cbgborder;color:cbgfont;}

.pages a:hover{background:forumcolortwo;text-decoration:none;}

.pages.pagesone{border-left:1px solidtdcolor;background:forumcolortwo;font:12pxVerdana;height:21px;*height:22px;_height:23px;padding:3px 4px 08px;*padding:2px 4px 0 8px;_padding:1px 4px 0 8px;}

.pages input{border:1px solid tdcolor;padding-left:1px;}

/*分页代码*/

/*导航用户信息头像等，包含有圈子里的访客等样式，建议修改的话可以直接修改图片*/

.portrait-m{ width:40px;height:40px; background:url(imgpath/stylepath/portrait-bg-m.png) 3px 3px no-repeat; padding:7px }

.portrait-s{width:18px;height:18px;background:url(imgpath/stylepath/portrait-bg-s.png) 2px 2px no-repeat;padding:7px; vertical-align: middle }

/*5像素圆角,不建议改动，但是可以运用到风格里*/

.bottom .y-bg2,.bottom .y-bg3,.bottom .y-bg4{background:cbgcolor;}

.y-bg{margin:0 4px;border-top:1px solid tdcolor;}

.y-bg2{margin:0 2px;height:1px;border:2px solid tdcolor;border-top:0;border-bottom:0;overflow:hidden;}

.y-bg3{margin:0 1px;height:2px;border:1px solid tdcolor;border-top:0;border-bottom:0;overflow:hidden;}

.y-bg4{padding:0 10px;border:1px solid tdcolor;border-top:0;border-bottom:0;overflow:hidden;}

/*头部文字广告样式*/

.ad-text{margin:5px auto 0;border:1px dotted tdcolor;border-bottom:0;}

.ad-text td{padding:.3em 0;}

/*头部的那个发贴按钮*/

.nav-post{background:url(imgpath/stylepath/nav-post.png) no-repeat;width:56px;height:22px;margin-right:10px;margin-top:3px;}

/*小弹出框，下来专用的，如社区服务，发贴下拉，发贴导航等*/

.menu-post{border:2px solid tdcolor;padding:1px;background:tablecolor;}

.menu-post .menu-b{border:1px solid #fff;background:forumcolorone;}

.menu-half li{width:45%;float:left;}

.menu-top{font-weight:700;border-bottom:1pxsolid headborder;background:headcolorurl(imgpath/stylepath/h.png);padding:.4em .6em;}

.menu-post a{color:#333;}

.menu-left{font-weight:700;text-align:left;width:140px;padding:10px0;vertical-align:top;background:forumcolortwo;border-right:1px solidtdcolor;}

.menu-right{ vertical-align:top;padding:5px 10px;border-top:1px solid tdcolor;}

.menu-right ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.menu-right ul{zoom:1;}

.menu-rightulli{line-height:30px;height:30px;float:left;margin-right:10px;width:8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/*大弹出框 popout 管理弹出专用，如开启ajax后，编辑主题，评分等*/

.popout{}/**/

.popoutContent{background:#fff;border:1px solid #999966;}

.bgcorner1,.bgcorner2,.bgcorner3,.bgcorner4,.pobg1,.pobg2,.pobg3,.pobg4{filter:Alpha(opacity=80);_filter:Alpha(opacity=80);opacity:.8;overflow:hidden;z-index:1005; line-height:0 }

.bgcorner1,.bgcorner2,.bgcorner3,.bgcorner4{width:5px;height:5px;background:url(imgpath/pwicon/bgcorner2.gif) no-repeat;}

.bgcorner1{background-position: 0 0 }

.bgcorner2{background-position: -5px 0 }

.bgcorner3{background-position: -5px -5px}

.bgcorner4{background-position:0 -5px}

.pobg1,.pobg2,.pobg3,.pobg4{ background:#99cc00;}

.pobg1{height:5px; }

.pobg2{width:5px;}

.pobg3{height:5px;}

.pobg4{width:5px;}

.popoutContent td{padding:.5em .6em;border-bottom:1px solid tdcolor;}

.popoutContent .h{border:0;}

新风格制作建议
1，先通过后台风格编辑，把一些变量颜色都决定好
2，然后如果头部有需要加图，可以在#header里添加
3，标题栏和副标题栏，如果需要加图片，需要单独到 .h和 .tr2里添加
4，如果是做全局背景的话，建议头部跟内容都固定宽度，如980px;以便和圈子，门户模式排版对齐。

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)