网站美化代码-文章列表仿MAC三色小圆点

                               
登录/注册后可看大图

代码投放：网站后台 -> Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS样式
（目前经过测试子比主题正常运行 其他程序或者主题自测）

1. /*列表左上角MAC边框美化 xkwo.com*/
   
2. .posts-item.card:last-child {
   
3.     margin-bottom: 8px !important;
   
4. }
   
5. 
   
6. .training-camp__wrapper .header__title-wrapper {
   
7.     font-size: 16px;
   
8. }
   
9. 
   
10. .sec-wrapper {
    
11.     margin-bottom: 10px;
    
12. }
    
13. 
    
14. .training-camp__wrapper .header__title-wrapper {
    
15.     color: #22ab80;
    
16. }
    
17. 
    
18. .training-camp__wrapper {
    
19.     background-image: linear-gradient(150deg, #cff0fb 20%, #cbf4e4 40%);
    
20.     padding: 0 12px 12px;
    
21.     border-radius: 16px;
    
22. }
    
23. 
    
24. button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
    
25.     background: #ffffff00;
    
26.     border: 1px solid #fc3c2d00;
    
27.     border-radius: 0px;
    
28. }
    
29. 
    
30. .training-camp__wrapper .training-camp__header {
    
31.     padding: 24px 0 24px 12px;
    
32.     display: -webkit-flex;
    
33.     display: flex;
    
34.     background: url(/pic/kuangwenlu.png) 100% 0/433px 126px no-repeat;
    
35. }
    
36. 
    
37. .training-camp__wrapper .header__title-wrapper {
    
38.     display: -webkit-flex;
    
39.     display: flex;
    
40.     -webkit-align-items: center;
    
41.     align-items: center;
    
42. }
    
43. 
    
44. .training-camp__wrapper .title__img-wrapper {
    
45.     height: 20px;
    
46. }
    
47. 
    
48. .training-camp__wrapper .header__btn-wrapper {
    
49.     margin-left: auto;
    
50.     display: -webkit-flex;
    
51.     display: flex;
    
52. }
    
53. 
    
54. .training-camp__wrapper .header__btn-wrapper button[class*=button---] {
    
55.     height: 20px;
    
56.     line-height: 20px;
    
57.     padding: 0 12px;
    
58. }
    
59. 
    
60. .training-camp__wrapper .header__btn {
    
61.     display: -webkit-flex;
    
62.     display: flex;
    
63.     -webkit-align-items: center;
    
64.     align-items: center;
    
65.     font-size: 14px;
    
66.     color: #22ab80;
    
67. }
    
68. 
    
69. .medium---OGt5iw {
    
70.     height: 36px;
    
71.     padding: 8px 24px;
    
72.     font-size: 14px;
    
73. }
    
74. 
    
75. .outlined---BKvHAe,
    
76. .text---pn4pHz {
    
77.     background-color: initial;
    
78.     color: #3e454d;
    
79. }
    
80. 
    
81. .button---AUM5ZP {
    
82.     position: relative;
    
83.     display: inline-block;
    
84.     height: 36px;
    
85.     padding: 8px 24px;
    
86.     border-radius: 22px;
    
87.     cursor: pointer;
    
88.     border: unset;
    
89.     font-size: 14px;
    
90.     -webkit-user-select: none;
    
91.     -moz-user-select: none;
    
92.     user-select: none;
    
93. }
    
94. 
    
95. .ke-icon---zeGrGg+i {
    
96.     display: inline-block;
    
97.     vertical-align: middle;
    
98. }
    
99. 
    
100. .training-camp__wrapper>div.sec-bd {
     
101.     background-color: var(--body-bg-color);
     
102. 
     
103. }
     
104. 
     
105. .sec-wrapper .sec-bd {
     
106.     position: relative;
     
107.     display: -webkit-flex;
     
108.     display: flex;
     
109.     -webkit-flex-wrap: wrap;
     
110.     flex-wrap: wrap;
     
111. 
     
112. }
     
113. 
     
114. .training-camp__wrapper .sec-bd {
     
115.     padding: 12px;
     
116.     border-radius: 16px;
     
117. }
     
118. 
     
119. img.title-macyingyong {
     
120.     /* width: 120px; */
     
121.     height: 50px;
     
122. }
     
123. 
     
124. .posts-item.card {
     
125.     padding: 35px 10px 10px 10px !important;
     
126. }
     
127. 
     
128. .posts-item {
     
129.     position: relative !important;
     
130. }
     
131. 
     
132. .posts-item.card::before {
     
133.     content: "";
     
134.     display: block;
     
135.     background: #fc625d;
     
136.     top: 13px;
     
137.     left: 15px;
     
138.     border-radius: 50%;
     
139.     width: 9px;
     
140.     height: 9px;
     
141.     box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
     
142.     margin: 0px 2px -7px;
     
143.     z-index: 1;
     
144.     position: absolute;
     
145. }
     
146. .enlighter::before {
     
147.     content: "";
     
148.     display: block;
     
149.     background: #fc625d;
     
150.     top: 9px;
     
151.     left: 15px;
     
152.     border-radius: 50%;
     
153.     width: 15px;
     
154.     height: 15px;
     
155.     box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
     
156.     margin: 0px 2px -7px;
     
157.     z-index: 1;
     
158.     position: absolute;
     
159. }
     
160. .enlighter-overflow-scroll.enlighter-v-standard .enlighter {
     
161.     padding: 35px 0 12px 0;
     
162. }
     
163. /*列表左上角MAC边框美化 xkwo.com*/

复制代码

谢谢分享