1、博客园主题选择
在个人博客园设置页面选择自己喜欢的主题。例如我的博客园的主题：
2、主题相关CSS设置
参考了很多的博客园设置。个人总结以下：
3、chrome浏览器发现对应标签的CSS名称样例
下图是chrome浏览器按F12后的操作过程：
4、我的CSS实例
下面是我的博客的CSS代码：
1 /* 定制公告栏音乐插件的样式 */ 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/cnblogs_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 }
博客园默认元素参考：
5、参考及致谢
调试过程确实查了很多博客的设置资料。这里真的有些忘记了。就不一一致谢啦，对于参考的没有提及的十分抱歉。