深夜读书会

 找回密码
 注册
搜索
查看: 600|回复: 11

[分享] 【转】整点不一样的个人空间自定义

[复制链接]

2

主题

9

帖子

507

积分

小书痴

Rank: 3

积分
507
贡献
507
金币
4889
发表于 2021-12-26 18:30:15 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

x
本帖最后由 freeguy 于 2021-12-26 18:50 编辑

具体效果点我
与直接在个人空间DIY不同,这个是利用discuz自带接口实现的,不过也照样安全。前置条件:电脑浏览器
方法
①打开pastebin,Ctrl+A全选RAW Paste Data,复制
②在一个有回复评论框的帖子,F12 - Console - 粘贴 - 回车执行
③然后他会弹出一个框,你再把css输入进那个框里面,第二段、第三段代码是一个CSS样式的例子
④确定,然后到自己空间看效果(尝试该方法的一定要把贴子看完
如果你不会用,一键版 →→→ https://www.hostloc.com/thread-665260-1-1.html
第一段代码
https://pastebin.com/YEqpfbbt
第二段代码(空间风格1)

  1. body:before {
  2.         content: close-quote;
  3.         width: 551px;
  4.         right: 10px;
  5.         top: 30px;
  6.         position: fixed;
  7.         background: center,url();
  8.         background-size: cover;
  9.         background-position: center;
  10.         height: 200px;
  11. }

  12. body {
  13.         background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
  14.         background-size: cover;
  15.         background-attachment: fixed;
  16.         background-position: center;
  17. }

  18. #ct {
  19.         opacity: 0.8;
  20. }

  21. #hd {
  22.         visibility: hidden;
  23. }

  24. #ct:hover {
  25.         opacity: 0.95;
  26. }

  27. #ct {
  28.         opacity: 0.85;
  29.         transition: opacity 0.5s;
  30.         border-radius: 7px;
  31.         box-shadow: 0px 0px 20px 6px rgba(0,0,0,0.12),0px 0px 20px 6px rgba(0,0,0,0.12);
  32. }

  33. #ft {
  34.         visibility: hidden;
  35. }

  36. #pprl li {
  37.         padding: 3px 0 3px 0!important;
  38. }

  39. #pprl {
  40.         height: 120px;
  41. padding-bottom:0!important;
  42. }
  43. .block .dxb_bc{
  44. padding-bottom:0!important;
  45. }

  46. #pprl em {
  47.         display: none;
  48. }

  49. #pprl a {
  50.         font-size: 26px
  51. }

  52. .hm img {
  53.         border-radius: 50%;
  54.         margin-top: -110px;
  55.         box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.12);
  56.         padding: 2px;
  57.         background: #FFF;
  58.         border: 1px solid;
  59.         border-color: #F2F2F2 #CDCDCD #CDCDCD #F2F2F2;
  60. }

  61. div#frame1_left {
  62.         overflow: visible;
  63. }

  64. .hm .mbn a {
  65.         visibility: hidden;
  66. }

  67. #profile .blocktitle span {
  68.         display: none;
  69. }

  70. #scrolltop {
  71.         display: none!important;
  72. }

  73. #toptb {
  74.         display: none!important;
  75. }

  76. .ct2 .sd {
  77.         overflow: visible;
  78. }

  79. .xs2 {
  80.         visibility: hidden;
  81. }

  82. #pprl:before {
  83.         content: close-quote;
  84.         width: 235px;
  85.         height: 70px;
  86.         display: block;
  87.         margin-left: -10px;
  88.         background-image: url(https://sample.org/sample/png);
  89. }
  90. .ul_list {
  91.     display: none;
  92. }
  93. #pprl li:nth-child(1) {
  94.     width: 210px;
  95.     color: #333;
  96.     text-align: center;
  97.     margin-top: -105px;
  98.     font-size:24px;
  99.     text-shadow: 1px 1px 20px rgba(33,33,33,0.3), 1px 1px 5px rgba(33,33,33,0.1);
  100. }
  101. #pprl li:nth-child(3){
  102. margin-top:55px;
  103. }

  104. #pprl li:nth-child(2) {
  105.         display: none
  106. }
  107. html{
  108.     overflow: hidden;
  109. }
  110. body{
  111.     overflow: scroll;
  112.     height: 100vh;
  113.     overflow-x:hidden;
  114. }
  115. ::-webkit-scrollbar {
  116.   width: 12px;
  117.   background-color: transparent;
  118. }
  119. ::-webkit-scrollbar-thumb {
  120.   border-radius:12px;
  121.   background-color: rgba(0, 0, 0, 0.2);
  122.   width
  123.   transition: all 0.3s;
  124. }
  125. ::-webkit-scrollbar-thumb:hover {
  126.   background-color: rgba(0, 0, 0, 0.4);
  127. }
  128. ::-webkit-scrollbar-thumb:active {
  129.   background-color: rgba(0, 0, 0, 0.5);
  130. }

  131. .gol{
  132.     display:none;
  133. }
  134. #thread_content li a{
  135.     transition:margin 0.3s;
  136. }
  137. #thread_content li a:hover {
  138.     margin-left: 3px;
  139.     text-decoration: none;
  140. }
  141. .mls img{
  142. border-radius:50%;
  143. }
  144. .hm img{
  145.     transition:transform 0.5s;
  146. }
  147. .hm img:hover{
  148.     transform:rotate(360deg);
  149. }
  150. .mls img{
  151.     transition:transform 0.5s;
  152. }
  153. .mls img:hover{
  154.     transform:rotate(-360deg);
  155. }
  156. #thread_content .xl li {
  157.     width: 50%;
  158. }

  159. #thread_content .xl {
  160.     display: flex;
  161.     flex-wrap: wrap;
  162. }
  163. #friend_content .ml {
  164.     display: flex;
  165.     justify-content: center;
  166. }

  167. #friend_content {
  168.     padding: 0;
  169. }
  170. #personalinfo_content p{
  171. display:none;
  172. }
  173. #thread_content .xl{
  174.     display:flex;
  175.     flex-wrap:wrap;
  176. }
  177. #thread_content .xl li{
  178.     width:50%;
  179. }
