【蛇年福卡】账本美化包

风岚发表于 2025-2-7 21:04:33

本帖最后由风岚于 2025-2-17 02:23 编辑

根据@牛牛要白给了提供的PSD，做了一个美化版本给大家端了上来
这是悬赏贴链接：https://www.gamemale.com/thread-154637-1-1.html

只进行了样式的添加，所以只需要在样式里新增代码即可，找到存放样式的地方
https://pic1.imgdb.cn/item/67a6012bd0e0a243d4fc9ba0.png

然后下滑到最后一句，然后在此粘贴样式即可
https://pic1.imgdb.cn/item/67a6015ed0e0a243d4fc9baa.png

以下是CSS代码
               .container {
                  background-image: url('https://pic1.imgdb.cn/item/67a250e4d0e0a243d4fbd912.png');
                  background-attachment: fixed;
                  background-size: cover;
                  background-position: center;
                  background-repeat: no-repeat;
               }
               #tableBox>h3{
                  font-family: STXinwei;
                  text-shadow: -1px -1px 0 white,1px -1px 0 white,-1px 1px 0 white,1px 1px 0 white,0 0 10px white,0 0 20px white;
               }
               fieldset {
               background: rgba(255, 255, 255, 0.6);
               }
               #fixedBox {
               background: rgba(255, 255, 255, 0.6);
               }
               th {background-color: transparent;}
               tr:nth-child(even) {background-color: transparent; transition: all 0.2s;}
               tr:nth-child(even):hover {background-color: #d3d3d3; transition: all 0.2s;}

               #tableBox table{
               position: relative;
               border: 0;
               background: rgba(255, 255, 255, 0.6);
               border-radius: 10px;
               border: none;
               outline: 2px dashed #3a3a3a;
               outline-offset: -7px;
               transform: translateZ(0);
               padding: 13px 15px;
               }
               #tableBox table:first-of-type{
               width: 750px;
               padding-top: 88px;
               }
               #tableBox table:first-of-type th,
               #tableBox table:first-of-type td{
               width: 90px;
               padding: 0;
               }
               #tableBox table:first-of-type thead tr{
               width: 720px;
               position: absolute;
               top: 15px;
               }
               #tableBox table:first-of-type thead tr th{
               padding-top: 6px;
               height: 72px;
               vertical-align: top;
               background-image: url(https://img.gamemale.com/album/202502/05/201719ntn199sq2cllxri1.png.thumb.jpg);
               background-size: 68px;
               background-position: center;
               background-repeat: no-repeat;
               position: relative;
               }
               #tableBox table:first-of-type thead tr th:before{
               content: '';
               position: absolute;
               display: block;
               background-image: url(https://img.gamemale.com/album/202502/05/201723n2m294fs6swa6jxm.png.thumb.jpg);
               width: 20px;
               height: 22px;
               background-size: 100%;
               left: 50%;
               transform: translateX(-50%);
               top: -5px;
               background-repeat: no-repeat;
               }
               #tableBox table:first-of-type thead tr th:nth-of-type(2):before{
               background-image: url(https://img.gamemale.com/album/202502/05/201722dvng2ffz2zpqpv2p.png.thumb.jpg);
               }
               #tableBox table:first-of-type thead tr th:nth-of-type(3):before{
               background-image: url(https://img.gamemale.com/album/202502/05/201721i9jc1ldmbnnjyjnj.png.thumb.jpg);
               }
               #tableBox table:first-of-type thead tr th:nth-of-type(4):before{
               background-image: url(https://img.gamemale.com/album/202502/05/201724kvepa1p0pph9xeaj.png.thumb.jpg);
               }
               #tableBox table:first-of-type thead tr th:nth-of-type(5):before{
               background-image: url(https://img.gamemale.com/album/202502/05/201728uztycq1ulgg2343h.png.thumb.jpg);
               }
               #tableBox table:first-of-type thead tr th:nth-of-type(6):before{
               background-image: url(https://img.gamemale.com/album/202502/05/201724zga3c33a3ys3dgc8.png.thumb.jpg);
               }
               #tableBox table:first-of-type thead tr th:nth-of-type(7):before{
               width: 24px;
               background-image: url(https://img.gamemale.com/album/202502/05/201721kcgctbpg3t3c5oo1.png.thumb.jpg);
               }
               #tableBox table:first-of-type thead tr th:nth-of-type(8):before{
               background-image: url(https://img.gamemale.com/album/202502/05/201720g53h8udunzhdz3dh.png.thumb.jpg);
               }
               #tableBox table:first-of-type thead tr th span{
               color: #4e232a !important;
               display: block;
               margin-top: 5px;
               font-family: KaiTi;
               font-weight: bold;
               font-size: 20px;
               text-shadow: -1px -1px 0 rgba(255,255,255,0.5),1px -1px 0 rgba(255,255,255,0.5),-1px 1px 0 rgba(255,255,255,0.5),1px 1px 0 rgba(255,255,255,0.5),0 0 10px rgba(255,255,255,0.5),0 0 20px rgba(255,255,255,0.5);
               }
               #tableBox table:first-of-type td span,#tableBox table:nth-of-type(3) tbody tr td span{
               color: #4e232a !important;
               font-family: KaiTi;
               font-weight: bold;
               text-shadow: -1px -1px 0 rgba(255,255,255,0.5),1px -1px 0 rgba(255,255,255,0.5),-1px 1px 0 rgba(255,255,255,0.5),1px 1px 0 rgba(255,255,255,0.5),0 0 10px rgba(255,255,255,0.5),0 0 20px rgba(255,255,255,0.5);
               }
               #tableBox table:first-of-type thead tr th:nth-child(2) span,#tableBox table:first-of-type td:nth-child(2) span,#tableBox table:nth-of-type(3) tbody tr td:nth-child(5) span,#tableBox table:nth-of-type(3) thead tr th:nth-child(5) span{color: #516358 !important;text-shadow: -1px -1px 0 rgba(191,243,174,0.5),1px -1px 0 rgba(191,243,174,0.5),-1px 1px 0 rgba(191,243,174,0.5),1px 1px 0 rgba(191,243,174,0.5),0 0 10px rgba(191,243,174,0.5),0 0 20px rgba(191,243,174,0.5);}
               #tableBox table:first-of-type thead tr th:nth-child(3) span,#tableBox table:first-of-type td:nth-child(3) span,#tableBox table:nth-of-type(3) tbody tr td:nth-child(6) span,#tableBox table:nth-of-type(3) thead tr th:nth-child(6) span{color: #fbc369 !important;text-shadow: -1px -1px 0 rgba(226,108,69,0.5),1px -1px 0 rgba(226,108,69,0.5),-1px 1px 0 rgba(226,108,69,0.5),1px 1px 0 rgba(226,108,69,0.5),0 0 10px rgba(226,108,69,0.5),0 0 20px rgba(226,108,69,0.5);}
               #tableBox table:first-of-type thead tr th:nth-child(4) span,#tableBox table:first-of-type td:nth-child(4) span,#tableBox table:nth-of-type(3) tbody tr td:nth-child(7) span,#tableBox table:nth-of-type(3) thead tr th:nth-child(7) span{color: #c54523 !important;text-shadow: -1px -1px 0 rgba(220,220,220,0.5),1px -1px 0 rgba(220,220,220,0.5),-1px 1px 0 rgba(220,220,220,0.5),1px 1px 0 rgba(220,220,220,0.5),0 0 10px rgba(220,220,220,0.5),0 0 20px rgba(220,220,220,0.5);}
               #tableBox table:first-of-type thead tr th:nth-child(5) span,#tableBox table:first-of-type td:nth-child(5) span,#tableBox table:nth-of-type(3) tbody tr td:nth-child(8) span,#tableBox table:nth-of-type(3) thead tr th:nth-child(8) span{color: #373859 !important;text-shadow: -1px -1px 0 rgba(118,143,239,0.5),1px -1px 0 rgba(118,143,239,0.5),-1px 1px 0 rgba(118,143,239,0.5),1px 1px 0 rgba(118,143,239,0.5),0 0 10px rgba(118,143,239,0.5),0 0 20px rgba(118,143,239,0.5);}
               #tableBox table:first-of-type thead tr th:nth-child(6) span,#tableBox table:first-of-type td:nth-child(6) span,#tableBox table:nth-of-type(3) tbody tr td:nth-child(9) span,#tableBox table:nth-of-type(3) thead tr th:nth-child(9) span{color: #a4c1f1 !important;text-shadow: -1px -1px 0 rgba(49,67,99,0.5),1px -1px 0 rgba(49,67,99,0.5),-1px 1px 0 rgba(49,67,99,0.5),1px 1px 0 rgba(49,67,99,0.5),0 0 10px rgba(49,67,99,0.5),0 0 20px rgba(49,67,99,0.5);}
               #tableBox table:first-of-type thead tr th:nth-child(7) span,#tableBox table:first-of-type td:nth-child(7) span,#tableBox table:nth-of-type(3) tbody tr td:nth-child(10) span,#tableBox table:nth-of-type(3) thead tr th:nth-child(10) span{color: #01cef9 !important;text-shadow: -1px -1px 0 rgba(47,101,132,0.5),1px -1px 0 rgba(47,101,132,0.5),-1px 1px 0 rgba(47,101,132,0.5),1px 1px 0 rgba(47,101,132,0.5),0 0 10px rgba(47,101,132,0.5),0 0 20px rgba(47,101,132,0.5);}
               #tableBox table:first-of-type thead tr th:nth-child(8) span,#tableBox table:first-of-type td:nth-child(8) span,#tableBox table:nth-of-type(3) tbody tr td:nth-child(11) span,#tableBox table:nth-of-type(3) thead tr th:nth-child(11) span{color: #eeead3 !important;text-shadow: -1px -1px 0 rgba(27,30,42,0.5),1px -1px 0 rgba(27,30,42,0.5),-1px 1px 0 rgba(27,30,42,0.5),1px 1px 0 rgba(27,30,42,0.5),0 0 10px rgba(27,30,42,0.5),0 0 20px rgba(27,30,42,0.5);}
               #tableBox table:first-of-type thead tr:hover,
               #tableBox table:first-of-type tbody tr:hover {background-color: transparent; transition: all 0.2s;}
               #tableBox table:first-of-type tbody{
               position: relative;
               }
               #tableBox table:first-of-type tbody tr:first-child{
               position: absolute;
               top: -33px;
               }
