博客背景~
Posted hk lin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客背景~相关的知识，希望对你有一定的参考价值。
头像的话用这个。
博客背景以后就这个啦~
后来又弄了个CSS代码，github上的2333
1 @font-face { 2 font-family: \'FontAwesome\'; 3 font-style: normal; 4 font-weight: normal; 5 src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format(\'embedded-opentype\'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format(\'woff\'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format(\'truetype\'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format(\'svg\'); 6 } 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 body { 12 background: #eee; 13 background-image: url("http://images.cnblogs.com/cnblogs_com/moondark/420237/o_banner.jpg") 14 color: #444; 15 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 16 font-size: 14px; 17 text-shadow: 0 0 1px transparent; 18 color:#505050; 19 } 20 @media screen and (max-width: 1260px) { 21 body { 22 margin: 0px; 23 } 24 } 25 @media screen and (max-width: 600px) { 26 body { 27 font-size: 13px; 28 } 29 } 30 h1, 31 h2, 32 h3, 33 h4, 34 h5, 35 h6 { 36 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 37 } 38 h1 { 39 font-size: 1.8em; 40 } 41 h2 { 42 font-size: 1.5em; 43 } 44 h3 { 45 font-size: 1.3em; 46 } 47 a { 48 text-decoration: none; 49 color: #258fb8; 50 } 51 a:hover { 52 text-decoration: underline; 53 } 54 #home{ 55 width:100%; 56 } 57 #tbCommentBody { 58 width: 100%; 59 } 60 #blogTitle { 61 width:35%; 62 float: left; 63 } 64 .alignright { 65 float: right; 66 } 67 .clearfix { 68 zoom: 1; 69 } 70 .clearfix:before, 71 .clearfix:after { 72 content: ""; 73 display: table; 74 } 75 .clearfix:after { 76 clear: both; 77 } 78 #header, #main, #footer { 79 width: 90%; 80 margin: 0 auto; 81 } 82 @media screen and (max-width: 1260px) { 83 #main { 84 width: 95%; 85 } 86 } 87 #mainContent { 88 width: 75%; 89 float: right; 90 margin-left: 10px; 91 } 92 @media screen and (max-width: 1260px) { 93 #main-col { 94 width: 100%; 95 margin-right: -300px; 96 } 97 } 98 @media screen and (max-width: 900px) { 99 #main-col { 100 margin-right: 0; 101 float: none; 102 } 103 } 104 @media screen and (max-width: 1260px) { 105 #wrapper { 106 margin-right: 300px; 107 } 108 } 109 @media screen and (max-width: 900px) { 110 #wrapper { 111 margin-right: 0; 112 } 113 } 114 #header { 115 text-shadow: 0 0 1px #fff; 116 margin: 50px auto 30px; 117 position: relative; 118 height: 60px; 119 color: #999; 120 } 121 #header a { 122 color: #999; 123 } 124 #header a:hover { 125 color: #258fb8; 126 text-decoration: none; 127 } 128 #header h1 { 129 font-weight: normal; 130 font-size: 30px; 131 line-height: 1; 132 } 133 #header h2 { 134 font-weight: normal; 135 font-size: 0.9em; 136 line-height: 1; 137 margin-top: 10px; 138 margin-left: 30px; 139 } 140 #header #navigator { 141 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 142 float: right; 143 position:relative; 144 width: 65%; 145 height: 60px; 146 line-height: 60px; 147 } 148 #header #navigator ul { 149 list-style: none; 150 } 151 #header #navigator ul li { 152 float: left; 153 width: 15%; 154 text-align: center; 155 } 156 #header .blogStats { 157 position: absolute; 158 top:35px; 159 right: 0; 160 float: right; 161 display:none; 162 } 163 .topicListFooter { 164 margin-bottom: 30px; 165 margin-right: 0 !important; 166 } 167 .topicListFooter a { 168 display: inline !important; 169 padding: 10px 20px; 170 background: #ddd; 171 color: #999; 172 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 173 text-shadow: 0 0 1px #fff; 174 border-radius: 5px; 175 } 176 .topicListFooter a:hover { 177 background: #258fb8; 178 color: #fff; 179 text-decoration: none; 180 text-shadow: none; 181 } 182 .topicListFooter .prev:before { 183 content: \'\\f053\'; 184 padding-right: 10px; 185 font-family: FontAwesome; 186 } 187 .topicListFooter .next:after { 188 content: \'\\f054\'; 189 padding-left: 10px; 190 font-family: FontAwesome; 191 } 192 article { 193 -webkit-box-shadow: 1px 2px 3px #ddd; 194 box-shadow: 1px 2px 3px #ddd; 195 background: #fff; 196 } 197 article.page { 198 padding-left: 20px; 199 } 200 article.page .icon { 201 display: none; 202 } 203 .postIcon:before { 204 content: \'\\f016\'; 205 } 206 article.photo .icon:before { 207 content: \'\\f030\'; 208 } 209 article.link .icon:before { 210 content: \'\\f0c1\'; 211 } 212 article.link .title a:after { 213 content: \'\\f08e\'; 214 color: #999; 215 font: 12px FontAwesome; 216 padding-left: 10px; 217 vertical-align: super; 218 } 219 /******************************************以下自定义样式***********************************************/ 220 #blog-calendar{ 221 width:0px; 222 height:0px; 223 display: none !important; 224 } 225 #TopViewPostsBlock ul li{ 226 white-space: nowrap; 227 overflow: hidden; 228 text-overflow: ellipsis; 229 width: 100%; 230 display: inline-block; 231 height: 30px; 232 line-height: 30px; 233 } 234 .day .dayTitle{ 235 display: none !important; 236 } 237 //去掉广告 238 #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{ 239 display: none !important; 240 } 241 /******************************************以上自定义样式***********************************************/ 242 .postTitle, .entrylistPosttitle { 243 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 244 font-size: 1.8em; 245 padding: 20px 20px 15px 30px; 246 background: #fff; 247 border-radius: 10px 10px 0px 0px; 248 white-space: nowrap; 249 overflow: hidden; 250 text-overflow: ellipsis; 251 } 252 .entrylistPostSummary, .postCon, .postBody { 253 padding: 0 20px 15px 30px; 254 -webkit-box-shadow: 1px 2px 3px #ddd; 255 box-shadow: 0 2px 0 #ddd; 256 background: #fff; 257 position: relative; 258 } 259 .postDesc, .entrylistItemPostDesc { 260 margin-bottom: 50px; 261 padding: 10px 20px 15px 30px; 262 color: #999; 263 font-size: 0.9em; 264 line-height: 16px; 265 position: relative; 266 min-height: 16px; 267 box-shadow: 1px 0 0 #ddd; 268 box-shadow: 0 10px 10px #ddd; 269 background: #fff; 270 border-radius: 0px 0px 10px 10px; 271 } 272 #blog-calendar { 273 display: none; 274 } 275 @media screen and (max-width: 600px) { 276 .postCon { 277 padding-left: 20px; 278 } 279 } 280 .postIcon { 281 height: 0px; 282 margin-right: 25px; 283 position: relative; 284 top: 25px; 285 left: 25px; 286 color: #258fb8; 287 } 288 @media screen and (max-width: 600px) { 289 article header .icon { 290 display: none; 291 } 292 } 293 .postIcon:before { 294 position: absolute; 295 font: 32px FontAwesome; 296 top: 0; 297 left: 0; 298 width: 32px; 299 text-align: center; 300 } 301 article header time { 302 color: #999; 303 font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 304 margin-bottom: 5px; 305 display: block; 306 line-height: 1; 307 } 308 article header .title { 309 font-weight: normal; 310 } 311 article header .title a { 312 color: #444; 313 } 314 article header .title a:hover { 315 color: #258fb8; 316 text-decoration: none; 317 } 318 #cnblogs_post_body { 319 text-align: justify; 320 line-height: 1.6; 321 } 322 #cnblogs_post_body p, 323 #cnblogs_post_body blockquote, 324 #cnblogs_post_body ul, 325 #cnblogs_post_body ol, 326 #cnblogs_post_body dl, 327 #cnblogs_post_body table, 328 #cnblogs_post_body iframe, 329 #cnblogs_post_body h3, 330 #cnblogs_post_body h4, 331 #cnblogs_post_body h5, 332 #cnblogs_post_body h6, 333 #cnblogs_post_body .video-container { 334 margin-top: 15px; 335 } 336 #cnblogs_post_body blockquote { 337 border-top: 1px solid #ddd; 338 border-bottom: 1px solid #ddd; 339 font-style: italic; 340 font-family: "Georgia", serif; 341 font-size: 1.2em; 342 padding: 0 30px 15px; 343 } 344 #cnblogs_post_body blockquote footer { 345 border-top: none; 346 font-size: 0.8em; 347 line-height: 1; 348 margin: 20px 0 0; 349 padding-top: 0; 350 } 351 #cnblogs_post_body blockquote footer cite:before { 352 content: \'—\'; 353 color: #ccc; 354 padding: 0 0.5em; 355 } 356 #cnblogs_post_body code, 357 #cnblogs_post_body pre { 358 font-family: Monaco, Menlo, Consolas, Courier New, monospace; 359 } 360 #cnblogs_post_body code { 361 background: #eee; 362 color: #666; 363 padding: 0 5px; 364 margin: 0 2px; 365 font-size: 0.9em; 366 border: 1px solid #ddd; 367 -webkit-border-radius: 3px; 368 border-radius: 3px; 369 } 370 #cnblogs_post_body pre { 371 background: #eee; 372 overflow: auto; 373 padding: 7px 15px; 374 -webkit-border-radius: 2px; 375 border-radius: 2px; 376 } 377 #cnblogs_post_body pre code { 378 background: none; 379 padding: 0; 380 margin: 0; 381 border: none; 382 -webkit-border-radius: 0; 383 border-radius: 0; 384 } 385 #cnblogs_post_body ul ul, 386 #cnblogs_post_body ol ul, 387 #cnblogs_post_body dl ul, 388 #cnblogs_post_body ul ol, 389 #cnblogs_post_body ol ol, 390 #cnblogs_post_body dl ol, 391 #cnblogs_post_body ul dl, 392 #cnblogs_post_body ol dl, 393 #cnblogs_post_body dl dl { 394 margin-top: 0; 395 } 396 #cnblogs_post_body h1, 397 #cnblogs_post_body h2 { 398 font-weight: bold; 399 border-bottom: 1px solid #ddd; 400 padding-bottom: 10px; 401 margin-top: 20px; 402 } 403 #cnblogs_post_body h3, 404 #cnblogs_post_body h4, 405 #cnblogs_post_body h5, 406 #cnblogs_post_body h6 { 407 font-weight: normal; 408 } 409 .postBody img, 410 .entrylistPostSummary img, .postCon img, 411 .postBody video { 412 max-width: 100%; 413 height: auto; 414 border: none; 415 } 416 #cnblogs_post_body iframe { 417 border: none; 418 } 419 #cnblogs_post_body .caption { 420 display: block; 421 margin-top: 5px; 422 color: #999; 423 position: relative; 424 font-size: 0.9em; 425 padding-left: 25px; 426 } 427 #cnblogs_post_body .caption:before { 428 content: \'\\f040\'; 429 position: absolute; 430 font: 1.3em FontAwesome; 431 position: absolute; 432 left: 0; 433 top: 3px; 434 } 435 #cnblogs_post_body .video-container { 436 position: relative; 437 padding-bottom: 56.25%; 438 padding-top: 30px; 439 height: 0; 440 overflow: hidden; 441 } 442 #cnblogs_post_body .video-container iframe, 443 #cnblogs_post_body .video-container object, 444 #cnblogs_post_body .video-container embed { 445 position: absolute; 446 top: 0; 447 left: 0; 448 width: 100%; 449 height: 100%; 450 margin-top: 0; 451 } 452 #cnblogs_post_body .pullquote { 453 float: right; 454 border: none; 455 padding: 0; 456 margin: 1em 0 0.5em 1.5em; 457 text-align: left; 458 width: 45%; 459 font-size: 1.5em; 460 } 461 #blog-comments-placeholder, #comment_form { 462 padding: 20px; 463 background: #fff; 464 -webkit-box-shadow: 1px 10px 10px #ddd; 465 box-shadow: 1px 2px 3px #ddd; 466 margin-bottom: 50px; 467 } 468 .feedback_area_title { 469 margin-bottom: 15px; 470 font-size: 1.8em; 471 } 472 .feedbackItem { 473 border-bottom: 1px solid #CCC; 474 margin-bottom: 10px; 475 padding: 5px; 476 background: rgb(248, 248, 248); 477 } 478 .color_shine {background: rgb(226, 242, 255);} 479 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;} 480 #comment_form .title { 481 font-weight: normal; 482 margin-bottom: 15px; 483 } 484 #ad_under_post_holder { 485 display: none; 486 } 487 .entrylistTitle { 488 color: #999; 489 font-weight: normal; 490 margin-bottom: 30px; 491 text-shadow: 0 0 1px #fff; 492 } 493 .entrylistTitle:before { 494 font-family: FontAwesome; 495 content: \'\\f07b\'; 496 padding-right: 15px; 497 } 498 .archive { 499 -webkit-box-shadow: 1px 2px 3px #ddd; 500 box-shadow: 1px 2px 3px #ddd; 501 border-bottom: 1px solid #ddd; 502 margin-bottom: 50px; 503 } 504 .archive article { 505 -webkit-box-shadow: none; 506 box-shadow: none; 507 } 508 .archive article .post-content { 509 margin-bottom: 0; 510 } 511 #sideBar{ 512 width: 22%; 513 line-height: 1.8em; 514 float: left; 515 } 516 @media screen and (max-width: 900px) { 517 #sideBar { 518 float: none; 519 width: 100%; 520 } 521 } 522 .catListLink, .catListMyTeams, .catListComment, .catListFeedback { 523 display: none; 524 } 525 .search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank { 526 background: #fff; 527 -webkit-box-shadow: 1px 2px 3px #ddd; 528 box-shadow: 1px 10px 5px #ddd; 529 margin-bottom: 30px; 530 word-wrap: break-word; 531 border-radius: 10px; 532 } 533 #blog-sidecolumn h3, .newsItem h3 { 534 padding: 15px 20px; 535 font-size: 1em; 536 border-bottom: 1px solid #ddd; 537 font-weight: normal; 538 } 539 #blog-sidecolumn ul, .newsItem #blog-news { 540 font-size: 0.9em; 541 padding: 15px 20px; 542 } 543 #blog-sidecolumn ul, 544 #blog-sidecolumn ol, 545 #blog-sidecolumn dl { 546 list-style: none; 以上是关于博客背景~的主要内容，如果未能解决你的问题，请参考以下文章如何在 MS Word 文档中显示代码片段，因为它在 *** 中显示（滚动条和灰色背景）