在个人博客园设置页面选择自己喜欢的主题。例如我的博客园的主题：
2、主题相关CSS设置
参考了很多的博客园设置。个人总结以下：
在选择主题下面的页面定制CSS代码，输入自己定制的CSS
定制CSS代码下面”禁用模板默认CSS“，不不要勾选。因为个人定制CSS是基于自己选择的主题再定制的。每个主题对应的CSS的选择的标签名称是不同的。
在个人的博客园主页。先写两篇测试博客。要有文章名称和常用的一级、二级、标题。
用chrome浏览器浏览，然后按F12，调试界面选择自己需要定制的对象，然后看到对应标签的CSS的名称。然后再定制修改，把修改的CSS填写入第一步定制CSS代码窗口。
3、chrome浏览器发现对应标签的CSS名称样例
下图是chrome浏览器按F12后的操作过程：
4、我的CSS实例
下面是我的博客的CSS代码：
![]()
/* 定制公告栏音乐插件的样式 */
2 .
aplayer {
3 font-family:
Arial,Helvetica,sans-serif;
/*音乐插件字体*/
4 margin:
0px;
/*音乐插件与公告栏左边的边距，0px就是直接抵到公告栏左边的边上*/
5 box-shadow:
0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
6 border-radius:
2px;
7 overflow:
hidden;
8 -webkit-user-select:
none;
9 -moz-user-select:
none;
10 -ms-user-select:
none;
11 user-select:
none;
12 line-height:
normal;
13 }
14
15 /*******************博客导航栏 *********************/
16 #header{
display:
none;}
17 #myNavList {
18 position:
relative;
19 top:
40px;
20 }
21 #myNavList ul {
22 margin:
0;
23 padding:
0;
24 list-style-type:
none;
/*去除li前的标注*/
25 background-color:
gray;
26 overflow:
hidden;
/*隐藏溢出的部分，保持一行*/
27 }
28
29 #myNavList li {
30 float:
left;
/*左浮动*/
31 }
32
33 #myNavList li a, .
dropbtn {
34 display:
inline-block;
/*设置成块*/
35 color:
white;
36 font-size:
150%;
37 font-family:
algerian,courier;
38 text-align:
center;
39 text-decoration:
none;
40 padding:
14px 16px;
41 }
42
43 #myNavList li a:
hover, .
dropdown:
hover .
dropbtn {
44 /*鼠标移上去，改变背景颜色*/
45 background-color:
blue;
46 color:
white;
47 font-size:
200%;
48 font-family:
algerian,courier;
49
50 }
51
52 #myNavList .
dropdown {
53 /*display:inline-block将对象呈递为内联对象，
54 但是对象的内容作为块对象呈递。旁边的内联对象
55 会被呈递在同一行内，允许空格。*/
56 display:
inline-block;
57 }
58
59 #myNavList .
dropdown-content {
60 display:
none;
61 position:
absolute;
62 background-color:
#f9f9f9;
63 min-width:
160px;
64 box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
65 }
66
67 #myNavList .
dropdown-content a {
68 display:
block;
69 color:
black;
70 padding:
8px 10px;
71 text-decoration:
none;
72 }
73
74 #myNavList .
dropdown-content a:
hover {
75 background-color:
#a1a1a1;
76 }
77
78 #myNavList .
dropdown:
hover .
dropdown-content{
79 display:
block;
80 }
81
82
83 /* 定制生成博客目录的CSS样式 */
84 #uprightsideBar{
85 font-size:
16px;
86 font-family:
Arial,
Helvetica,
sans-serif;
87 text-align:
left;
88 position:
fixed;
89 /*
90 将div的位置固定到距离top:150px，right:0px的位置，
91 这样div就会处在最右边的位置，距离顶部150px，
92 当然这两个值你可以自己改。
93 */
94 top:
150px;
95 right:
10px;
96 width:
auto;
97 height:
auto;
98 }
99 #sideBarTab{
100 float:
left;
101 width:
25px;
102 box-shadow:
0 0 8px #877788;
103 border:
1px solid #00DDC00;
104 border-right:
none;
105 text-align:
center;
106 background:
rgb(
0,
220,
0);
107 }
108 #sideBarContents{
109 float:
left;
110 overflow:
auto;
111 overflow-x:
hidden;!
important;
112 width:
200px;
113 min-height:
101px;
114 max-height:
460px;
115 border:
1px solid #e5e5e5;
116 border-right:
none;
117 background:
#ffffff;
118 }
119 #sideBarContents dl{
120 margin:
0;
121 padding:
0;
122 }
123 #sideBarContents dt{
124 margin-top:
5px;
125 margin-left:
5px;
126 }
127 #sideBarContents dd,
dt {
128 cursor:
pointer;
129 }
130 #sideBarContents dd:
hover,
dt:
hover {
131 color:
#A7995A;
132 }
133 #sideBarContents dd{
134 margin-left:
20px;
135 }
136
137 /*******************红包推广*********************/
138 #alipay-reward {
139 position:
fixed;
140 right:
15px;
141 bottom:
20px;
142 width:
100px;
143 height:
150px;
144 z-index:
9999;
145 -webkit-animation:
scaleDraw 5s ease-in-out infinite;
146 animation:
scaleDraw 5s ease-in-out infinite;
147 }
148
149 #weixin-reward {
150 position:
fixed;
151 right:
15px;
152 bottom:
170px;
153 width:
100px;
154 height:
100px;
155 z-index:
9999;
156 -webkit-animation:
scaleDraw 5s ease-in-out infinite;
157 animation:
scaleDraw 5s ease-in-out infinite;
158 }
159
160 /*******************博客名副标题 *********************/
161 #blogTitle h2 {
162 float:
center;
163 font-size:
20px;
164 font-family:
"楷体","楷体_GB2312";
165 color:
#000000;
166 margin-top:
10px;
167 margin-left:
30px;
168 width:
50%;
169 margin-left:
10em;
170 float:
center;
171 text-align:
center
172 letter-spacing:15px;
173 }
174
175
176 /************** 文章题目样式 ***********************/
177 .
postTitle {
178 font-size:
25px;
179 font-weight:
bold;
180 margin-top:
10px;
181 line-height:
1.5em;
182 width:
100%;
183 clear:
both;
184 }
185 .
postTitle a{
186 font-size:
25px;
187 font-weight:
bold;
188 margin-top:
10px;
189 line-height:
1.
5em;
190 width:
100%;
191 clear:
both;
192 }
193
194 /************** 主体内容样式 ***********************/
195 .
postBody {
196 padding:
20px 40px;
197 }
198
199 #cnblogs_
post_
body {
200 font-size:
15px;
201 }
202
203 /************文章中一级标题：字体、背景************/
204 #cnblogs_
post_
body h1
205 {
206 background:
#2B6695;
207 border-radius:
6px 6px 6px 6px;
208 box-shadow:
0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
209 color:
#FFFFFF;
210 font-family:
"微软雅黑" , "宋体" , "黑体" ,Arial;
211 font-size:
20px;
212 font-weight:
bold;
213 height:
25px;
214 line-height:
25px;
215 margin:
18px 0 !important;
216 padding:
8px 0 5px 5px;
217 text-shadow:
2px 2px 3px #222222;
218 }
219 /************文章中二级标题：字体、背景************/
220 #cnblogs_
post_
body h2
221 {
222 background:
#2B6600;
223 border-radius:
6px 6px 6px 6px;
224 box-shadow:
0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
225 color:
#FFFFFF;
226 font-family:
"微软雅黑" , "宋体" , "黑体" ,Arial;
227 font-size:
15px;
228 font-weight:
bold;
229 height:
24px;
230 line-height:
23px;
231 margin:
12px 0 !important;
232 padding:
5px 0 5px 10px;
233 text-shadow:
2px 2px 3px #222222;
234 }
235 /************文章中三级标题：字体、背景************/
236 #cnblogs_
post_
body h3
237 {
238 background:
#808080;
239 border-radius:
6px 6px 6px 6px;
240 box-shadow:
0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
241 color:
#FFFFFF;
242 font-family:
"微软雅黑" , "宋体" , "黑体" ,Arial;
243 font-size:
10px;
244 font-weight:
bold;
245 height:
24px;
246 line-height:
23px;
247 margin:
12px 0 !important;
248 padding:
5px 0 5px 10px;
249 text-shadow:
2px 2px 3px #222222;
250 }
251 /************文章正文字体************/
252 #cnblogs_
post_
body
253 {
254 color:
black;
255 font:
0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
256 font-size:
13px;
257 }
258
259
260
261 /********************引言样式*************************/
262 blockquote {
263 border-left:
5px solid #FF3300;
264 }
265
266 blockquote strong {
267 color:
red;
268 font-size:
18px;
269 }
270
271
272
273 /*************** 个性签名 *************************/
274 #MySignature {
275 box-shadow:
8px 1px 10px #989898;
276 padding:
10px;
277 text-shadow:
1px 1px 1px #FFF;
278 font-size:
17px;
279 border-left:
solid 5px #FF3300;
280 background:
#F3F3F3;
281 border-radius:
10px 10px 50% 10px;
282 line-height:
2.4;
283 margin:
40px 0;
284 }
285
286 #MySignature a {
287 text-decoration:
none;
288 color:
#4183c4;
289 font-weight:
bold;
290 }
291
292 #MySignature a:
hover {
293 text-decoration:
underline;
294 color:
#f60;
295 }
296
297 #MySignature span {
298 color:
#f60;
299 }
300
301
302
303 /********************** 上一篇下一篇 *************************/
304 #post_
next_
prev {
305 font-size:
20px;
306 color:
#535353;
307 }
308
309
310
311 /************************评论********************************/
312 /* 推荐及反对 */
313 #div_
digg {
314 padding:
5px;
315 position:
fixed;
316 z-index:
1000;
317 bottom:
0px;
318 right:
460px;
319 border:
0px solid #D9DBE1;
320 background-color:
#FFFFFF;
321 opacity:
0.8;
322 width:
60px;
323 float:
left;
324 margin-bottom:
10px;
325 font-size:
25px;
326 text-align:
center;
327 margin-top:
10px;
328 padding-top:
5px;
329 border:
2px solid red;
330 background-color:
#fff;
331 border-radius:
5px 5px 5px 5px !important;
332 box-shadow:
0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
333 z-index:
1;
334 }
335
336 clockdiv {
337 position:
absolute;
338 z-index:
9999999999999999999999999999999999999999999999999999;
339 }
340
341 /* ignore反对 */
342 .
buryit {
343 display:
none;
344 }
345 /*评论列表*/
346 #blog-comments-placeholder {
347 border-radius:
10px;
348 background:
#fff;
349 padding:
30px 40px;
350 }
351
352 .
feedback_
area_
title {
353 background:
url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
354 border:
1px solid #FF3300;
355 border-left-width:
5px;
356 border-radius:
10px;
357 border-right-width:
5px;
358 padding:
15px 50px;
359 }
360
361 /******************** 提交评论按钮 *******************************/
362 #btn_
comment_
submit {
363 border:
solid 1px #fd6d0dd1 !important;
364 width:
90px;
365 height:
40px;
366 color:
#fff !important;
367 background-color:
#fd6d0dd1 !important;
368 border-radius:
5px;
369 font-size:
16px;
370 cursor:
pointer;
371 }
372
373
374
375 /********************隐藏广告******************************/
376 #c_
ad_
block,
#ad_
t2,
#cnblogs_
c1,
#under_
post_
news,
#cnblogs_
c2,
#under_
post_
kb {
377 display:
none;
378 }
379
380 /*******************隐藏搜索框*****************************/
381 #widget_
my_
google,
#google_
q{
382 display:
none;
383 }
384
385 /*****************************侧边栏公告***********************/
386 #blog-news >
img {
387 /*头像*/
388 display:
block;
389 margin:
auto;
390 border-radius:
50%;
391 }
392
393 .
clockdiv{
394 text-align:
center;
395 }
396
397 #profile_
block {
398 font-size:
15px;
399 padding:
20px;
400 line-height:
1.8;
401 }
402
403 #profile_
block >
a:
link {
404 color:
#F60;
405 }
406 /*公告结束*/
407
408
409
410 /****************************侧边评论**********************************/
411 li.
recent_
comment_
body {
412 line-height:
30px;
413 }
414
415
416 /********************************* 禁用下划线 *************************/
417 .
postBody a:
link, .
postBody a:
visited, .
postBody a:
active {
418 text-decoration:
none;
419 }
420
421
422 /**********************sideBar博客侧边栏容器**********************************/
423 #sideBarMain h3, .
newsItem h3 {
424 font-size:
1.2em;
425 height:
50px;
426 line-height:
50px;
427 text-indent:
0.5em;
428 background:
url(https://images.cnblogs.com/likecs_com/mehome/1593798/o_titlebg.png) no-repeat left center #fff;
429 padding:
0 0 0 50px;
430 margin-bottom:
0;
431 border:
1px solid #FF3300;
432 border-left-width:
5px;
433 border-radius:
10px;
434 border-right-width:
5px;
435 }
436 .
newsItem, .
catListComment, .
catListEssay, .
catListView, .
catListFeedback,
437 #blog-calendar,
#sidebar_
postcategory,
#sidebar_
postarchive,
#sidebar_
search {
438 border-radius:
10px;
439 box-shadow:
1px 2px 3px #A7A8AD;
440 background-color:
#fff;
441 }
442 #sideBarMain ul {
443 background-color:
#fff;
444 padding:
15px 20px;
445 border-bottom-left-radius:
10px;
446 border-bottom-right-radius:
10px;
447 }
448
449 #sideBarMain li {
450 line-height:
40px;
451 border-bottom:
1px solid #ddd;
452 font-size:
14px;
453 }
View Code
相关文章：
-
2021-10-15
-
2021-05-28
-
2021-10-01
