X-SPEAC空间大改造[不断更新中]~！[都来看看，交流下啊]

sea9413

X-space空间开通了一段时间了~`不知道大家注意了么~！自带的摸班只有那么几个。用的人那么多 ，显现不出个性来~！:q78;<br />是否对于X-space单调且数量少的模版感觉不爽了？Q-zone有着大量漂亮的模版，其实我们可以“借”过来<br /><br />首先 登陆QQZONG（什么你不知道？那你就不要看下面了）<br />这时，点击“装扮空间”——“皮肤”在皮肤当中，选择你想要的皮肤文件缩略图上点击鼠标“右键”——“属性”我们可以获得如图所示图片地址<br /><br /><img src="/images/newpic/2007/4/newimg_2150_20070416174501_1.jpg" border=0 /><br /><br />但是这并不是我们最终需要的背景图片，这时我们需要将图中的地址修改一下： <br /><br /> <br /><br />原地址：<a href="http://imgcache.qq.com/qzone/" target="_blank">http://imgcache.qq.com/qzone/</a>item/pre/1/5457.gif<br /><br />修改为：<a href="http://imgcache.qq.com/qzone/" target="_blank">http://imgcache.qq.com/qzone/</a>space_item/orig/1/5457.gif<br />需要修改的就是红色字段部分，这样，我们便得到了我们最终所需要的图片及图片地址<br /><br />打开你的空间，选择好你想要的模版之后<br /><br />点击“编辑”——“样式表”，我们现在所需要的就是替换<br /><br />注意以下以[白底黑字]为摸版（我开始看到这些技巧时候乱用出现很多错误，最后发现这段改造方法只适合白底黑字的摸版。而其他的摸版只要改图片连接就可以了，但是效果不好。我建议论坛开通一个讨论美化X-SPEAC的地方来讨论一下）<br /><br /><br />原代码为：<br /><br />/*************************************************************/<br />/**&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;**/<br />/**&nbsp; &nbsp;X-Space V1.0 官方模板 Simple Text.Sideright&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;**/<br />/**&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;**/<br />/**&nbsp; &nbsp;(C) 2001-2006 Comsenz Technology Ltd.&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;**/<br />/**&nbsp; &nbsp;<a href="http://x-space.discuz.net" target="_blank">http://x-space.discuz.net</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;**/<br />/**&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;**/<br />/*************************************************************/<br /><br /><br />/*************************************************************/<br />/********************************************* 基本布局风格 **/<br />/*************************************************************/<br />body {<br /> background: #FFF none;<br />}<br /><br /><br />/*最外层容器*/<br />.wrap {<br /> background: #FFF none;<br /> border: none;<br /> margin: 0;<br /> width: 100%;<br />}<br /><br /><br />/*************************************************************/<br />/************************************************* 顶部风格 **/<br />/*************************************************************/<br /><br /><br />#header {<br /> background: none;<br /> border-bottom: 1px solid #DDD;<br /> height: 102px;<br />}<br /><br /><br />#poweredby {<br /> background: #333;<br /> height: 22px;<br />}<br />#poweredby a {<br /> color: #666;<br />}<br />#poweredby a:hover {<br /> color: #FFF;<br />}<br /><br /><br />/*Space标题*/<br />#spacename * {<br /> color: #333;<br />}<br /><br />/*导航*/<br />#menu {<br /> background: none;<br /> width: 600px;<br /> height: 80px;<br />}<br /><br />#menu ul {<br /> margin-top: 59px;<br />}<br /><br />#menu li {<br /> border: 1px solid #DDD;<br /> border-bottom: none;<br /> margin-right: 0.2em;<br />}<br /><br />#menu li a { <br /> background: #F5F5F5 none !important;<br /> color: #333;<br /> padding: 0;<br /> line-height: 20px;<br /> width: 60px;<br />}<br /><br />#menu a:hover {<br /> color: #666;<br /> background: #DDD&nbsp;&nbsp;!important;<br />}<br /><br />/*主体容器*/<br />#content {<br /> background: none;<br /> width: 100%;<br /> border-bottom: 1px solid #DDD;<br />}<br /><br /><br />/*************************************************************/<br />/*********************************************** 侧边栏风格 **/<br />/*************************************************************/<br /> <br /><br />替换为： <br /><br /> <br /><br />/*************************************************************/<br />/**&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;**/<br />/**&nbsp; &nbsp;X-Space V1.0 官方模板 Spring&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;**/<br />/**&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;**/<br />/**&nbsp; &nbsp;(C) 2001-2006 Comsenz Technology Ltd.&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;**/<br />/**&nbsp; &nbsp;<a href="http://x-space.discuz.net" target="_blank">http://x-space.discuz.net</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;**/<br />/**&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;**/<br />/***************************a**********************************/<br /><br /><br />/*************************************************************/<br />/********************************************* 基本布局风格 **/<br />/*************************************************************/<br />html {&nbsp; &nbsp;&nbsp; &nbsp; <br /> background: transparent no-repeat left bottom;<br />}<br />body {&nbsp; &nbsp;<br />filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://imgcache.qq.com/qzone/space_item/orig/1/5457.gif, sizingMethod=scale);width:1003px;height:591px; <br /> background-color: #FFFFFF;<br /> voice-family: &quot;\&quot;}\&quot;&quot;;<br /> voice-family: inherit;<br /> background: transparent no-repeat left bottom fixed;<br /> scrollbar-arrow-color: #CACACA;<br /> scrollbar-face-color: #F9F9F9;<br /> scrollbar-darkshadow-color: #CACACA;<br /> scrollbar-highlight-color: #F9F9F9;<br /> scrollbar-3dlight-color: #CACACA;<br /> scrollbar-shadow-color: #F9F9F9;<br /> scrollbar-track-color: #FFF;<br />}<br /><br />/*最外层容器*/<br />.wrap {<br /> border: none;<br /> background: transparent url(http://imgcache.qq.com/qzone/space_item/orig/6/5286.gif) no-repeat left bottom;<br /> width: auto;<br />&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;height: 200px;<br /> margin: 0;<br /> padding-bottom: 20px;<br />}<br /><br /><br />/*************************************************************/<br />/************************************************* 顶部风格 **/<br />/*************************************************************/<br /><br /><br />#header {<br /> background: transparent no-repeat left top;<br /> height: 70px;background-color: #E1E0E0;<br />&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;width:705px;position:absolute;left:61px;top:36px;<br />}<br /><br /><br />/*标题*/<br />#guide{position: absolute;left:350px;}<br />#spacename {<br />&nbsp; &nbsp;position: absolute;left:-10px;top:-30px;<br />}<br />#spacename&nbsp;&nbsp;*{<br />&nbsp; &nbsp;color: #000;<br />}<br />#poweredby a {<br /> color: #7186B0;<br />}<br />#poweredby a:hover {<br /> color: #333;<br />}<br /><br /><br />/*导航*/<br />#menu {<br /> width: 80px;<br /> height: 300px;<br /> left: 700px;<br /> top: 50px;<br /> background: no-repeat left bottom;<br />&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; position: absolute;<br />}<br />#menu a {<br />&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;color: #000;<br />}<br /><br />#menu li a {<br /> border: 1px dashed #7b7b7b;<br /> color:&nbsp;&nbsp;#fff;font-weight:bold; <br /> padding-top: 12px;<br />&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;padding-left:10px;<br /> height: 26px;<br /> background: #000 !important;<br /> opacity: 0.5;<br /> filter: alpha(opacity=50);<br />}<br />#menu a:hover {<br /> color: #000;font-weight:bold; <br /> background: #E1E0E0 !important;<br /> opacity: 0.5;<br /> filter: alpha(opacity=50);<br />}<br /><br />/*主体容器*/<br />#content {<br /> overflow:scroll;<br /> overflow-x:hidden;<br /> width: 703px;height:450px;<br />&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;position:absolute;left:61px;top:70px;background: #fff repeat-y left;<br />}<br /><br /><br />/*************************************************************/<br />/*********************************************** 侧边栏风格 **/<br />/*************************************************************/<br /> <br />上面三个红色字段，依次为：<br /><br /> <br /><br />①背景图片地址：填入我们刚才通过修改获得的图片地址<br /><br /> <br /><br />②挂件图片地址：挂件图片地址获得方法和背景图片完全相同，这里我就不再阐述，自己动手一下。<br /><br /> <br /><br />③主体容器宽高：因为Q-zone有的皮肤所给的显示日志内容的空间（就是QQ空间中的白色部分）不同，如遇到日志内容超出图片显示区域情况，相应的修改width宽和height高的数值，以达到完全适用的效果:q69;<br /><br /><br />另外，“主页面”、“索引页面”、“内容页面”内容也需做一定小修改以达到完美效果，这里我就不详细叙述。因为，如果你已经修改上述三个内容的化，整理起来有可能较为复杂也可能很得心应手。（我现在是头昏的，好多都不懂只有依葫芦画瓢）<br /><br /><br /><br /><br />一、添加背景图。<br />　　适用范围：主显示区域为800＊600的SPACE模板，这样在＞＝1024＊768的分辨率的情况下，两面的空白空间我们就可以定义喜欢的图片。<br />　　具体设置：为了让我们的设置在所有页面中都产生效果，我们用编辑注册表的方法。<br />　　　　　　　1、进入个人空间管理平台，选择[模板]，对当前使用的模板进行[编辑]操作。这时我们可以看到四个标签：[主页面]　[索引页面]　[内容页面]　[样式表]。我们选择[样式表]。<br />　　　　　　　2、这里的样式表的内容由于使用不同的模板会有所不同。因为不同的模板的显示是不一样的，对其中的body进行修改。<br />body {<br />background: #000000 url('http://bbs.cpcw.com/blog/attachments/2006/05/2006524_d1adb3204e8577ed66c5280d31e46a09.gif') no-repeat fixed right top;<br />} <br /><br /><br />&nbsp; &nbsp;&nbsp; &nbsp;解释一下，其中的background:#000000为定义背景颜色的代码。<br />&nbsp; &nbsp;&nbsp; &nbsp;<img src="/images/newpic/2007/4/newimg_2150_20070416174501_2.gif" border=0 /> 是我预先上传的图片文件。<br />　　　重点说一下后面的几个参数no-repeat（不重复） fixed right（右对齐） top（顶边对齐）<br /><br />&nbsp; &nbsp;&nbsp;&nbsp;只要预先做好图片，考虑好大小，在SPACE中上传，根据自己布局的需要，你就可以做出你想要的效果。<br />　　　二、动态鼠标效果。<br />　　　这个其实很简单，只要找到相应的ANI文件就可以了，步骤同上，也是加在body里面，<br />　　 body {<br />CURSOR: url('http://kangsky.org/5.cur');<br />} <br />注意 一定要CUR格式的~！！！<br /><br /><br /><br />大家试试手工改造一下让你的空间更有个性[兰色的2段是在论坛找到的谢谢了~~发上来大家看看]<br /><br />还有兰色经典是没有代码的我想发挥的空间更大~~希望大家来交流以下让空间美化更完美！<br />:q66;<br /><a href="http://bbs.cpcw.com/blog/?uid/314013" target="_blank">我的空间大家可以看看</a><br /><br /><a href="http://www.yanjiao.com/bbs/viewthread.php?tid=38150" target="_blank">http://www.yanjiao.com/bbs/viewthread.php?tid=38150</a><br />这个网站 大家在去看看 可能有帮助~~~`<br /><br />还有这个是提供颜色的代码&nbsp;&nbsp;大家看看 方便点<br /><a href="http://x-space.discuz.net/space/html/95/269995_itemid_15082.html" target="_blank">http://x-space.discuz.net/space/html/95/269995_itemid_15082.html</a><br /><br />[<i> 本帖最后由 lwpq 于 2006-7-23 09:00 编辑 </i>]