了解完，那就是相对应的CSS修改了，下面介绍些css样式 都可替换到CSS样式里面
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration:overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
三、CSS符号属性：
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position:outside; /*凸排*/
list-style-position:inside; /*缩进*/
四、CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
可写在 url(/image/bg.gif); 背后 如
background-image : url(/image/bg.gif) center repeat-y;
五、CSS连接属性：
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6)
p {cursor:url("光标文件名.cur"),text;}
六、CSS框线一览表：
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style :solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表单运用：
文字方块 <input type="text" name="T1" size="15">
按钮 <input type="submit" value="submit" name="B1">
复选框 <input type="checkbox" name="C1">
选择钮 <input type="radio" value="V1" checked name="R1">
多行文字方块 <textarea rows="1" name="S1" cols="15"></textarea>
下拉式菜单 <select size="1" name="D1"><option>选项1</option>
<option>选项2</option></select>
八、CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
九、CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
*************************************************************************************************************************************************************************************
*************************************************************************************************************************************************************************************
*************************************************************************************************************************************************************************************
下面进行具体修改 ,我是把我做一款风格的过程给大家写出来吧
一，首先是准备下工具 比如取色器，做图软件 （比如PS什么的。。）
我喜欢用一个小的做图软件，如 Ulead GIF Animator 5 也可以当成取色工具
在做个效果图
二。效果图出来了，那么让我们先把图片截取一个一个加进风格吧
建议下个官方源码包，然后把 images/wind拿出来，把里面的图片一个一个替换成你要的
(我就用官方默认风格wind修改过来吧）
1，先定下整体背景，背景颜色，在后台风格编辑里 找到 全局背景颜色： 填写背景颜色 #FDFDFD
然后确认，更新后，在下面的 css处加上要加的背景图片(把背景图名字定位为 bg.gif )
修改后 body的样式就是这个样子(要想整体非连接字的颜色调整的话可以在里面加上 color:颜色
代码）
body{font-family:Tahoma;font-size:12px;background:$bgcolor url($imgpath/$stylepath/bg.gif) repeat-x;}
如果背景图太大，想要固定住，可以在里面加 background-attachment:fixed;
2,背景搞定了，那接下来从头部向下修改，当然你也可以从其他地方开始，看个人喜好
头部导航，头部导航的样式代码是 .toptool 找到他 依照加整体背景的方法，加上对应的背景图名称，名字随便定，我自己定的就是 top01.gif
.toptool{background:$cbgcolor url($imgpath/$stylepath/top01.gif) repeat-x;padding-top:5px;}
如果导航里的字太靠上面了，你可以在里面加上 padding-top:5px; 5px是高度，可以自定义
3，然后再往下，logo整个头部的背景怎么加，很简单的一个方式是 打开template/风格名/header.htm文件,用记事本打开，搜索 logo.png 找到上面的 <table cellspacing="0" cellpadding="0" align="center" width="100%"> 在里面加上 background="$imgpath/$stylepath/topbg.gif" topbg.gif可以自定义
然后再加上 height="120px" 图片高度 120px自定义
4，到logo下导航了 就是 社区服务那了
官方定义的样式是
.guide 同样在后台风格编辑CSS那可以找到 对应此栏，我定义的图片是 top02.gif
所以修改后的样式是
.guide{background:$cbgcolor url($imgpath/$stylepath/top02.gif) 0 0 repeat-x; padding:.5em; border:1px solid $cbgborder; color:#ccc}
如果想要决定此栏目连接字体的颜色
那么可以在这段样式下加 .guide a{color:颜色代码}
5,到首页用户信息栏了，样式对应代码 #infobox
我加上自己设置的图片 top03.gif
修改后的样式：#infobox{border:$tdcolor 1px solid;margin-top:-.8em;background:$tablecolor url($imgpath/$stylepath/top03.gif) repeat-x; }
border:$tdcolor 1px solid; 这是信息栏边框颜色以及样式代码，可以在上帖里找代码替换
如果想换成虚线框，把solid 替换成dotted 其他通理 1px是线宽度大小
#notice 是公告栏样式，因为#infobox包括了公告栏，所以可以不加图，直接在信息栏图的里面加样式
官方在#notice 里加的图片是个小图标 可以增加细节美化
要修改公告栏里的字体颜色 在 #notice a里的 color:#fff;
6.到 表格标题栏 了，如果不想加图的话可以 在 .h里去掉改后样式是
.h{border-bottom:1px solid $headborder;background:$headcolor;text-align:left;color:$headfontone;padding:.5em .4em}（根据官方wind改）
然后颜色就可以在上面的 栏目里修改
相对应的栏目是
表格标题栏颜色：
表格标题栏下边框颜色：
标题栏主要字体链接颜色：
标题栏次要字体链接颜色：
7，表格副标题栏
样式是 .tr2 修改方法同上面的一样
8，在线用户这栏样式是 .tr4 建议样式设置成跟.h一样，如果是其他样式，建议加 .tr4 a{color:颜色代码}
因为控制面版里栏目就是用 .tr4样式，但是没有连接字体样式，所以需要加下
三，取色
接着就是整体字体颜色了，大家可以用 Ulead GIF Animator 5 取色 试试，然后再调整
图里的 hex 就是颜色样式
那么就是整体出来了，接下来就是细节图片替换问题了
再修改 data/style/wind.php 通过 ftp下载 用记事本打开
$stylepath = 'wind';
$tplpath = 'wind';
当然后台风格编辑处也可以
Quote:此风格在image目录下的文件夹名称:
此风格在template目录下的风格文件夹名称:
然后把images/wind的目录下载 名字修改成你对应的名字
template同理
然后整合成一个风格包
data/style/风格名.php data/style/风格名_css.htm
images/风格名
template/风格名
风格就出来了，很简单，不是吗？
免费论坛 » 风格模板 » pw6.0的CSS详解 （二） 
