(pw8个人中心风格制作教程1.docxVIP

个人中心风格体系说明个人中心风格体系成员：个人中心首页、我的主页、消息、任务、道具、设置。所以，做一套风格，体系内的所有界面都会跟着改变。目录结构，风格所在目录u/themes其中一个文件夹为一个风格，一个风格里面的必要元素有：images图片目录 css.htm 的层叠式样式表，页面htm为可选文件，如果本目录里没有，则调用default的，有着使用本目录的。个人中心风格制作步骤你要有新风格的效果图，或者仿制的对象。找到一个已有的风格，如default,复制一个，把里面除css.htm外其他htm文件删除。修改文件夹名称，改成你需要的风格名，如blue打开文件夹里面的images，我们会发现有一些图片，非常少，所以很容易分辨出作用head_bg.jpg整个风格头循环的背景head_pic.png风格头部的点缀inforbox.jpg发布新鲜事的背景textarea.png发布新鲜事的输入框pub.png发布新鲜事按钮preview.jpg风格效果图，大小推荐与已有尺寸一样，400×80homebg.png首页右侧栏背景menubar.png设置等左侧栏背景navBcur.png左侧了激活效果navC.png应用中的tab效果logo.png风格的logo，根据自己的需求调整我们先要做的就是，弄出相关的图片，替换上面的图片，如背景，侧栏等。把风格复制到本地测试环境上，到后台进行添加中文名。再到前台我的主页=》空间装扮=》风格皮肤，我们会发现新添加的已经出现了，进行下选择选择一下，即会显示之前已经替换图片产生的效果图片已经出来了，那么我们就可以调整细节问题了。用编辑器打开css.htm只有调整这里的颜色参数那么，整个风格也会跟着变整个风格就会调整起来了。但是参数也不是万能的，因为每个风格都有非常个性话的需求，如顶部导航，我的主页导航，2处虽然用透明图片来处理了，但是在深色调上还是会有些问题，所以我们需要单独添加样式来进行处理，顶部导航，因为深色背景，所以灰色的链接颜色会跟背景不搭调，这里我添加了几段代码，用于处理这个问题.topwarp{background:url(u/themes/$uskin/images/top_bar.png) no-repeat;}顶部导航背景替换到风格包里，就是说在这个风格包里增加图片top_bar.png的图片，为png24半透明效果。.topwarp i{background:#65a0bc;}顶部导航竖线的颜色.topwarp a{color:#7fcef4;}顶部导航文字链接颜色.navA li a{color:#7fcef4;}我的主页导航文字颜色.navA{background:none;}去除背景.navA ul{background:url(u/themes/$uskin/images/top_bar.png) no-repeat;}使用跟顶部通一张图，不用再重复。.place{background:url(u/themes/$uskin/images/place.png);}处理个人空间首页头部的那个半透明图片。.place a.s5{color:#fff;}里面的颜色这样效果就出来了感觉月亮太干扰了，又处理了下，把它去掉了，效果如下内容区域的颜色都是比较白搭的，所以不用进行处理，整个风格看起来就很ok了～如果要分享，那直接把目录复制出来，安装步骤也是一样，直接复制到论坛根目录u/themes里，然后再到后台添加下中文名在前台就可以显示了。