【冬宫学府】【教程】进阶版泥潭个人空间Css代码装修技巧教程丨UI制作篇
本帖最后由 大河内太 于 2024-12-24 18:33 编辑【冒险开始！】【点击音频开启一场RPG之旅！】https://dlink.host/musics/aHR0cHM6Ly9vbmVkcnYtbXkuc2hhcmVwb2ludC5jb20vOnU6L2cvcGVyc29uYWwvc3Rvcl9vbmVkcnZfb25taWNyb3NvZnRfY29tL0VhRnBpcnJlbmVKRGxHSXRtTl9XS3BZQjN2TV9MMjFRTURCTTdyekRrS1ZiRVE.mp3【八方旅人原声带】
https://pic.imgdb.cn/item/676a6b05d0e0a243d4e9372e.gif
【点我或上方图片跳转至大河内太的空间】
https://img.gamemale.com/album/202411/07/135135lqacrzzh733cc6kh.png此主题为泥潭个人空间装修的“图文/UI/特效制作”Part将会在文章最后附带一份Css基础模板以及其的使用方式！我将会以我自己空间的部分模板作为教学示范，教会大家如何在Css模板里制作各种样式以及特效的文字UI方便大家更加花样多变的玩转自己的个人空间！.【此操作不会占用服务器资源，但如若上传的图片过大，进你空间可能会加载不出来图片】.【声明】这个功能对网站并没有危害，仅只能自定义个人空间的CSS样式，对网站数据并不构成威胁。（但是请勿试图用此教程隐藏脏东西，不然你会被查房脚本单向还原+加倍视奸还请注意.JPG）【若教程不妥当 请联系我删除主题！】
这是此文章的结构整理你将会看到【壹】准备工作【贰】图片/文字处理，特效制作【叁】打包上传【肆】Css泥潭空间代码（基础框架模板）
踏上冒险征途的第一步吧！
https://img.gamemale.com/album/202411/07/135135odstdj5ppptddp6t.png【壹】准备工作
你需要准备的东西有：
①任意版本PhotoShop（可替换任意图片处理软件）②各式各样的Windows字体（选择自己喜欢的即可）③一个自己的图床账号（我个人使用的是聚合图床）④喜欢的各式各样的UI素材，背景底图图片等（可以塞很多）https://img.gamemale.com/album/202411/07/135135odstdj5ppptddp6t.pnghttps://www.helloimg.com/i/2024/12/24/676a70b4eb28e.gif【贰】图片/文字处理，特效制作
我会用我个人空间的“赠礼板块”与“好友板块”为示范进行UI的教学！.【好友板块】让我们先抛开一切无关的内容让空间白纸化此时显示的图层叫做“底图”（重点）https://www.helloimg.com/i/2024/12/24/676a714eafef4.png如你所见我选择了画面左侧中央的“城池”作为好友板块的触发点
https://www.helloimg.com/i/2024/12/24/676a721eb1c40.png那么我就在我喜欢的位置用喜欢的文字预设出文字本身命名为“眺望之城”即可完成一个最基本的文字UI指向组是不是感觉很简单啊？
【文字激活发光（可选）】第一步：选中你已经做好的文字右键复制图层并粘贴。命名为“眺望之城（激活）”第二步：双击“眺望之城（激活）”图层或右键此图层选择“混合选项”给予它一个“描边（像素随意，透明度随意）”效果随后再给予它一个“外发光（不透明度建议50-70之间，拓展和大小根据你的像素大小自由调整）”效果你就能得到这样的激活发光版文字https://www.helloimg.com/i/2024/12/24/676a73a7665b8.png
【图片激活发光（可选）】https://www.helloimg.com/i/2024/12/24/676a742256149.png选中“底图”图层使用图像处理软件的“套索”或任意俗称的“抠图”工具将图片从底图图层框选出来（教程仅做演示，如需使用建议能抠多精致就抠多精致）随后右键被框选的部分选择“通过拷贝的图层”这样你就能得到一个单独被抠出来的建筑物了！https://www.helloimg.com/i/2024/12/24/676a7542ba381.png
https://www.helloimg.com/i/2024/12/24/676a754395c11.png随后仅需给予它一个“外发光（不透明度建议50-70之间，拓展和大小根据你的像素大小自由调整）”效果就能变为图中激活的样子。.【进阶可选-通过html自定义js结构+Css代码添加的弹窗UI】（此部分图片制作简单，但代码实装难度有门槛，不会代码可以直接跳过此部分）（仅想单独制作好友栏UI也可以选择性观看此部分）
插入一张你喜欢的“好友栏背景图”https://www.helloimg.com/i/2024/12/24/676a77786a653.png
为其添加你想要的效果https://www.helloimg.com/i/2024/12/24/676a77f897af0.png
我自己选用的效果如下：
https://www.helloimg.com/i/2024/12/24/676a785d3bb88.png
以及
https://www.helloimg.com/i/2024/12/24/676a789e86a5f.png
为你的好友们准备一个漂亮的ID框和头像框（你当然可以自己画，但是我的建议是去开源网站找免费的现成的.JPG）
然后在代码部分把好友的头像和ID分别绑进这两个框里就行
【赠礼板块】图像/文字的发光与否以及抠图流程都与好友部分完全一致重复一次操作即可复刻。
【进阶可选-通过超链接与html代码实现自定义勋章赠礼UI】（此部分图片制作简单，但代码实装难度有门槛，不会代码可以直接跳过此部分）（仅想单独制作赠礼部分UI也可以选择性观看此部分）
一张“赠礼底图”
https://www.helloimg.com/i/2024/12/24/676a7a497881e.png
为其添加想要的各种Diy装饰
https://www.helloimg.com/i/2024/12/24/676a7a48d2a1d.png
给你想放的勋章Diy自定义文字
并不是一定要和原文描述一致，
请随意自由发挥~https://www.helloimg.com/i/2024/12/24/676a7a495ccdc.png
https://www.helloimg.com/i/2024/12/24/676a7a4983281.png文字使用效果为：描边
然后在代码部分把赠礼的超链接和勋章的Gif定位到图中准备好的勋章空位即可。
https://img.gamemale.com/album/202411/07/135135odstdj5ppptddp6t.png
【叁】打包上传
简单的将你的图片组合导出为整张或者拆成你需要的很多部分皆可，将他们上传至图床网站，以便你在后续随时通过替换代码的链接来更换图文
推荐的整合方式Belike：https://www.helloimg.com/i/2024/12/24/676a7c3768339.pnghttps://www.helloimg.com/i/2024/12/24/676a7c37741f7.png
即没事不要大量拆分图层，没有特殊需求 直接合并把处理好的文字和底图图层“合并”即可.https://img.gamemale.com/album/202411/07/135135odstdj5ppptddp6t.png【肆】Css泥潭空间代码（基础框架模板）基础模板可以去这篇开源的免费文章寻找你喜欢的模板discuz论坛自定义个人空间css样式.使用方式：打开你的“留言板”选择F12或自定义快捷键呼出“审查元素”在“审查元素”中找到“控制台”.在“控制台”中键入你从上方帖子里获得的js脚本https://www.helloimg.com/i/2024/12/24/676a7e9505663.pnghttps://www.helloimg.com/i/2024/12/24/676a7eccbc27a.png
.
如果你的操作正常那么此时将会弹出一个输入框提示你注入css代码在框里输入你在上方模板分享帖里获得的模板随后刷新自己的空间即可成功实现css空间装修！（若无弹窗，请重头进行第肆部分的教程）.【如何将模板的图片替换为上方教程做完的图片？】用记事本新建文本后，将模板的css代码粘贴进去保存记事本为“我的空间样式.css”随后再次以记事本打开此css文件找到里面的图片链接(一般来讲都会是xxxxxx.jpg xxxxxx.png这样的链接)将其替换为你自己制作的图片，记得保存文件！随后重新在控制台的css代码里注入一次就可以了以后的所有图片更换都是简单的重复这一步即可。.https://img.gamemale.com/album/202411/07/135135zd8hatta7hz8ibb7.png完成所有装修之后【你可能用得到的Gamemale链接】1.我的留言板：https://www.gamemale.com/home.php?mod=space&uid=你的UID&do=wall2.我的个人信息：https://www.gamemale.com/home.php?mod=space&uid=你的UID&do=profile.【写在后面】教程仅起到一个抛砖引玉的作用，如有更多更好的建议以及模板，也欢迎大家一起分享出来进行魔改.JPG长篇教程不易，期待你的追随催更！.【特别鸣谢】感谢老公福狸为了帮我实装PSD的所有预期而把自己做得bfnz。我个人空间的Css代码全部由福狸施工非常好福狸 爱来自大河内太！
❤❤@福黎❤❤
https://img.gamemale.com/album/202411/07/135137qbm48d9s5vfcyfus.png 楼主的空间画面太高级了，像本人就是懒人，懒得对架构和背景做大修改 好高技术力的空间，这地图风格有点像在玩游戏的感觉:$ oops！紧急码一下，有时间了就开始装修自己的狗窝惹！ 收藏之！抽空细细研究，通过这个思路完成一份，宝可梦地图为蓝版的空间{:6_200:} 我的天啊，太神了，马上收藏学习起来！！！ 楼主的空间也太好看了，有机会可以学一下怎么弄~ 真的很厉害..一直想装修一下抽个时间对着帖子一步一步来{:6_195:} 大河内老师的教程真的很详细了，可惜我还是看不太懂，空间装修总是乱糟糟的，完全没有审美感:'( 代码好学审美难学。想做一个漂亮的空间真不容易。 大佬也太厉害了吧{:5_126:}收藏了以后有机会学习一下装饰一下空间 玛雅，一看就是大工程，我直接放弃靴靴 大河内设老师我yyds，我愿称其为泥潭最强空间_(:з)∠)_ 大佬真的太强了，这个空间能给100分的话，我会给10000000分，这就是大佬因得的 感觉到这里脑子就要炸了，直接放弃靴靴 看了楼主的空间，顿时觉得不知道自己这两年玩的是什么论坛:shutup:太强了 {:5_119:}omg偶遇泥潭代码大佬 拼尽全力无法战胜 好了，收藏说明我搞了（ 太厉害了，我感觉我可能有点懒的做这种，但是好评和收藏是一定的{:6_184:} 阿门(´×ω×`)之前送楼主勋章时就有找了好一会在那里咧～