【冬宫学府】【教程】进阶版泥潭个人空间Css代码装修技巧教程丨UI制作篇

【冒险开始！】

【点击音频开启一场RPG之旅！】

如果无法播放，请点击此处在新窗口打开

【八方旅人原声带】

【点我或上方图片跳转至大河内太的空间】

此主题为泥潭个人空间装修的

“图文/UI/特效制作”Part

将会在文章最后附带一份Css基础模板

以及其的使用方式！

我将会以我自己空间的部分模板作为教学示范，

教会大家如何在Css模板里制作各种样式以及特效的文字UI

方便大家更加花样多变的玩转自己的个人空间！

.

【此操作不会占用服务器资源，但如若上传的图片过大，进你空间可能会加载不出来图片】

.

【声明】

这个功能对网站并没有危害，仅只能自定义个人空间的CSS样式，对网站数据并不构成威胁。

（但是请勿试图用此教程隐藏脏东西，不然你会被查房脚本单向还原+加倍视奸还请注意.JPG）

【若教程不妥当 请联系我删除主题！】

这是此文章的结构整理

你将会看到

【壹】准备工作

【贰】图片/文字处理，特效制作

【叁】打包上传

【肆】Css泥潭空间代码（基础框架模板）

踏上冒险征途的第一步吧！

【壹】准备工作

你需要准备的东西有：

①任意版本PhotoShop（可替换任意图片处理软件）

②各式各样的Windows字体（选择自己喜欢的即可）

③一个自己的图床账号（我个人使用的是聚合图床）

④喜欢的各式各样的UI素材，背景底图图片等（可以塞很多）

【贰】图片/文字处理，特效制作

我会用我个人空间的

“赠礼板块”与“好友板块”

为示范进行UI的教学！

.

【好友板块】

让我们先抛开一切无关的内容

让空间白纸化

此时显示的图层叫做“底图”（重点）

如你所见

我选择了画面左侧中央的“城池”

作为好友板块的触发点

那么我就在我喜欢的位置用喜欢的文字预设出文字本身

命名为“眺望之城”

即可完成一个最基本的文字UI指向组

是不是感觉很简单啊？

【文字激活发光（可选）】

第一步：选中你已经做好的文字

右键复制图层并粘贴。命名为“眺望之城（激活）”

第二步：双击“眺望之城（激活）”图层或右键此图层选择“混合选项”

给予它一个“描边（像素随意，透明度随意）”效果

随后再给予它一个

“外发光（不透明度建议50-70之间，拓展和大小根据你的像素大小自由调整）”效果

你就能得到这样的激活发光版文字

【图片激活发光（可选）】

选中“底图”图层

使用图像处理软件的“套索”或任意俗称的“抠图”工具

将图片从底图图层框选出来

（教程仅做演示，如需使用建议能抠多精致就抠多精致）

随后右键被框选的部分

选择“通过拷贝的图层”

这样你就能得到一个单独被抠出来的建筑物了！

随后仅需给予它一个

“外发光（不透明度建议50-70之间，拓展和大小根据你的像素大小自由调整）”效果

就能变为图中激活的样子。

.

【进阶可选-通过html自定义js结构+Css代码添加的弹窗UI】

（此部分图片制作简单，但代码实装难度有门槛，不会代码可以直接跳过此部分）

（仅想单独制作好友栏UI也可以选择性观看此部分）

插入一张你喜欢的“好友栏背景图”

为其添加你想要的效果

我自己选用的效果如下：

以及

为你的好友们准备一个漂亮的ID框和头像框

（你当然可以自己画，但是我的建议是去开源网站找免费的现成的.JPG）

然后在代码部分把好友的头像和ID分别绑进这两个框里就行

【赠礼板块】

图像/文字的发光与否

以及抠图流程都与好友部分完全一致

重复一次操作即可复刻。

【进阶可选-通过超链接与html代码实现自定义勋章赠礼UI】

（此部分图片制作简单，但代码实装难度有门槛，不会代码可以直接跳过此部分）

（仅想单独制作赠礼部分UI也可以选择性观看此部分）


