【蛇年福卡】账本美化包

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


只进行了样式的添加，所以只需要在样式里新增代码即可，找到存放样式的地方


然后下滑到最后一句，然后在此粘贴样式即可


以下是CSS代码

1.                   .container {
   
2.                       background-image: url('https://pic1.imgdb.cn/item/67a250e4d0e0a243d4fbd912.png');
   
3.                       background-attachment: fixed;
   
4.                       background-size: cover;
   
5.                       background-position: center;
   
6.                       background-repeat: no-repeat;
   
7.                   }
   
8.                   #tableBox>h3{
   
9.                       font-family: STXinwei;
   
10.                       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;
    
11.                   }
    
12.                   fieldset {
    
13.                     background: rgba(255, 255, 255, 0.6);
    
14.                   }
    
15.                   #fixedBox {
    
16.                     background: rgba(255, 255, 255, 0.6);
    
17.                   }
    
18.                   th {background-color: transparent;}
    
19.                   tr:nth-child(even) {background-color: transparent; transition: all 0.2s;}
    
20.                   tr:nth-child(even):hover {background-color: #d3d3d3; transition: all 0.2s;}
    
21. 
    
22.                   #tableBox table{
    
23.                     position: relative;
    
24.                     border: 0;
    
25.                     background: rgba(255, 255, 255, 0.6);
    
26.                     border-radius: 10px;
    
27.                     border: none;
    
28.                     outline: 2px dashed #3a3a3a;
    
29.                     outline-offset: -7px;
    
30.                     transform: translateZ(0);
    
31.                     padding: 13px 15px;
    
32.                   }
    
33.                   #tableBox table:first-of-type{
    
34.                     width: 750px;
    
35.                     padding-top: 88px;
    
36.                   }
    
37.                   #tableBox table:first-of-type th,
    
38.                   #tableBox table:first-of-type td{
    
39.                     width: 90px;
    
40.                     padding: 0;
    
41.                   }
    
42.                   #tableBox table:first-of-type thead tr{
    
43.                     width: 720px;
    
44.                     position: absolute;
    
45.                     top: 15px;
    
46.                   }
    
47.                   #tableBox table:first-of-type thead tr th{
    
48.                     padding-top: 6px;
    
49.                     height: 72px;
    
50.                     vertical-align: top;
    
51.                     background-image: url(https://img.gamemale.com/album/202502/05/201719ntn199sq2cllxri1.png.thumb.jpg);
    
52.                     background-size: 68px;
    
53.                     background-position: center;
    
54.                     background-repeat: no-repeat;
    
55.                     position: relative;
    
56.                   }
    
57.                   #tableBox table:first-of-type thead tr th:before{
    
58.                     content: '';
    
59.                     position: absolute;
    
60.                     display: block;
    
61.                     background-image: url(https://img.gamemale.com/album/202502/05/201723n2m294fs6swa6jxm.png.thumb.jpg);
    
62.                     width: 20px;
    
63.                     height: 22px;
    
64.                     background-size: 100%;
    
65.                     left: 50%;
    
66.                     transform: translateX(-50%);
    
67.                     top: -5px;
    
68.                     background-repeat: no-repeat;
    
69.                   }
    
70.                   #tableBox table:first-of-type thead tr th:nth-of-type(2):before{
    
71.                     background-image: url(https://img.gamemale.com/album/202502/05/201722dvng2ffz2zpqpv2p.png.thumb.jpg);
    
72.                   }
    
73.                   #tableBox table:first-of-type thead tr th:nth-of-type(3):before{
    
74.                     background-image: url(https://img.gamemale.com/album/202502/05/201721i9jc1ldmbnnjyjnj.png.thumb.jpg);
    
75.                   }
    
76.                   #tableBox table:first-of-type thead tr th:nth-of-type(4):before{
    
77.                     background-image: url(https://img.gamemale.com/album/202502/05/201724kvepa1p0pph9xeaj.png.thumb.jpg);
    
78.                   }
    
79.                   #tableBox table:first-of-type thead tr th:nth-of-type(5):before{
    
80.                     background-image: url(https://img.gamemale.com/album/202502/05/201728uztycq1ulgg2343h.png.thumb.jpg);
    
81.                   }
    
82.                   #tableBox table:first-of-type thead tr th:nth-of-type(6):before{
    
83.                     background-image: url(https://img.gamemale.com/album/202502/05/201724zga3c33a3ys3dgc8.png.thumb.jpg);
    
84.                   }
    
85.                   #tableBox table:first-of-type thead tr th:nth-of-type(7):before{
    
86.                     width: 24px;
    
87.                     background-image: url(https://img.gamemale.com/album/202502/05/201721kcgctbpg3t3c5oo1.png.thumb.jpg);
    
88.                   }
    
89.                   #tableBox table:first-of-type thead tr th:nth-of-type(8):before{
    
90.                     background-image: url(https://img.gamemale.com/album/202502/05/201720g53h8udunzhdz3dh.png.thumb.jpg);
    
91.                   }
    
92.                   #tableBox table:first-of-type thead tr th span{
    
93.                     color: #4e232a !important;
    
94.                     display: block;
    
95.                     margin-top: 5px;
    
96.                     font-family: KaiTi;
    
97.                     font-weight: bold;
    
98.                     font-size: 20px;
    
99.                     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);
    
100.                   }
     
101.                   #tableBox table:first-of-type td span,#tableBox table:nth-of-type(3) tbody tr td span{
     
102.                     color: #4e232a !important;
     
103.                     font-family: KaiTi;
     
104.                     font-weight: bold;
     
105.                     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);
     
106.                   }
     
107.                   #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);}
     
108.                   #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);}
     
109.                   #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);}
     
110.                   #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);}
     
111.                   #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);}
     
112.                   #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);}
     
113.                   #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);}
     
114.                   #tableBox table:first-of-type thead tr:hover,
     
115.                   #tableBox table:first-of-type tbody tr:hover {background-color: transparent; transition: all 0.2s;}
     
116.                   #tableBox table:first-of-type tbody{
     
117.                     position: relative;
     
118.                   }
     
119.                   #tableBox table:first-of-type tbody tr:first-child{
     
120.                     position: absolute;
     
121.                     top: -33px;
     
122.                   }

复制代码

当然你如果觉得麻烦，这里也提供了直接的美化版的账本脚本下载


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

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

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


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

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

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

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

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

很方便呢~這樣能更直觀看到自己的收入啦!

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

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

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

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

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

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

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

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

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

好好看阿，喜欢捏

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

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