复制代码
第三段代码(空间风格2)
  1. body:before {
  2.         content: close-quote;
  3.         width: 551px;
  4.         right: 10px;
  5.         top: 30px;
  6.         position: fixed;
  7.         background-size: cover;
  8.         background-position: center;
  9.         height: 200px
  10. }

  11. body {
  12.         background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
  13.         background-color: #d5fbfe;
  14.         background-size: cover;
  15.         background-attachment: fixed;
  16.         background-position: center
  17. }

  18. #ct {
  19.         opacity: .8
  20. }

  21. #hd {
  22.         visibility: hidden
  23. }

  24. #ct:hover {
  25.         opacity: .9
  26. }

  27. #ct {
  28.         opacity: .7;
  29.         transition: opacity .5s;
  30.         border-radius: 7px;
  31.         box-shadow: 0 0 20px 6px rgba(0,0,0,.12),0 0 20px 6px rgba(0,0,0,.12)
  32. }

  33. #ft {
  34.         visibility: hidden
  35. }

  36. #pprl li {
  37.         padding: 3px 0 3px 0!important
  38. }

  39. #pprl {
  40.         height: 400px
  41. }

  42. #pprl em {
  43.         display: none
  44. }

  45. #pprl a {
  46.         font-size: 26px
  47. }

  48. .hm img {
  49.         border-radius: 50%;
  50.         margin-top: -110px;
  51.         box-shadow: 0 0 10px 6px rgba(0,0,0,.12);
  52.         padding: 2px;
  53.         background: #fff;
  54.         border: 1px solid;
  55.         border-color: #f2f2f2 #cdcdcd #cdcdcd #f2f2f2
  56. }

  57. div#frame1_left {
  58.         overflow: visible
  59. }

  60. .hm .mbn a {
  61.         visibility: hidden
  62. }

  63. #profile .blocktitle span {
  64.         display: none
  65. }

  66. #scrolltop {
  67.         display: none!important
  68. }

  69. #toptb {
  70.         display: none!important
  71. }

  72. .ct2 .sd {
  73.         overflow: visible
  74. }

  75. .xs2 {
  76.         visibility: hidden
  77. }

  78. #pprl:before {
  79.         content: close-quote;
  80.         width: 235px;
  81.         height: 35px;
  82.         display: block;
  83.         margin-left: -10px;
  84.         background-image: url(https://sample.org/sample.png)
  85. }

  86. #thread {
  87.         display: none
  88. }

  89. #pprl li {
  90.         display: none
  91. }
复制代码
第四段代码,网页透明滚动条(可和风格1/风格2同时使用)
  1. html{
  2.     overflow: hidden;
  3. }
  4. body{
  5.     overflow: scroll;
  6.     height: 100vh;
  7.     overflow-x:hidden;
  8. }
  9. ::-webkit-scrollbar {
  10.   width: 12px;
  11.   background-color: transparent;
  12. }
  13. ::-webkit-scrollbar-thumb {
  14.   border-radius:12px;
  15.   background-color: rgba(0, 0, 0, 0.2);
  16.   width
  17.   transition: all 0.3s;
  18. }
  19. ::-webkit-scrollbar-thumb:hover {
  20.   background-color: rgba(0, 0, 0, 0.4);
  21. }
  22. ::-webkit-scrollbar-thumb:active {
  23.   background-color: rgba(0, 0, 0, 0.5);
  24. }

  25. .gol{
  26.     display:none;
  27. }
