博客自定义美化css代码(19.11.13)

其实折腾的过程还是比较简单的,首先看博客哪里想改样式,然后开审查元素找一下class名是什么,然后去网上找图,弄到网络图源的链接,最后对着刚才找到的class名开始写css代码,然后用hexo clean && hexo g --d部署到coding.net和github就可以啦。

这是截止到最后一次更新我的博客的自定义css代码。代码全都是自己写的。

使用方法:找到..blog\themes\next\source\css\_custom\custom.styl,根据需要将css代码粘贴进即可。

吐槽:后缀名不是css而是styl,这个格式Hbuilder并不识别……css的代码补全和语法高亮都没有,哭唧唧……

查看代码请点击下面的“阅读全文”按钮。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
// Custom styles.

// Updated at 2019.11.13 by ShawnZhou

.post {

​ margin-top: 60px;

margin-bottom: 60px;

padding: 25px;

-webkit-box-shadow: 0 0 5px rgb(255, 255, 255);

-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);



}



.site-meta {

​ background: url(https://s2.ax1x.com/2019/11/13/MYFCwD.jpg);

background-size: 100% auto;

}





background: rgba(247, 255, 254, 0.7);

}



.comments {

​ background: rgba(247, 255, 254, 0.7);

}



.footer {

​ color: #00f145;

}



.posts-expand .post-meta {

​ color: #4079ee;

}



.site-subtitle {

​ color: #fff;

}



body {

​ @media (max-width: 1080px) {

​ background-image: url(https://s2.ax1x.com/2019/11/13/MYFy11.jpg);

background-attachment: fixed;

background-repeat: no-repeat;

background-size: 100% 100%;

​ }

​ @media (min-width: 1080px) {

​ background-image: url(https://s2.ax1x.com/2019/11/13/MYFJlq.jpg);

background-attachment: fixed;

background-repeat: no-repeat;

background-size: 100% 100%;

​ }



}



.header-inner {

​ background: url(https://s2.ax1x.com/2019/11/13/MYky5Q.jpg);

background-size: 100% 100%;

}



.sidebar-inner {

​ background: #96cbdb;

​ background: url(https://s2.ax1x.com/2019/11/13/MYky5Q.jpg);

background-size: 100% 100%;

}



.menu-item-active a {

​ background: #96cbdb;

border-bottom-color: #96cbdb;

}



.site-description {

​ color: #000;

}



.site-state-item-name {

​ color: #0058ff;

}



.pagination {

​ background: #96cbdb;

}



.pagination .page-number.current {

​ background: #00beff;

border-top-color: #00beff;

}


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------


本文标题:博客自定义美化css代码(19.11.13)

文章作者:Shawn Zhou

发布时间:2019年02月14日 - 16:02

最后更新:2019年11月13日 - 21:11

原始链接:http://shawnzhou.xyz/2019/02/14/19-02-14-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。
0%