当然你如果觉得麻烦，这里也提供了直接的美化版的账本脚本下载

喜欢就去@咸鱼鱼的原贴给个追随吧！

克莱因蓝 发表于 2025-2-7 21:12:20

本帖最后由克莱因蓝于 2025-2-7 21:39 编辑

又是一位代码大佬的诞生话说这个颜色看着还蛮好看诶也可以更加直观的了解到自己的情况了诶

Colten 发表于 2025-2-7 21:18:40

本帖最后由 Colten 于 2025-2-7 21:27 编辑

設計的好好看，樓主好厲害

話說我使用時跑出這個"数据加载失败，请检查浏览器的localStorage设置。"請問是需要去哪裡開啟甚麼設定嗎?

凯诺斯 发表于 2025-2-7 21:21:20

楼主好强大惹，这账本真是变得越来越美观了:loveliness:

真的不会取名字 发表于 2025-2-7 21:23:07

妈呀，好漂亮的界面，有了这个代码看的好简单明了，大佬请收下我的膝盖

Sam30 发表于 2025-2-7 21:24:19

账本代碼多了些美化上去感覺也是很不錯的樣子呢, 是蠻棒的內容哦:loveliness:

飞扬fox 发表于 2025-2-7 21:24:29

很好看的账本美化包惹，很强大

