啊啊啊...我家宝贝客串的MV终于出了个不完整版...

真帅帅...居然可以拍出台湾感...亲爱的给我好大惊喜^^

不要买街边卖的小鸡小鸭.

不要买太小难养的小动物.

那些太小的.刚出生没好久的小动物.

不群体养或者不在妈妈的照顾下.买回家养大多会死.

希望大家在喜欢小动物的同时.想想这个问题.

我现在真的好后悔.我真的不该买那2只小鸭子.

如果我没有买回家.也许现在她们还活着.

不说了.希望大家引以为戒.

真是心情极度难受.烦.!!!

再也不想吃鸭子了...

下面进行具体修改

一，首先是准备下工具 比如取色器，做图软件 （比如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/风格名

了解完，那就是相对应的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; /*左边框留空白

首先得认识下6.0整体构架里的CSS代码控制的部位(个人的力量难免有限，若有不到之处，请及时指出，以便更正)

textarea 大输入框的样式 （专门写内容的）

input 小输入框的样式，如登陆框

select 选择性的框 如果主题浏览起的：快速跳至

.tal{text-align:left} 文字靠左显示

.tac{text-align:center} 文字居中显示

.tar{text-align:right} 文字靠右显示

.fr{float:right} 整体框价向右显示 <一般作用于 div的构架>

.fl{float:left} 整体框价向左显示

a{text-decoration:none;color:$linkcolor} 全局连接的样式 （一般后台风格编辑里的 全局链接颜色 就是）

a:hover{text-decoration:underline;} 鼠标移动到连接上显示的样式，可加颜色 或者其他样式

.abtn 对应的样式是 字数检查 恢复数据

.gray 次要文字颜色 如 版块介绍

.f_one 首页版块里的第一颜色

.f_two 首页版块里鼠标移动到上面所显示的颜色

.t_one 主题列表版块里的第一颜色

.t_two 主题列表版块里鼠标移动到上面所显示的颜色

.r_one 主题浏览里的主题内容背景

.r_two 主题浏览里用户信息的背景

.btn 按钮的样式

#header 头部宽度样式 （后台风格编辑里的 头部和尾部表格宽度设置 ）

.toptool 头部导航样式

.toptool span 头部导航文字样式

#infobox 登陆框里的背景样式 （包含公告栏）

#notice 公告栏样式

#notice a 可修改里面的 color:#fff; 实现 公告字体颜色变换

.guide 重要栏目导航 （如 社区服务）

.t 风格里所有的框架边框样式 便是：表格外边框颜色

.h 表格标题栏样式 可修改背景 框大小

.tr2 表格副标题栏 可修改背景 框大小

.tr4 首页 在线用户 标题栏样式

.menu 下拉栏目样式 如 社区服务 下拉

.menu a 下拉显示第一颜色

.menu a:hover 鼠标移动到 显示的样式

.pages 分页代码

#footer 整体底部样式，同上面的 #header 一起受调整于 后台风格编辑里的 头部和尾部表格宽度设置

#main 整体表格样式