该博客的相关美（chou）化

   1 /**************************************************
   2 说明：
   3 1：我们建议你通过只改变css的方式来制作新的皮肤模板。当然，页面的部分代
   4 码你也是可以更改的，例如一些图片的地址。但是，请你在递交作品的时候，请同时
   5 提交对页面部分代码的修改备注和说明。以便我们了解。
   6 2：为了保证页面的兼容性，请你分别在IE和Firefox中分别查看你的页面，以便保证页面
   7 对浏览器的兼容性。
   8 3：请你随时关注官方网站。以便获得最新的通知和说明
   9 时间：2008-1-30
  10 作者：杨正祎
  11 **************************************************/
  12 
  13 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
  14 width:0;
  15 height:0;
  16 display:none;
  17 overflow:auto;
  18 }
  19 
  20 /**************************************************
  21 第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。
  22 如果不符合你皮肤的要求，你可以在后面通过更高的优先级覆盖着这些样式，但是
  23 你不能删除这些样式。
  24 **************************************************/
  25 #EntryTag {
  26     margin-top: 20px;
  27     font-size: 9pt;
  28     color: gray;
  29 }
  30 .topicListFooter {
  31     text-align: right;
  32     margin-right: 10px;
  33     margin-top: 10px;
  34 }
  35 #divRefreshComments{
  36     text-align: right; 
  37     margin-right: 10px;
  38     margin-bottom: 5px;
  39     font-size: 9pt;
  40 }
  41 /*****第一部分结束*******************************/
  42 
  43 /**************************************************
  44 第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你
  45 可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤
  46 模板所有页面的变化。因为它们是全局的。
  47 **************************************************/
  48 * {
  49     margin: 0;
  50     padding: 0;
  51 }
  52 html {
  53     height: 100%;
  54 }
  55 body {
  56     background: url(http://images.cnblogs.com/cnblogs_com/gjc1124646822/1102373/o_NMST-02%20Winter.jpg) no-repeat fixed center;
  57         background-size: auto auto;
  58     background-size: cover;
  59     font-family: "verdana","ms song","宋体","Arial","微软雅黑", "Helvetica", "sans-serif";
  60     font-size: 9pt;
  61     min-height: 101%;
  62 cursor:url(https://github.com/gjc1124646822/test/blob/master/Cursor.cur?raw=true),auto;
  63     color: #00ffc9;
  64     overflow-x:auto;
  65 }
  66 
  67 table {
  68     border-collapse: collapse;
  69     border-spacing: 0;
  70 }
  71 fieldset, img {
  72     border: 0;
  73 }
  74 ul {
  75     word-break: break-all;
  76 }
  77 li {
  78     list-style: none;
  79 }
  80 h3, h4, h5, h6 {
  81     font-size: 130%;
  82     font-weight: normal;
  83     margin-top: 21px;
  84     margin-bottom: 10.5px;
  85     text-align: left;
  86     border-left: 10px solid rgba(82, 168, 236, 0.8);
  87     padding: 10px 0 14px 10px;
  88     background-color: rgba(168, 221, 247, 0.33);
  89     color: #00b8ff;
  90 }
  91 a:link {
  92     color:rgba(22, 126, 255, 0.75);
  93     text-decoration: none;
  94 cursor: url(https://github.com/gjc1124646822/test/blob/master/Alternate.ani), auto;
  95 transition: all 0.4s linear 0s;
  96 }
  97 a:visited {
  98         color:#00dbff;
  99     text-decoration: none;
 100 transition: all 0.4s linear 0s;
 101 }
 102 a:hover {
 103     color:#0093ff;
 104     text-decoration: none;
 105 cursor: url(https://github.com/gjc1124646822/test/blob/master/Hand.cur?raw=true), auto;
 106 transition: all 0.4s linear 0s;
 107 }
 108 a:active {
 109     color: black;
 110     text-decoration: none;
 111 transition: all 0.4s linear 0s;
 112 }
 113 .clear {
 114     clear: both;
 115 }
 116 /*****第二部分结束*******************************/
 117 
 118 /**************************************************
 119 第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他
 120 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
 121 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
 122 **************************************************/
 123 /*****home和头部开始**************************/
 124 #home {
 125     margin: 0 auto;
 126     width:95%;
 127     min-width: 930px;
 128         animation: Flowup 0.3s linear 0.5s;
 129         -webkit-animation: Flowup 0.3s linear 0.5s;
 130         animation-fill-mode: both;
 131        -webkit-animation-fill-mode:both;
 132 }
 133 
 134 #blogTitle {
 135     height: 200px;
 136     clear: both;
 137         /*color: rgba(7, 70, 165, 0.74);*/
 138         
 139 }
 140 #blogTitle h1 {
 141     font-size: 30px;
 142     width: 30%;
 143     height: 50%;
 144     line-height: 320%;
 145     text-align: center;
 146     position: relative;
 147     top: 18%;
 148     font-weight: normal;
 149     color: rgb(141, 255, 0);
 150 }
 151 #blogTitle h2 {
 152     margin-left: 7%;
 153     line-height: normal;
 154     margin-top: 2%;
 155     width: 50%;
 156     float: left;
 157     color: #00dbff;
 158     /* height: initial; */
 159     /* top: 500px; */
 160     /* left: -205px; */
 161     font-size: 25px;
 162 }
 163 #blogLogo {
 164     float: right;
 165 }
 166 #navigator {
 167     background-color: rgba(255, 255, 255, 0.40);
 168     height: 60px;
 169     clear: both;
 170     position: relative;
 171     /*border: 1px solid #138cca;*/
 172     border-left: none;
 173     border-right: none;
 174     box-shadow: 0 0 12px #a2a2a2;
 175 
 176 }
 177 
 178 
 179 #navList {
 180     min-height: 30px;
 181     float: left;
 182 }
 183 #navList li {
 184     float: left;
 185 }
 186 
 187 #navList a {
 188     display: block;
 189     width: 5em;
 190     height: 40px;
 191     float: left;
 192     text-align: center;
 193     padding-top: 20px;
 194     border-right: 1px solid #ccc;
 195     font-size: large;
 196 }
 197 
 198 #navList a:link, #navList a:visited, #navList a:active {
 199     color: #00adff;
 200 }
 201 #navList a:hover {
 202     /*    color: rgb(0, 255, 31);*/
 203     text-decoration: none;
 204         color:#0600ff;
 205         background-color: rgba(78, 198, 255, 0.61);
 206 }
 207 
 208 .blogStats {
 209     float: right;
 210     color: #ccc;
 211     margin-top: 8px;
 212     margin-right: 2px;
 213     text-align: right;
 214 }
 215 /*****home和头部结束**************************/
 216 
 217 /*****主页文章列表开始**************************/
 218 #main{
 219     width: 100%;
 220     min-width: 950px;
 221         min-height:1650px;
 222     text-align: left;
 223         background:rgba(255, 255, 255, 0.75);
 224     box-shadow: 0 0 10px #b9b9b9;
 225 
 226 }
 227 #mainContent .forFlow{
 228     margin-left: 22em;
 229     float: none; 
 230     width: auto;
 231         animation: fadeInUp 0.5s cubic-bezier(0,0,0.58,1) 1.5s;
 232         -webkit-animation: fadeInUp 0.5s cubic-bezier(0,0,0.58,1) 1.5s;
 233         animation-fill-mode: both;
 234        -webkit-animation-fill-mode:both;
 235 }
 236 
 237 #mainContent {
 238     min-height: 1680px;
 239     padding: 0px 0px 10px 0;
 240     *padding-top:10px;
 241     -o-text-overflow: ellipsis;
 242     text-overflow: ellipsis;
 243     overflow: hidden;
 244     word-break: break-all;
 245     
 246     float: right;
 247     margin-left: -25em;
 248     width: 100%
 249 }
 250 .day {
 251     /*min-height: 10px;*/
 252     _height: 10px;
 253     /*margin-bottom: 20px;*/
 254     /*padding-bottom: 5px;*/
 255         /*background: rgba(255, 234, 0, 0.25);*/
 256         font-size: mediun;
 257         animation: fadeInUp 0.5s cubic-bezier(0,0,0.58,1) 1.6s;
 258         -webkit-animation: fadeInUp 0.5s cubic-bezier(0,0,0.58,1) 1.6s;
 259         animation-fill-mode: both;
 260        -webkit-animation-fill-mode:both;
 261        opacity:1;
 262 }
 263 .day alarrf:hover{
 264         /*background: rgba(255, 255, 255, 0.99);*/
 265 }
 266 .dayTitle {
 267     width: 100%;
 268     color: #666;
 269 
 270     font-weight: bold;
 271     line-height: 1.5em;
 272     font-size: 110%;
 273     margin-top: 3px;
 274     margin-bottom: 10px;
 275 
 276     clear:both;
 277     border-bottom: 2px solid #666;
 278     text-align:center;
 279         visibility: hidden;
 280         /*background-color: rgba(187, 185, 23, 0.3);*/
 281 }
 282 .postTitle {
 283     font-size: medium;
 284     font-weight: bold;
 285     /*border-bottom: 1px solid #666;*/
 286     float: right;
 287     line-height: 1.5em;
 288     width: 100%;
 289     clear:both;
 290 }
 291 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
 292         font-size: 130%;
 293         color: #00aeff;
 294         padding-left:0px;
 295 transition: all 0.4s linear 0s;
 296 }
 297 .postTitle a:hover {
 298     color: #66afcc;
 299     text-decoration: none;
 300         padding-left: 30px;
 301     transition: all 0.4s linear 0s;
 302 }
 303 .postCon {
 304     float: right;
 305     line-height: 1.5em;
 306     width: 100%;
 307     clear:both;
 308     padding: 10px 0;
 309         font: initial;
 310         font-size:medium;
 311         color: rgb(1, 130, 179);
 312         font-weight:900;
 313 }
 314 .PostCon a.link{
 315         color:rgb(255, 165, 0);
 316 }
 317 .postDesc {
 318     float: right;
 319     width: 100%;
 320     clear:both;
 321     text-align: right;
 322     padding-right: 5px;
 323     color: #666;
 324     /*margin-top: 5px;*/
 325 }
 326 .postDesc a:link, .postDesc a:visited, .postDesc a:active {
 327     color: #666;
 328 }
 329 .postDesc a:hover {
 330     color: #F60;
 331     text-decoration: none;
 332 }
 333 .postSeparator {
 334     clear: both;
 335     height: 1px;
 336     /*border-top: 1px dotted #666;*/
 337     width: 100%;
 338     clear:both;
 339     float: right;
 340     margin: 0 auto 15px auto;
 341 }
 342 /*****主页文章列表开始**************************/
 343 
 344 /*****侧边栏开始********************************/
 345 #sideBar {
 346     width: 230px;
 347     min-height: 1850px;
 348     padding: 0px 0 0px 5px;
 349     float: left;
 350     -o-text-overflow: ellipsis;
 351     text-overflow: ellipsis;
 352     overflow:auto;
 353     word-break: break-all;
 354         color:aqua;
 355         animation: fadeInUp 0.5s cubic-bezier(0,0,0.58,1) 1s;
 356         -webkit-animation: fadeInUp 0.5s cubic-bezier(0,0,0.58,1) 1s;
 357         animation-fill-mode: both;
 358        -webkit-animation-fill-mode:both;
 359 }
 360 
 361 .newsItem .catListTitle {
 362     display: none;
 363     margin-top: 21px;
 364     margin-bottom: 10.5px;
 365     text-align: left;
 366     border-left: 10px solid rgba(82, 168, 236, 0.8);
 367     padding: 10px 0 14px 10px;
 368     background-color: #f5f5f5;
 369 }
 370 .newsItem {
 371     padding: 15px 0 5px 0px;
 372     margin-bottom: 8px;
 373         background: rgba(255, 255, 255, 0)
 374 }
 375 #lwlhitokoto{
 376      color:blue;
 377 }
 378 #profile_block {
 379     /*background: rgba(145, 233, 0, 0.4);*/
 380     padding: 20px;
 381     color: #009e7a;
 382     font-size: 13px;
 383     line-height: 1.8;
 384     margin-top: 0 !important;
 385     border: 1px solid #dedede;
 386 }
 387 #profile_block {
 388     margin-top: 5px;
 389     line-height: 1.5;
 390     text-align: left;
 391 }
 392 
 393 /**日历控件样式开始**/
 394 #calendar {
 395     width: 229px;
 396 }
 397 #calendar .Cal {
 398     width: 100%;
 399     line-height: 1.5em;
 400 }
 401 .Cal {/**日历容器table**/
 402     border: none;
 403     /*color: #666;*/
 404 }
 405 #calendar table a:link, #calendar table a:visited, #calendar table a:active {
 406     font-weight: bold;
 407         background: #666;
 408 }
 409 #calendar table a:hover {
 410     text-decoration: none;
 411     background-color:rgba(255, 255, 255, 0.45);;
 412 }
 413 .CalTodayDay{/**今天日期样式**/
 414     color:#f60;
 415 }
 416 #calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
 417     font-weight: bold;
 418     background: rgba(255, 255, 255, 0.45);
 419 }
 420 .CalDayHeader{
 421     border-bottom:1px solid #ccc;    
 422 }
 423 
 424 .CalTitle {
 425     width: 100%;
 426     color: #ffea00;
 427     border-bottom: 1px solid #666;
 428 }
 429 
 430 table {
 431     border-collapse: collapse;
 432     border-spacing: 0;
 433     color:darkgoldenrod;
 434 }
 435 
 436 /**日历控件样式结束**/
 437 .catListComment {
 438     line-height: 1.5em;
 439     margin-top: 21px;
 440     margin-bottom: 10.5px;
 441     text-align: left;
 442     border-left: 10px solid rgba(82, 168, 236, 0.8);
 443     padding: 10px 0 14px 10px;
 444     background-color: #f5f5f5;
 445 }
 446 .newsItem {
 447     padding: 15px 0 5px 0px;
 448     margin-bottom: 8px;
 449         background: rgba(255, 255, 255, 0)
 450 }
 451 .newsItem {
 452     padding: 15px 0 5px 0px;
 453     margin-bottom: 8px;
 454         background: rgba(255, 255, 255, 0)
 455 }
 456 .newsItem {
 457     padding: 15px 0 5px 0px;
 458     margin-bottom: 8px;
 459         background: rgba(255, 255, 255, 0)
 460 }
 461 /*.divRecentComment {
 462     text-indent: 2em;
 463     color: #666;
 464 }
 465 #sideBarMain ul {
 466     line-height: 1.5em;
 467 }*/
 468 /*****侧边栏结束********************************/
 469 
 470 
 471 /****查看文章页面开始*************************/
 472 
 473 #topics {
 474         /*background: rgba(129, 255, 11, 0.28);*/
 475     width: 100%;
 476     min-height: 200px;
 477     padding: 0px 0px 10px 0;
 478     float: left;
 479     -o-text-overflow: ellipsis;
 480     text-overflow: ellipsis;
 481     overflow: hidden;
 482     word-break: break-all;
 483 }
 484 #topics .postTitle {
 485     font-size: 130%;
 486     font-weight: bold;
 487     border-bottom: 1px solid #999;
 488     float: left;
 489     line-height: 1.5em;
 490     width: 100%;
 491     padding-left: 5px;
 492         padding-top:15px;
 493         /*height:50px;*/
 494 }
 495 .postBody {
 496     padding: 5px 2px 5px 5px;
 497     line-height: 1.5em;
 498     color: #000;
 499     border-bottom: 1px solid black;
 500         
 501 }
 502 #EntryTag {
 503     color: #666;
 504 }
 505 #EntryTag a {
 506     margin-left: 5px;
 507 }
 508 #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
 509     color: #666;
 510 }
 511 #EntryTag a:hover {
 512     color: #f60;
 513 }
 514 #topics .postDesc {
 515     float: right;
 516     width: 100%;
 517     text-align: right;
 518     padding-right: 5px;
 519     color: #666;
 520     margin-top: 5px;
 521 }
 522 .feedback_area_title {
 523     font-weight: bold;
 524     margin-top: 20px;
 525     border-bottom: 1px solid #333;
 526     margin-bottom: 10px;
 527     padding-left: 8px;
 528 font-size:x-large;
 529 color:deepskyblue;
 530 }
 531 .louzhu {
 532 background:transparent url(‘images/icoLouZhu.gif‘) no-repeat scroll right top;
 533 padding-right:16px;
 534 }
 535 .feedbackListSubtitle {
 536     color: #666;
 537 }
 538 .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
 539     color: #666;
 540     font-weight: normal;
 541 }
 542 .feedbackListSubtitle a:hover {
 543     color: #f60;
 544     text-decoration: none;
 545 }
 546 .feedbackManage {
 547     width: 200px;
 548     text-align: right;
 549     float: right;
 550     padding-right: 100px;
 551 
 552 }
 553 .feedbackCon {
 554     border-bottom: 1px solid #ccc;
 555     background: url(‘images/comment.gif‘) no-repeat 5px 0px;
 556     padding: 15px 18px 10px 40px;
 557     min-height: 35px;
 558     _height: 35px;
 559     margin-bottom: 1em;
 560     line-height: 1.5em;
 561     width:90%;
 562     box-shadow: 0 0 10px #aaa;
 563 
 564 }
 565 #divRefreshComments {
 566     text-align: right;
 567     margin-bottom: 10px;
 568 }
 569 .commenttb {
 570     width: 320px;
 571         background:#ff3636;
 572 }
 573 .cnblogs_code {
 574     background-color: rgba(245, 245, 245, 0);
 575     font-family: Courier New!important;
 576     font-size: 12px!important;
 577     border: 1px solid #ccc;
 578     padding: 5px;
 579     overflow: auto;
 580     margin: 5px 0;
 581     color: #000;
 582 }
 583 .cnblogs_code_collapse {
 584     border-right: gray 1px solid;
 585     border-top: gray 1px solid;
 586     border-left: gray 1px solid;
 587     border-bottom: gray 1px solid;
 588         background-color: rgba(79, 223, 255, 0.13);
 589     padding: 200px;
 590     color: #00e7ff;
 591 }
 592 .cnblogs_code div {
 593     background-color: rgba(84, 200, 255, 0.00);
 594 }
 595 
 596 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
 597 width:0;
 598 height:0;
 599 display:none;
 600 overflow:auto;
 601 }
 602 
 603 
 604 #cnblogs_post_body {
 605     word-break: break-word;
 606     width: 95%;
 607 }
 608 #cnblogs_post_body h3 {
 609     font-size: 16px;
 610     font-weight: bold;
 611     line-height: 1.5;
 612     margin: 10px 0;
 613     width: 100%;
 614 }
 615 
 616 
 617 /****查看文章页面开始*************************/
 618 
 619 /****列表页面开始******************************/
 620 .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
 621     font-size: 170%;
 622     font-weight: bold;
 623     /*border-bottom: 1px solid black;*/
 624     /*text-align: right;*/
 625     padding-bottom: 3px;
 626     padding-right: 10px;
 627         color:deepskyblue;
 628         padding-top:10px;
 629 }
 630 
 631 .entrylistDescription {
 632     color: #666;
 633     text-align: right;
 634     padding-top: 5px;
 635     padding-bottom: 5px;
 636     padding-right: 10px;
 637     margin-bottom: 10px;
 638 }
 639 .entrylistItem {
 640     min-height: 20px;
 641     _height: 20px;
 642     margin-bottom: 30px;
 643     padding-bottom: 5px;
 644     width: 100%;
 645         font-size:large;
 646 }
 647 .entrylistPosttitle {
 648     font-size: 110%;
 649     font-weight: bold;
 650     /*border-bottom: 1px solid #666;*/
 651     line-height: 1.5em;
 652     width: 100%;
 653     padding-left: 5px;
 654 }
 655 .entrylistPosttitle a:hover {
 656     text-decoration: none;
 657 }
 658 .entrylistPostSummary {
 659     margin-top: 5px;
 660     padding-left: 5px;
 661     margin-bottom: 5px;
 662         color: steelblue;
 663 
 664 }
 665 .entrylistItemPostDesc {
 666     text-align: right;
 667     color: #666;
 668         font-size:small;
 669 }
 670 .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
 671     color: #666;
 672 }
 673 .entrylistItemPostDesc a:hover {
 674     color: #f60;
 675 }
 676 .entrylist .postSeparator {
 677     clear: both;
 678     width: 100%;
 679     font-size: 0;
 680     line-height: 0;
 681     margin: 0;
 682     padding: 0;
 683     height: 0;
 684     border: none;
 685 }
 686 
 687 .pager {
 688     text-align: right;
 689     margin-right: 10px;
 690 }
 691 .PostList {
 692     border-bottom: 1px solid #ccc;
 693     clear: both;
 694     min-height: 1.5em;
 695     _height: 1.5em;
 696     padding-top: 10px;
 697     padding-left: 5px;
 698     padding-right: 5px;
 699     margin-bottom: 5px;
 700 }
 701 .postTitl2 {
 702     float: left;
 703 }
 704 .postDesc2 {
 705     color: #666;
 706     float: right;
 707     margin-right: ;
 708 }
 709 .postText2 {
 710     clear: both;
 711     color: #666;
 712 }
 713 .pfl_feedback_area_title {
 714     text-align: right;
 715     line-height: 1.5em;
 716     font-weight: bold;
 717     border-bottom: 1px solid #666;
 718     margin-bottom: 10px;
 719 }
 720 .pfl_feedbackItem {
 721     border-bottom: 1px solid black;
 722     margin-bottom: 20px;
 723 }
 724 .pfl_feedbacksubtitle {
 725     width: 100%;
 726     border-bottom: 1px dotted #666;
 727     height: 1.5em;
 728 }
 729 .pfl_feedbackname {
 730     float: left;
 731 }
 732 .pfl_feedbackManage {
 733     float: right;
 734 }
 735 .pfl_feedbackCon {
 736     color: black;
 737     padding-top: 5px;
 738     padding-bottom: 5px;
 739 }
 740 .pfl_feedbackAnswer {
 741     color: #F40;
 742     text-indent: 2em;
 743 }
 744 .tdSentMessage {
 745     text-align: right;
 746 }
 747 .errorMessage {
 748     width: 300px;
 749     float: left;
 750 }
 751 .mySearch #q {
 752     height: 1.4em;
 753     width: 175px;
 754 }
 755 .blog_comment_body {
 756     word-wrap: break-word;
 757     overflow:auto;
 758     font-size: initial;
 759     color: burlywood;
 760 }
 761 .comment_vote {
 762     text-align: right;
 763     /*padding-right: 51px;*/
 764 }
 765 #comment_nav {
 766     text-align: right;
 767     padding-right: 40px;
 768 }
 769 div.commentform textarea {
 770     width: 450px;
 771     height: 300px;
 772     font-size: 13px;
 773     border: 1px solid #ccc;
 774     font-family: ‘PingFang SC‘,‘Helvetica Neue‘,‘Helvetica‘,‘Arial‘,sans-serif;
 775     box-shadow: inset 0 0 10px #aaa;
 776     background: transparent;
 777 }
 778 
 779 /****列表页面结束******************************/
 780 
 781 /****相册页面开始******************************/
 782 .divPhoto {
 783     border: 1px solid #ccc;
 784     padding: 2px;
 785     margin-right: 10px;
 786         width: 1000;
 787 }
 788 
 789 .thumbDescription {
 790     color: #666;
 791     text-align: right;
 792     padding-top: 5px;
 793     padding-bottom: 5px;
 794     padding-right: 10px;
 795     margin-bottom: 10px;
 796 }
 797 .img{
 798         width:1000;
 799 }
 800 /****相册页面开始******************************/
 801 
 802 
 803 /*****留言页面开始*****************************/
 804 #footer {
 805     text-align: center;
 806     min-height: 15px;
 807     _height: 15px;
 808     border-top: 1px solid black;
 809     margin-top: 10px;
 810     padding-top: 10px;
 811     margin-bottom: 10px;
 812 }
 813 /*留言查看页面的个人信息*/
 814 .personInfo {
 815     margin-bottom: 20px;
 816 }
 817 /*留言分页区域*/
 818 .pages {
 819     text-align: right;
 820 }
 821 /*****留言页面结束*****************************/
 822 /*****第三部分结束*******************************/
 823 
 824 /**************************************************
 825 第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如：
 826 如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面
 827 的“.postBody”明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
 828 建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话，
 829 并不能保证所有的文章都适合。
 830 **************************************************/
 831 /*文章内部常用标签格式*/
 832 .postBody {
 833     line-height: 1.5em;
 834 }
 835 .postBody p,.postCon  p{
 836     text-indent: 2em;
 837     margin: 0 auto 1em auto;
 838 }
 839 .postBody h2{
 840     font-size: 150%;
 841     margin: 15px auto 2px auto;
 842     font-weight:bold;
 843 }
 844 .postBody h3 {
 845     font-size: 120%;
 846     margin: 15px auto 2px auto;
 847     font-weight:bold;
 848 }
 849 .postBody h4{
 850     font-size:110%;
 851     margin:15px auto 2px auto;
 852     font-weight:bold;
 853     color:#333;
 854 }
 855 
 856 .postBody h5{
 857     font-size:100%;
 858     margin:15px auto 2px auto;
 859     font-weight:bold;
 860     color:#333;
 861 }
 862 
 863 .postBody a:link,.postBody a:visited,.postBody a:active{
 864     text-decoration:underline;
 865 }
 866 .postCon a:link,.postCon a:visited,.postCon a:active{
 867     text-decoration:underline;
 868 }
 869 .postBody ul,.postCon ul{
 870     margin-left:2em;    
 871 }
 872 
 873 .postBody li,.postCon li{
 874     list-style-type:disc;
 875     margin-bottom:1em;
 876 }
 877 
 878 .postBody blockquote{
 879     background:url(‘images/comment.gif‘)) no-repeat 25px 0px;
 880     padding:10px 60px 5px 60px;
 881     min-height:35px;
 882     _height:35px;
 883     line-height:1.6em;
 884     color:#333;
 885 }
 886 /*****第四部分结束*******************************/
 887 
 888 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
 889 width:0;
 890 height:0;
 891 display:none;
 892 overflow:auto;
 893 }
 894 .c_ad_block
 895 {
 896 display:none;
 897 }
 898 
 899 
 900 
 901 @media only screen and (max-width: 767px){
 902 #blogTitle h1 {
 903     position: inherit;
 904     padding-top: 6%;
 905     margin-left: -100px;
 906 }
 907 }
 908 
 909 @media only screen and (max-width: 767px){
 910 #under_post_news, #google_ad_c2, #blogTitle, #blogTitle h1, #blogTitle h2, .catListArticleCategory, .catListImageCategory {
 911     width: 70%;
 912 }
 913 }
 914 @media only screen and (max-width: 767px){
 915 #blogTitle h2 {
 916     position: static;
 917     padding: 0 0 0 0;
 918 }
 919 }
 920 
 921 @media only screen and (max-width: 767px){
 922 #mainContent {
 923     width: 100%;
 924     float: right;
 925 }
 926 }
 927 @media only screen and (max-width: 767px){
 928 #sideBar {
 929     width: 26%;
 930     margin-left: 10px;
 931     margin-right: 10px;
 932     float: left;
 933 }
 934 }
 935 
 936 
 937 
 938 
 939 
 940 
 941 /* Banlieue13 导航栏美化
 942 #navList {
 943 min-height: 45px;
 944 background: #C66767;
 945 width: 80%;
 946 }
 947 #navigator a {
 948 color: #000;
 949 font-family: "verdana","ms song","宋体","Arial","微软雅黑", "Helvetica", "sans-serif";
 950 font-size: 16pt;
 951 font-weight:bold;
 952 }*/
 953 
 954 /*CodingLife模板 翻页美化*/
 955 .topicListFooter .pager a:link, .topicListFooter .pager a:visited {
 956     -webkit-border-radius: 3px;
 957     -moz-border-radius: 3px;
 958     border-radius: 3px;
 959     background: rgba(113, 215, 255, 0.32);
 960     /* -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09); */
 961     -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09);
 962     /* box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .09); */
 963     box-shadow: 0 0 10px #0060ff8f;
 964     height: 40px;
 965     line-height: 40px;
 966     margin-top: 0px;
 967     color: #00abff;
 968     display: inline-block;
 969     padding: 0 15px;
 970     text-decoration: none;
 971     border: none;
 972 }
 973 
 974 .topicListFooter .pager a:hover{
 975     background:rgba(0, 183, 255, 0.32);
 976 }
 977 #nav_next_page a {
 978     /* background-color: #00d3ff3b; */
 979     display: inline-block;
 980     padding: 0 15px;
 981     line-height: 35px;
 982     border-radius: 3px;
 983     box-shadow: 0 0 10px #0060ff8f;
 984 }
 985 .topicListFooter {
 986   height:30px;
 987 }
 988 #homepage_top_pager.topicListFooter,#homepage1_HomePageDays_homepage_bottom_pager.topicListFooter {
 989   height: 68px;
 990 }
 991 #under_post_news {
 992   width: 848px;
 993   margin-left: 0px; 
 994 }
 995 #topics .postDesc a{
 996  margin:0 0.5em;
 997 }
 998 
 999 
