|
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{text-decoration:none;/*color:linkcolor;*/color:#0070AF;} /*全局链接字体颜色*/ a:hover{text-decoration:underline;} .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;}/*考虑到浏览器的兼容上,不建议修改*/ .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>
复制代码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} /*靠右浮动*/ .pr{position:relative} /*相位定位*/
|
常用的字体大小 ,可以直接加到想要变化字体的class里
复制代码.f10,small,.small{font-size:11px;} .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;} .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{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-rightulli{line-height:30px;height:30px;float:left;margin-right:10px;width:8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /*大弹出框 popout 管理弹出专用,如开启ajax后,编辑主题,评分等*/ .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;} .popoutContent td{padding:.5em .6em;border-bottom:1px solid tdcolor;} .popoutContent .h{border:0;}
|
新风格制作建议
1,先通过后台风格编辑,把一些变量颜色都决定好
2,然后如果头部有需要加图,可以在#header里添加
3,标题栏和副标题栏,如果需要加图片,需要单独到 .h和 .tr2里添加
4,如果是做全局背景的话,建议头部跟内容都固定宽度,如980px;以便和圈子,门户模式排版对齐。 |
|