复制代码
还原
①复制第一段代码
②在一个有回复评论框的帖子,F12 - Console - 粘贴 - 回车执行
③然后他会弹出一个框,提交一次空白内容
④确定,然后到自己空间看效果。

更多说明
代码中的https://sample.org/sample.png 只是个例子,没有实际图片。
代码中的https://api.ixiaowai.cn/api/api.php是一个随机图片的api(大白话:每次访问显示一张随机图片),作用是个人空间每次访问背景不一样。关于这个,你可以自己找自己喜欢的,比如https://www.jinrishici.com/,或者看看「这个列表
原帖链接做了一些便于理解的增加。





回复

使用道具 举报

3

主题

54

帖子

666

积分

小书痴

Rank: 3

积分
666
贡献
666
金币
24
发表于 2021-12-28 18:10:05 | 显示全部楼层
谢谢,非常有用
回复 支持 反对

使用道具 举报

1

主题

166

帖子

1051

积分

小书痴

Rank: 3

积分
1051
贡献
1051
金币
31
发表于 2021-12-29 12:08:53 | 显示全部楼层
这个算是技术贴?!  感谢分享
回复 支持 反对

使用道具 举报

8

主题

104

帖子

739

积分

小书痴

Rank: 3

积分
739
贡献
739
金币
535
发表于 2021-12-29 12:33:16 | 显示全部楼层
感谢分享
回复

使用道具 举报

142

主题

1万

帖子

1万

积分

图书迷宫

Rank: 7Rank: 7Rank: 7

积分
14161
贡献
14161
金币
10903

空白

发表于 2021-12-29 17:44:39 | 显示全部楼层
謝謝分享,如果論壇有直接開放編輯CSS,就可以直接在那編輯,現在沒有就是了
回复 支持 反对

使用道具 举报

1

主题

16

帖子

576

积分

小书痴

Rank: 3

积分
576
贡献
576
金币
3024
发表于 2022-1-9 10:02:25 | 显示全部楼层
楼主你好,请问pastebin是什么?是深夜读书会站内的吗?在哪个位置?
回复 支持 反对

使用道具 举报

1

主题

16

帖子

576

积分

小书痴

Rank: 3

积分
576
贡献
576
金币
3024
发表于 2022-1-9 10:15:19 | 显示全部楼层
感谢楼主,好像我弄好了!
但还有个疑问,就是空间背景图怎么设置?就是如果不想每次刷新随机切换背景图片的话,而是一张固定的背景图,怎么弄?
回复 支持 反对

使用道具 举报

23

主题

1678

帖子

3503

积分

吃书妖怪

Rank: 5Rank: 5Rank: 5

积分
3503
贡献
3503
金币
1101
发表于 2022-1-9 10:16:21 | 显示全部楼层
非常感谢技术分享,尽管不一定用
回复 支持 反对

使用道具 举报

1

主题

16

帖子

576

积分

小书痴

Rank: 3

积分
576
贡献
576
金币
3024
发表于 2022-1-9 10:49:25 | 显示全部楼层
SionHD 发表于 2022-1-9 10:15
感谢楼主,好像我弄好了!
但还有个疑问,就是空间背景图怎么设置?就是如果不想每次刷新随机切换背景图片 ...

行了,这个也弄好了,在空间里面设置。感谢楼主!
回复 支持 1 反对 0

使用道具 举报

8

主题

104

帖子

739

积分

小书痴

Rank: 3

积分
739
贡献
739
金币
535
发表于 2022-1-9 12:10:23 | 显示全部楼层
感谢楼主教学啊!
回复 支持 反对

使用道具 举报

1

主题

106

帖子

151

积分

初翻书页

Rank: 2Rank: 2

积分
151
贡献
151
金币
950
发表于 2022-1-9 15:03:54 | 显示全部楼层
謝謝,高品質技術貼
回复 支持 反对

使用道具 举报

142

主题

1万

帖子

1万

积分

图书迷宫

Rank: 7Rank: 7Rank: 7

积分
14161
贡献
14161
金币
10903

空白

发表于 2022-1-9 16:50:09 | 显示全部楼层
SionHD 发表于 2022-1-9 10:49
行了,这个也弄好了,在空间里面设置。感谢楼主!

真不愧是你啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ritdon

GMT+8, 2024-4-27 12:57 , Processed in 0.213593 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表