1000 
1001 
1002 /* for the phone*/
1003 @media screen and (max-width: 768px) {
1004     #mainContent .forFlow {
1005     width: 70%;
1006     margin-left: 29%;
1007     }
1008     #blogTitle h1 {
1009     position: static;
1010     padding-top: 80px;
1011     margin-left: -60%;
1012     font-size: 40px;
1013     }
1014     #blogTitle h2 {
1015     position: static;
1016     padding: 20px 0 0 20px;
1017     margin-top: 0px;
1018     margin-bottom: 25px;
1019     }
1020 }
1021 
1022 
1023 /*代码高亮乱搞*/
1024 /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
1025 .pln{color:rgb(62,188,202)}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:rgb(3,172,255)}.kwd{color:rgb(3,172,255)}.com{color:rgb(157,179,229)}.typ{color:#4271ae}.lit{color:rgb(229,190,157)}.pun{color:rgb(85,170,173)}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}
1026 
1027 /*下面是我设置背景色，字体大小和字体*/
1028 .cnblogs-markdown code{
1029 background:#fff!important;
1030 }
1031 .cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
1032     font-size:16px!important;
1033 }
1034 
1035 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
1036     font-size: 16px!important;
1037 }
1038 
1039 .cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{
1040 font-family:consolas, "Source Code Pro", monaco, monospace !important;
1041 }
1042 
1043 
1044 
1045 
1046 /*动画*/
1047 @-webkit-keyframes fadeInUp {
1048   from {
1049     opacity: 0;
1050     -webkit-transform: translate3d(0, 60px, 0);
1051     transform: translate3d(0, 60px, 0);
1052   }
1053 
1054   to {
1055     opacity: 1;
1056     -webkit-transform: translate3d(0, 0, 0);
1057     transform: translate3d(0, 0, 0);
1058   }
1059 }
1060 /*上移+显示*/
1061 @keyframes fadeInUp {
1062   from {
1063     opacity: 0;
1064     -webkit-transform: translate3d(0, 60px, 0);
1065     transform: translate3d(0, 60px, 0);
1066   }
1067 
1068   to {
1069     opacity: 1;
1070     -webkit-transform: translate3d(0, 0, 0);
1071     transform: translate3d(0, 0, 0);
1072   }
1073 }
1074 
1075 .fadeInUp {
1076   -webkit-animation-name: fadeInUp;
1077   animation-name: fadeInUp;
1078 }
1079 
1080 /*显示*/
1081 @keyframes Flowup {
1082   from {
1083     opacity: 0;
1084   }
1085 
1086   to {
1087     opacity: 1;
1088   }
1089 }
1090 
1091 .Flowup{
1092   -webkit-animation-name: Flowup;
1093   animation-name: Flowup;
1094 }
1095 
1096 
1097 
1098 .snowFall{position: absolute; top: 0; z-index: 3;pointer-events: none;_display: none; color: #ffffff;}
1099 .snowFallTop{left: 0; width: 1220px; height: 162px; }
1100 .snowFallLeft{left: 0; height: 742px; z-index: 3;}
1101 .snowFallRight{right: 0; height: 742px; z-index: 3;}

 1 <h3 style="text-align:left">一言（ヒトコト）</h3>
 2 <div>
 3 <script>
 4  $.get(‘https://sslapi.hitokoto.cn/?c=a‘, function (data) {
 5             $(‘#hitokoto-loader‘).removeClass(‘active‘);
 6             $(‘#hitokoto-content‘).css(‘display‘, ‘‘).text(data.hitokoto);
 7             if (data.from) {
 8               $(‘#hitokoto-from‘).css(‘display‘, ‘‘).text(‘——‘ + data.from);
 9             }
10           });
11 </script>
12 <div style="font-size: 1em; line-height: 1.5em; display: none;color: #00e5ff;; " id="hitokoto-content"></div>
13 <div style="text-align: right; margin-top: 15px; font-size: 0.9em; display: none; color: #00e5ff;" id="hitokoto-from"></div>    
14 </div>
15 
16 
17 
18 <embed src="//music.163.com/style/swf/widget.swf?sid=970638724&type=0&auto=0&width=310&height=430" width="330" height="450"  allowNetworking="all"></embed>

1 <script src="https://blog-static.cnblogs.com/files/gjc1124646822/snowy.js"></script>
2 <style type="text/css">
3 .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}</style>
4 <div class="snow-container"></div>

 1 <script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
 2 <script type="text/javascript">
 3 (function() {
 4      $("pre").addClass("prettyprint");
 5      prettyPrint();
 6 })();
 7 </script>
 8 
 9 
10 <script language="javascript" type="text/javascript">
11 // 生成目录索引列表
12 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
13 // modified by: zzq
14 function GenerateContentList()
15 {
16     var mainContent = $(‘#cnblogs_post_body‘);
17     var h2_list = $(‘#cnblogs_post_body h2‘);//如果你的章节标题不是h2,只需要将这里的h2换掉即可
18 
19     if(mainContent.length < 1)
20         return;
21  
22     if(h2_list.length>0)
23     {
24         var content = ‘<a name="_labelTop"></a>‘;
25         content += ‘<div id="navCategory" style="color:#152e97;">‘;
26         content += ‘<p style="font-size:18px;"><b>目录</b></p>‘;
27         content += ‘<ul>‘;
28         for(var i=0; i<h2_list.length; i++)
29         {
30             var go_to_top = ‘<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">Top</a><a name="_label‘ + i + ‘"></a></div>‘;
31             $(h2_list[i]).before(go_to_top);
32             
33             var h3_list = $(h2_list[i]).nextAll("h3");
34             var li3_content = ‘‘;
35             for(var j=0; j<h3_list.length; j++)
36             {
37                 var tmp = $(h3_list[j]).prevAll(‘h2‘).first();
38                 if(!tmp.is(h2_list[i]))
39                     break;
40                 var li3_anchor = ‘<a name="_label‘ + i + ‘_‘ + j + ‘"></a>‘;
41                 $(h3_list[j]).before(li3_anchor);
42                 li3_content += ‘<li><a href="#_label‘ + i + ‘_‘ + j + ‘">‘ + $(h3_list[j]).text() + ‘</a></li>‘;
43             }
44             
45             var li2_content = ‘‘;
46             if(li3_content.length > 0)
47                 li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a><ul>‘ + li3_content + ‘</ul></li>‘;
48             else
49                 li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a></li>‘;
50             content += li2_content;
51         }
52         content += ‘</ul>‘;
53         content += ‘</div><p>&nbsp;</p>‘;
54         content += ‘<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>‘;
55         if($(‘#cnblogs_post_body‘).length != 0 )
56         {
57             $($(‘#cnblogs_post_body‘)[0]).prepend(content);
58         }
59     }   
60 }
61 
62 GenerateContentList();
63 </script>