cinder 发表于 2025-2-7 21:29:18

很方便呢~這樣能更直觀看到自己的收入啦!
https://img.gamemale.com/album/202410/17/232140lqmvezhw61g20czr.gif

Burry 发表于 2025-2-7 21:38:35

这个账簿感觉美化之后非常棒呢，感觉楼主提供方便。

亚洛斯 发表于 2025-2-7 21:40:10

感谢大佬的脚本惹，真是很棒的css代码改动，让我的账本美丽冻人~{:6_195:}

zibatco2 发表于 2025-2-7 21:41:52

哇看起来感觉很不错, 感谢大佬分享~赶紧来使用看看{:4_91:}

SweetUncle 发表于 2025-2-7 21:44:48

不错不错，真的很美观鸭，孩子狠狠把你的jb吃下噜~

huakaiwusheng 发表于 2025-2-7 21:45:27

大佬做的账本好好看惹，感谢分享，即刻下载进行一个食用

野生阿努厨 发表于 2025-2-7 21:47:27

果然乙方是万能的，大佬这么快就把需要的代码改出来了，真是凭本事赚jb{:6_166:}

august13 发表于 2025-2-7 21:49:57

感谢大佬惹，有了这个就方便多了，立马下载了试试

娱乐法师火布偶 发表于 2025-2-7 22:00:29

设定CSS让样式美观了非常多呢

☆Yuki☆ 发表于 2025-2-7 22:03:49

好美的账本皮肤惹，终于可以把黑白的账本装饰一下噜~{:4_108:}

Gua1 发表于 2025-2-7 22:06:47

好好看阿，喜欢捏:loveliness:

CooperAlbort 发表于 2025-2-7 22:18:51

请问这些代码怎么用，有教程链接吗？看见很多次分享代码的帖子了，但是不知道怎么用

毛茸茸兽兽 发表于 2025-2-7 22:34:14

喔⊙ω⊙还挺好看欸～就是不知道中间各版块那个是显示的啥咧～

页: [1] 2 3 4

GameMale's Archiver

【蛇年福卡】账本美化包