一张“赠礼底图”


为其添加想要的各种Diy装饰


给你想放的勋章Diy自定义文字
并不是一定要和原文描述一致，
请随意自由发挥~

文字使用效果为：

描边

然后在代码部分把赠礼的超链接和勋章的Gif定位到图中准备好的勋章空位即可。

【叁】打包上传

简单的将你的图片组合导出为整张

或者拆成你需要的很多部分皆可，

将他们上传至图床网站，

以便你在后续随时通过替换代码的链接来更换图文

推荐的整合方式Belike：

即没事不要大量拆分图层，没有特殊需求 直接合并把处理好的文字和底图图层“合并”即可

.

【肆】Css泥潭空间代码（基础框架模板）

基础模板可以去这篇开源的免费文章寻找你喜欢的模板

discuz论坛自定义个人空间css样式

.

使用方式：

打开你的“留言板”

选择F12或自定义快捷键呼出“审查元素”

在“审查元素”中找到“控制台”

.

在“控制台”中键入你从上方帖子里获得的js脚本

.

如果你的操作正常

那么此时将会弹出一个输入框

提示你注入css代码

在框里输入你在上方模板分享帖里获得的模板

随后刷新自己的空间即可成功实现css空间装修！

（若无弹窗，请重头进行第肆部分的教程）

.

【如何将模板的图片替换为上方教程做完的图片？】

用记事本新建文本后，

将模板的css代码粘贴进去

保存记事本为“我的空间样式.css”

随后再次以记事本打开此css文件

找到里面的图片链接

(一般来讲都会是xxxxxx.jpg xxxxxx.png这样的链接)

将其替换为你自己制作的图片，

记得保存文件！

随后重新在控制台的css代码里注入一次就可以了

以后的所有图片更换都是简单的重复这一步即可。

.

完成所有装修之后

【你可能用得到的Gamemale链接】

1.我的留言板：

https://www.gamemale.com/home.php?mod=space&uid=你的UID&do=wall

2.我的个人信息：

https://www.gamemale.com/home.php?mod=space&uid=你的UID&do=profile

.

【写在后面】

教程仅起到一个抛砖引玉的作用，

如有更多更好的建议以及模板，

也欢迎大家一起分享出来进行魔改.JPG

长篇教程不易，期待你的追随催更！

.

【特别鸣谢】

感谢老公福狸为了帮我实装PSD的所有预期

而把自己做得bfnz。

我个人空间的Css代码全部由福狸施工

非常好福狸 爱来自大河内太！

❤❤@福黎❤❤

楼主的空间画面太高级了，像本人就是懒人，懒得对架构和背景做大修改

好高技术力的空间，这地图风格有点像在玩游戏的感觉

oops！紧急码一下，有时间了就开始装修自己的狗窝惹！

收藏之！抽空细细研究，通过这个思路完成一份，宝可梦地图为蓝版的空间

我的天啊，太神了，马上收藏学习起来！！！

楼主的空间也太好看了，有机会可以学一下怎么弄~

真的很厉害..一直想装修一下抽个时间对着帖子一步一步来

大河内老师的教程真的很详细了，可惜我还是看不太懂，空间装修总是乱糟糟的，完全没有审美感

代码好学审美难学。想做一个漂亮的空间真不容易。

大佬也太厉害了吧收藏了以后有机会学习一下装饰一下空间

玛雅，一看就是大工程，我直接放弃靴靴

大河内设老师我yyds，我愿称其为泥潭最强空间_(:з)∠)_

大佬真的太强了，这个空间能给100分的话，我会给10000000分，这就是大佬因得的

感觉到这里脑子就要炸了，直接放弃靴靴

看了楼主的空间，顿时觉得不知道自己这两年玩的是什么论坛太强了

omg偶遇泥潭代码大佬 拼尽全力无法战胜

好了，收藏说明我搞了（

太厉害了，我感觉我可能有点懒的做这种，但是好评和收藏是一定的

阿门(´×ω×`)之前送楼主勋章时就有找了好一会在那里咧～