码迷,mamicode.com
首页 > Web开发 > 详细

粗制博客园皮肤 SimoCoding CSS 样式 —— 轻 Flat 风格

时间:2015-05-01 01:48:07      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:

   1 #nav_next_page {
   2     line-height: 40px;
   3 }
   4 #nav_next_page a {
   5     -webkit-border-radius: 3px;
   6     -moz-border-radius: 3px;
   7     border-radius: 3px;
   8     background-color: #515151;
   9     height: 40px;
  10     line-height: 40px;
  11     color: #fff;
  12     display: inline-block;
  13     padding: 0 15px;
  14     text-decoration: none;
  15 }
  16 /**************************************************
  17 第一部分:
  18 **************************************************/
  19 #EntryTag {
  20     margin-top: 20px;
  21     font-size: 9pt;
  22     color: gray;
  23 }
  24 
  25 .topicListFooter {
  26     text-align: right;
  27     margin-right: 10px;
  28     margin-top: 10px;
  29 }
  30 
  31 #divRefreshComments {
  32     text-align: right;
  33     margin-right: 10px;
  34     margin-bottom: 5px;
  35     font-size: 9pt;
  36 }
  37 /*****第一部分结束*******************************/
  38 
  39 /**************************************************
  40 第二部:公共样式(全局样式)
  41 **************************************************/
  42 * {
  43     margin: 0;
  44     padding: 0;
  45 }
  46 
  47 html {
  48     height: 100%;
  49 }
  50 
  51 body {
  52     background-color: #FFFDFA;
  53     background-image: url(http://i4.tietuku.com/adb095455700d237.png);
  54     background-repeat: repeat;
  55     font-family:Georgia,‘Times New Roman‘,‘Microsoft YaHei‘,SimHei; \5B8B\4F53, sans-serif;
  56     font:Georgia,‘Microsoft YaHei‘,SimHei; 
  57     font-size: 11.5px;
  58     min-height: 101%;
  59 }
  60 
  61 table {
  62     border-collapse: collapse;
  63     border-spacing: 0;
  64 }
  65 
  66 fieldset, img {
  67     border: 0;
  68 }
  69 
  70 ul {
  71     word-break: break-all;
  72 }
  73 
  74 li {
  75     list-style: none;
  76 }
  77 
  78 h1, h2, h3, h4, h5, h6 {
  79     font-size: 100%;
  80     font-weight: normal;
  81 }
  82 
  83 a {
  84     outline: none;
  85     color: #21759b;
  86 }
  87 
  88     a:link {
  89         color: black;
  90         text-decoration: none;
  91     }
  92 
  93     a:visited {
  94         color: black;
  95         text-decoration: none;
  96     }
  97 
  98     a:hover {
  99         color: #21759b;
 100     }
 101 
 102     a:active {
 103         color: black;
 104         text-decoration: none;
 105     }
 106 
 107 .clear {
 108     clear: both;
 109 }
 110 /*****第二部分结束*******************************/
 111 
 112 /**************************************************
 113 第三部分:各个页面元素的样式。
 114 **************************************************/
 115 /*****home和头部开始**************************/
 116 #home {
 117     margin: 0 auto;
 118     width: 65%;
 119     min-width: 1000px;
 120     background-color: #fff;
 121     padding: 30px;
 122     margin-top: 50px;
 123     margin-bottom: 50px;
 124     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 125 }
 126 
 127 #header {
 128     padding-bottom: 5px;
 129     margin-top: 10px;
 130 }
 131 
 132 #blogTitle {
 133     height: 60px;
 134     clear: both;
 135     font-family:Georgia,Serif;
 136 }
 137 
 138     #blogTitle h1 {
 139         font-size: 26px;
 140         font-weight: bold;
 141         line-height: 1.5em;
 142         margin-top: 20px;
 143     }
 144 
 145         #blogTitle h1 a {
 146             color: #515151;
 147         }
 148 
 149             #blogTitle h1 a:hover {
 150                 color: #21759b;
 151             }
 152 
 153     #blogTitle h2 {
 154         font-weight: normal;
 155         font-size: 13px;
 156         font-size: 0.928571429rem;
 157         line-height: 1.846153846;
 158         color: #757575;
 159         float: left;
 160     }
 161 
 162 #blogLogo {
 163     float: right;
 164 }
 165 
 166 #navigator {
 167     font-size: 14px;
 168     border-bottom: 1px solid #ededed;
 169     border-top: 1px solid #ededed;
 170     height: 53px;
 171     clear: both;
 172     margin-top: 23px;
 173 }
 174 
 175 #navList {
 176     width: 1200px;
 177     min-height: 30px;
 178     float: left;
 179 }
 180 
 181     #navList li {
 182         float: left;
 183         margin: 0 40px 0 0;
 184     }
 185 
 186     #navList a {
 187         display: block;
 188         width: 5em;
 189         height: 22px;
 190         float: left;
 191         text-align: center;
 192         padding-top: 17px;
 193     }
 194 
 195         #navList a:link, #navList a:visited, #navList a:active {
 196             color: #6a6a6a;
 197             font-weight: bold;
 198         }
 199 
 200         #navList a:hover {
 201             color: #000;
 202             text-decoration: none;
 203         }
 204 
 205 .blogStats {
 206     float: right;
 207     color: #757575;
 208     margin-top: -17px;
 209     margin-right: 2px;
 210     text-align: right;
 211 }
 212 /*****home和头部结束**************************/
 213 
 214 /*****主页文章列表开始**************************/
 215 #main {
 216     width: 100%;
 217     text-align: left;
 218     margin-top: 30px;
 219 }
 220 
 221 #mainContent .forFlow {
 222     margin-left: 22em;
 223     float: none;
 224     width: auto;
 225 }
 226 
 227 #mainContent {
 228     min-height: 200px;
 229     padding: 0px 0px 10px 0;
 230     *padding-top: 10px;
 231     -o-text-overflow: ellipsis;
 232     text-overflow: ellipsis;
 233     overflow: hidden;
 234     word-break: break-all;
 235     float: left;
 236     margin-left: -22em;
 237     width: 100%;
 238 }
 239 
 240 .day {
 241     background: #FFF;
 242     padding: 20px;
 243     /*border: 1px solid #dedede;*/
 244     margin-bottom: -1px;
 245 }
 246 .day:hover {
 247     border: 1px solid #515151;
 248     position: relative;
 249     z-index: 10;
 250 }
 251 .day:hover .postSeparator {
 252     border-top: 1px dashed #515151;
 253 }
 254 .dayTitle {
 255     color: #fff;
 256     background-color: #45bcf9;
 257     padding: 3px 6px;
 258     font-size: 12px;
 259     display: block;
 260     float: left;
 261     margin-right: 10px;
 262     z-index: 10px;
 263 }
 264 .dayTitle:hover {
 265     background-color: #45bcf9;
 266 }
 267 .dayTitle a {
 268     color: #FFF
 269 }
 270 .day .postTitle2 {
 271     color: #515151;
 272 }
 273 .day .postTitle {
 274     color: #515151;
 275     font-size: 21px;
 276     line-height: 1.5em;
 277     float: left;
 278     clear: right;
 279 }
 280 .postTitle {
 281     border-left: 3px solid #45bcf9;
 282     margin-bottom: 10px;
 283     font-size: 20px;
 284     float: right;
 285     width: 100%;
 286     clear: both;
 287 }
 288 
 289     .postTitle a:link, .postTitle a:visited, .postTitle a:active {
 290         color: #21759b;
 291         transition: all 0.4s linear 0s;
 292     }
 293 
 294     .postTitle a:hover {
 295         margin-left: 30px;
 296         color: #45bcf9;
 297         text-decoration: none;
 298     }
 299 
 300 .postCon {
 301     float: right;
 302     line-height: 1.5em;
 303     width: 100%;
 304     clear: both;
 305     padding: 10px 0;
 306 }
 307 
 308 .day .postTitle a {
 309     padding-left: 10px;
 310 }
 311 
 312 .postDesc {
 313     font-size: 13px;
 314     background: url(images/posted_time.png) no-repeat 0 1px;
 315     color: #757575;
 316     float: left;
 317     width: 100%;
 318     clear: both;
 319     text-align: left;
 320     padding-left: 20px;
 321     padding-right: 5px;
 322     margin-top: 20px;
 323     line-height: 1.5;
 324 }
 325 
 326     .postDesc a:link, .postDesc a:visited, .postDesc a:active {
 327         color: #666;
 328     }
 329 
 330     .postDesc a:hover {
 331         color: #21759b;
 332         text-decoration: none;
 333     }
 334 
 335 .postSeparator {
 336     clear: both;
 337     height: 1px;
 338     width: 100%;
 339     clear: both;
 340     float: right;
 341     margin: 0 auto 15px auto;
 342 }
 343 /*****主页文章列表开始**************************/
 344 
 345 /*****侧边栏开始********************************/
 346 #sideBar {
 347     margin-top: -15px;
 348     width: 240px;
 349     min-height: 200px;
 350     padding: 0px 0 0px 5px;
 351     float: right;
 352     -o-text-overflow: ellipsis;
 353     text-overflow: ellipsis;
 354     overflow: hidden;
 355     word-break: break-all;
 356 }
 357 
 358     #sideBar a {
 359         color: #757575;
 360     }
 361 
 362         #sideBar a:hover {
 363             color: #21759b;
 364         }
 365 
 366 .mySearch {
 367     background: #FFF;
 368 }
 369 .catListTitle {
 370     font-size: 16px;
 371     padding: 10px 10px;
 372     background-color: #169FE6;
 373     color: white;
 374     font-weight: normal;
 375         margin-bottom: 10px;
 376 }
 377 
 378 .catListTag {
 379     background: #FFF;
 380     margin-top: 20px;
 381     margin-bottom: 20px;
 382 }
 383 .catListTag ul {
 384     padding: 10px 0 10px 10px;
 385     height: 200px;
 386     clear: both;
 387     border-top: none;
 388 }
 389 .catListTag ul li {
 390     width: 94px;
 391     float: left;
 392     line-height: 30px;
 393     background: #F6F6F6;
 394     font-size: 13px;
 395     color: #FFF;
 396     margin: 0 10px 10px 0;
 397     padding-left: 10px;
 398     color: #aaa;
 399 }
 400 .catListTag ul li a {
 401     display: block;
 402     float: left;
 403     min-width: 230px;
 404     color: #aaa;
 405 }
 406 .catListTag ul li:hover {
 407     background: #515151;
 408     cursor: pointer;
 409     color: white;
 410 }
 411 .catListTag ul li:hover a {
 412     color: white;
 413 }
 414 .catListTag ul li a:hover {
 415     text-decoration: none;
 416     color: white;
 417 }
 418 
 419 .catListPostArchive {
 420     background: #FFF;
 421     margin-top: 20px;
 422 }
 423 .catListPostArchive ul {
 424     border: 1px solid #dedede;
 425     border-top: none;
 426 }
 427 .catListPostArchive ul li {
 428     line-height: 44px;
 429     border-bottom: 1px solid #E9E9E9;
 430     padding-left: 25px;
 431     font-size: 15px;
 432     color: #7e8c8d;
 433 }
 434 .catListArticleCategory {
 435     width: 290px;
 436     padding-top: 20px;
 437     background: #FFF;
 438     margin-top: 20px;
 439 }
 440 .catListImageCategory {
 441     width: 290px;
 442     padding-top: 20px;
 443     background: #FFF;
 444     margin-top: 20px;
 445 }
 446 .catListComment {
 447     background: #FFF;
 448     margin-top: 20px;
 449 }
 450 #RecentCommentsBlock {
 451     padding: 10px;
 452     border: 1px solid #dedede;
 453     border-top: none;
 454 }
 455 .recent_comment_title {
 456     font-size: 15px;
 457     color: #7e8c8d;
 458 }
 459 .recent_comment_body, .recent_comment_author {
 460     border-bottom: 1px solid #E9E9E9;
 461     color: #9fa4a4;
 462     font-size: 13px;
 463 }
 464 .recent_comment_body {
 465     border-bottom: none;
 466 }
 467 .catListView {
 468     background: #FFF;
 469     margin-top: 20px;
 470 }
 471 #TopViewPostsBlock {
 472     padding: 10px;
 473     border: 1px solid #dedede;
 474     border-top: none;
 475 }
 476 .catListView ul li {
 477     border-bottom: 1px solid #E9E9E9;
 478     padding: 0 0 8px 0;
 479     margin-bottom: 5px;
 480 }
 481 .catListFeedback {
 482     background: #FFF;
 483     margin-top: 20px;
 484 }
 485 #TopFeedbackPostsBlock {
 486     padding: 10px;
 487     border: 1px solid #dedede;
 488     border-top: none;
 489 }
 490 .catListFeedback ul li {
 491     border-bottom: 1px solid #E9E9E9;
 492     padding: 8px 0;
 493 }
 494 .catListLink {
 495     display: none;
 496 }
 497 .clearFix:after {
 498     clear: both;
 499     display: block;
 500     height: 0;
 501     line-height: 0;
 502     content: "";
 503     visibility: hidden;
 504 }
 505 #myding {
 506     background: #99B16B;
 507     display: none;
 508 }
 509 #myadd:hover {
 510     opacity: 1;
 511 }
 512 #goto-top:hover {
 513     background: url(http://images.cnblogs.com/cnblogs_com/Li-Cheng/554829/o_goto-top.png) no-repeat 0 -36px;
 514 }
 515 /**日历控件样式开始**/
 516 
 517 #blog-calendar {
 518             float: center;
 519     width: 238px;
 520     margin-top:20px; 
 521     padding-bottom: 5px;
 522     margin-bottom: 20px;
 523     box-shadow: 0 1px 1px #ccc;
 524 }
 525 
 526     #blog-calendar td {
 527         font-size: 12px;
 528         font-family: "Comic Sans MS";
 529     }
 530 
 531     #blog-calendar th {
 532         font-size: 12px;
 533     }
 534 
 535 #calendar {
 536     width: 238px;
 537     padding-bottom: 5px;
 538     margin-bottom: 35px;
 539     box-shadow: 0 1px 1px #ccc;
 540 }
 541 
 542     #calendar .Cal {
 543         width: 100%;
 544         line-height: 1.5em;
 545     }
 546 
 547     #calendar td {
 548         font-family: "Comic Sans MS";
 549         background: #FFFFFF;
 550         padding-top: 2px;
 551     }
 552 
 553 .Cal { /**日历容器table**/
 554     border: none;
 555     color: #666;
 556 }
 557 
 558 #calendar table a:link, #calendar table a:visited, #calendar table a:active {
 559     font-weight: bold;
 560 }
 561 
 562 #calendar table a:hover {
 563     color: white;
 564     text-decoration: none;
 565 }
 566 
 567 .CalTodayDay { /**今天日期样式**/
 568     background: #515151 !important;
 569     font-color: #FFF;
 570     font-weight: bold;
 571 }
 572 
 573 .CalWeekendDay {
 574     padding-top: 4px;
 575     padding-bottom: 4px;
 576 }
 577 
 578 .CalOtherMonthDay {
 579     color: #ccc;
 580     padding-top: 4px;
 581     padding-bottom: 4px;
 582 }
 583 
 584 #calendar .CalNextPrev a:link, #calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active { /**上个月、下个月箭头样式**/
 585     font-weight: bold;
 586     padding-left: 10px;
 587     padding-right: 15px;
 588 }
 589 
 590 .CalDayHeader {
 591     background: #F8F8F8;
 592     font-weight: 100;
 593     color: #5E5F63;
 594 }
 595 
 596 .CalTitle { /**日历年月头部样式**/
 597     background: #6293bb;
 598     width: 100%;
 599     height: 25px;
 600     text-align: center;
 601     font-size: 14px;
 602     font-weight: bold;
 603     padding: 5px 0;
 604     color: #FFF;
 605 }
 606 
 607     .CalTitle td {
 608         background: #F8F8F8 !important;
 609         border: 0px !important;
 610         color: #5E5F63;
 611         font-family: "Comic Sans MS";
 612     }
 613 /**日历控件样式结束**/
 614 .catListTitle {
 615     font-size: 13px;
 616     padding: 10px 20px;
 617     background-color: #515151;
 618     color: white;
 619     font-weight: normal;
 620 }
 621 
 622 .catListComment {
 623     line-height: 1.5em;
 624 }
 625 
 626 .divRecentComment {
 627     text-indent: 2em;
 628     color: #494949;
 629     margin-bottom: 20px;
 630 }
 631 
 632 #sideBarMain ul {
 633     line-height: 1.5em;
 634 }
 635 
 636 #sideBarMain li {
 637     line-height: 1.8;
 638 }
 639 
 640 #widget_my_zzk {
 641     padding: 10px 0 0 15px;
 642     margin-bottom: 10px;
 643 }
 644 #widget_my_google {
 645     padding: 10px 0 15px 15px;
 646     margin: 0 !important;
 647 }
 648 .input_my_zzk {
 649     width: 122px;
 650     height: 35px;
 651     outline: none;
 652     line-height: 35px;
 653     font-size: 13px;
 654     padding: 0 12px;
 655 }
 656 input.btn_my_zzk {
 657     font-size: 13px;
 658     height: 37px;
 659     width: 70px;
 660     background: #515151;
 661     text-align: center;
 662     line-height: 37px;
 663     border: none;
 664     color: #FFF;
 665     font-family: "Microsoft Yahei", "Simsun", Arial;
 666 }
 667 input.btn_my_zzk:hover {
 668     cursor: pointer;
 669     cursor: hand;
 670 }
 671 /*****侧边栏结束********************************/
 672 
 673 
 674 /****查看文章页面开始*************************/
 675 #topics {
 676     width: 100%;
 677     min-height: 200px;
 678     padding: 0px 0px 10px 0;
 679     float: left;
 680     -o-text-overflow: ellipsis;
 681     text-overflow: ellipsis;
 682     overflow: hidden;
 683     word-break: break-all;
 684 }
 685 
 686     #topics .postTitle {
 687         border: 0px;
 688         font-size: 130%;
 689         font-weight: bold;
 690         float: left;
 691         line-height: 1.5em;
 692         width: 100%;
 693         padding-left: 5px;
 694     }
 695 
 696 #EntryTag {
 697     color: #666;
 698 }
 699 
 700     #EntryTag a {
 701         margin-left: 5px;
 702         height: 20px;
 703         line-height: 20px;
 704         color: #333333;
 705         padding: 3px 14px;
 706         border-radius: 10px;
 707         margin: 2px 5px 0;
 708         background: #e7e7e7;
 709         text-decoration: none;
 710     }
 711 
 712         #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
 713             color: #666;
 714         }
 715 
 716         #EntryTag a:hover {
 717             color: #f5f5f5;
 718             background: #21759b;
 719             transition: all 0.4s linear 0s;
 720         }
 721 
 722 #BlogPostCategory {
 723     color: #666;
 724 }
 725 
 726     #BlogPostCategory a {
 727         margin-left: 5px;
 728         height: 20px;
 729         line-height: 20px;
 730         color: #333333;
 731         padding: 3px 14px;
 732         border-radius: 10px;
 733         margin: 2px 5px 0;
 734         background: #e7e7e7;
 735         text-decoration: none;
 736     }
 737 
 738         #BlogPostCategory a:link, #BlogPostCategory a:visited, #BlogPostCategory a:active {
 739             color: #666;
 740         }
 741 
 742         #BlogPostCategory a:hover {
 743             color: #f5f5f5;
 744             background: #21759b;
 745         }
 746 
 747 #topics .postDesc {
 748     padding-left: 0px;
 749     width: 100%;
 750     text-align: left;
 751     color: #666;
 752     margin-top: 5px;
 753     background: none;
 754 }
 755 
 756 
 757 .feedback_area_title {
 758     font: normal normal 16px/35px "Microsoft YaHei";
 759     margin: 10px 0 30px;
 760     border-bottom: 2px solid #cccccc;
 761 }
 762 
 763 .louzhu {
 764     background: transparent url(‘/images/icoLouZhu.gif‘) no-repeat scroll right top;
 765     padding-right: 16px;
 766 }
 767 
 768 .feedbackListSubtitle {
 769     color: #A8A8A8;
 770 }
 771 
 772     .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
 773         color: #21759b;
 774         font-weight: bold;
 775     }
 776 
 777     .feedbackListSubtitle a:hover {
 778         color: #21759b;
 779         text-decoration: underline;
 780     }
 781 
 782     .feedbackListSubtitle b {
 783         color: #21759b;
 784     }
 785 
 786 .feedbackManage {
 787     width: 200px;
 788     text-align: right;
 789     float: right;
 790 }
 791 
 792 .feedbackCon {
 793     border-bottom: 1px solid #EEE;
 794     padding: 10px 20px 10px 5px;
 795     min-height: 35px;
 796     _height: 35px;
 797     margin-bottom: 1em;
 798     line-height: 1.5;
 799 }
 800 
 801 #divRefreshComments {
 802     text-align: right;
 803     margin-bottom: 10px;
 804 }
 805 
 806 .commenttb {
 807     padding: 8px;
 808     margin-bottom: 10px;
 809     width: 50%;
 810     color: #555;
 811     border: 1px solid #ddd;
 812     border-radius: 3px;
 813     -moz-border-radius: 3px;
 814     -webkit-border-radius: 3px;
 815     width: 320px;
 816 }
 817 
 818     .commenttb:hover {
 819         color: #333;
 820         border-color: rgba(82, 168, 236, 0.8);
 821         outline: 0;
 822         -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
 823         -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
 824         box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
 825         transition: all 0.4s linear 0s;
 826     }
 827 
 828 .commentTextBox {
 829     width: 410px !important;
 830     margin-top: 10px;
 831     margin-bottom: 10px;
 832 }
 833 
 834     .commentTextBox:hover {
 835         color: #333;
 836         border-color: rgba(82, 168, 236, 0.8);
 837         outline: 0;
 838         -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
 839         -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
 840         box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
 841         transition: all 0.4s linear 0s;
 842     }
 843 
 844 #AjaxHolder_PostComment_btnSubmit {
 845     padding: 8px 20px;
 846     text-align: center;
 847     font-size: 14px;
 848     color: #fff;
 849     border: none;
 850     background: #21759b;
 851     border-radius: 3px;
 852     -moz-border-radius: 3px;
 853     -webkit-border-radius: 3px;
 854     -webkit-transition: all 0.4s ease;
 855     -moz-transition: all 0.4s ease;
 856     -o-transition: all 0.4s ease;
 857     -ms-transition: all 0.4s ease;
 858     transition: all 0.4s ease;
 859     cursor: pointer;
 860     display: inline-block;
 861     vertical-align: middle;
 862     outline: none;
 863     text-decoration: none;
 864 }
 865 
 866     #AjaxHolder_PostComment_btnSubmit:hover {
 867         background: #333;
 868     }
 869 
 870 #AjaxHolder_PostComment_divCommnentArea tr {
 871     margin-top: 10px;
 872     margin-bottom: 10px;
 873 }
 874 /*博客园评论框*/
 875 .comment_vote {
 876     padding-right: 10px;
 877 }
 878 
 879     .comment_vote a {
 880         color: #999;
 881     }
 882 
 883         .comment_vote a:hover {
 884             color: #21759b;
 885         }
 886 
 887 #commentform_title {
 888     font: normal normal 16px/35px "Microsoft YaHei";
 889     margin: 10px 0 30px;
 890     border-bottom: 2px solid #cccccc;
 891     background-image: none;
 892     padding: 0;
 893 }
 894 
 895 #comment_form_container .author {
 896     padding-left: 10px;
 897     color: #555;
 898     border: 1px solid #ddd;
 899     border-radius: 3px;
 900     -moz-border-radius: 3px;
 901     -webkit-border-radius: 3px;
 902     width: 320px;
 903     height: 20px;
 904     background-image: none;
 905 }
 906 
 907 #comment_form_container p {
 908     font-size: 14px;
 909     margin-bottom: 20px;
 910 }
 911 
 912 .commentbox_title_left {
 913     font-size: 14px;
 914 }
 915 
 916 .commentbox_title_right {
 917     float: left;
 918 }
 919 
 920 #comment_form_container .comment_textarea {
 921     width: 362px;
 922     height: 200px;
 923     font-size: 13px;
 924     padding: 8px;
 925     margin-bottom: 10px;
 926     color: #555;
 927     border: 1px solid #ddd;
 928     border-radius: 3px;
 929     -moz-border-radius: 3px;
 930     -webkit-border-radius: 3px;
 931 }
 932 
 933     #comment_form_container .comment_textarea:hover {
 934         border-color: rgba(82, 168, 236, 0.8);
 935         outline: 0;
 936         transition: all 0.4s linear 0s;
 937     }
 938 
 939     #comment_form_container .comment_textarea:focus {
 940         outline: 0;
 941     }
 942 
 943 .comment_btn {
 944     width: 100px;
 945     height: 38px;
 946     padding: 8px 20px;
 947     text-align: center;
 948     font-size: 14px;
 949     color: #fff;
 950     border: none;
 951     background: #21759b;
 952     border-radius: 3px;
 953     -moz-border-radius: 3px;
 954     -webkit-border-radius: 3px;
 955     -webkit-transition: all 0.4s ease;
 956     -moz-transition: all 0.4s ease;
 957     -o-transition: all 0.4s ease;
 958     -ms-transition: all 0.4s ease;
 959     transition: all 0.4s ease;
 960     cursor: pointer;
 961     display: inline-block;
 962     vertical-align: middle;
 963     outline: none;
 964     text-decoration: none;
 965 }
 966 
 967     .comment_btn:hover {
 968         background: #333;
 969     }
 970 
 971 #comment_form_container {
 972 }
 973 /****查看文章页面开始*************************/
 974 
 975 /****列表页面开始******************************/
 976 .entrylistTitle, .PostListTitle, .thumbTitle { /**几个分类列表的标题样式**/
 977     margin-bottom: 25px;
 978     height: 38px;
 979     line-height: 38px;
 980     font-size: 16px;
 981     border-bottom: 2px solid #e6e6e6;
 982 }
 983 
 984 color: #21759b; .entrylistDescription {
 985     color: #666;
 986     text-align: right;
 987     padding-top: 5px;
 988     padding-bottom: 5px;
 989     padding-right: 10px;
 990     margin-bottom: 10px;
 991 }
 992 
 993 .entrylistItem {
 994     min-height: 20px;
 995     _height: 20px;
 996     margin-bottom: 30px;
 997     padding-bottom: 50px;
 998     padding-top: 10px;
 999     width: 100%;
1000 }
1001 
1002 .entrylistPosttitle {
1003     padding-left: 15px;
1004     margin-bottom: 10px;
1005     border-left: 3px solid #21759b;
1006     font-size: 20px;
1007     width: 100%;
1008 }
1009 
1010     .entrylistPosttitle a:link, .entrylistPosttitle a:visited, .entrylistPosttitle a:active {
1011         color: #21759b;
1012         transition: all 0.4s linear 0s;
1013     }
1014 
1015     .entrylistPosttitle a:hover {
1016         margin-left: 30px;
1017         color: #0f3647;
1018         text-decoration: none;
1019     }
1020 
1021 .entrylistPostSummary {
1022     margin-top: 5px;
1023     margin-bottom: 5px;
1024 }
1025 
1026 .entrylistItemPostDesc {
1027     margin-top: 20px;
1028     text-align: left;
1029     color: #757575;
1030     padding-left: 5px;
1031 }
1032 
1033     .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
1034         color: #666;
1035     }
1036 
1037     .entrylistItemPostDesc a:hover {
1038         color: #21759b;
1039     }
1040 
1041 .entrylist .postSeparator {
1042     clear: both;
1043     width: 100%;
1044     font-size: 0;
1045     line-height: 0;
1046     margin: 0;
1047     padding: 0;
1048     height: 0;
1049     border: none;
1050 }
1051 
1052 .divRecentCommentAticle a {
1053     color: #000;
1054 }
1055 
1056 .pager {
1057     text-align: right;
1058     margin-right: 10px;
1059 }
1060 
1061     .pager a {
1062         box-shadow: 0 1px 3px #3671a5;
1063         border: 1px solid #3671a5;
1064         background: #3671a5;
1065         color: white;
1066         transition: all 0.4s linear 0s;
1067     }
1068 
1069         .pager a:hover {
1070             background: #000;
1071         }
1072 
1073 .PostList {
1074     border-bottom: 1px solid #ccc;
1075     clear: both;
1076     min-height: 1.5em;
1077     _height: 1.5em;
1078     padding-top: 20px;
1079     margin-bottom: 20px;
1080     padding-bottom: 20px;
1081 }
1082 
1083 .postTitl2 {
1084     float: left;
1085     padding-top: 10px;
1086     padding-bottom: 10px;
1087     font-size: 14px;
1088 }
1089 
1090 .postDesc2 {
1091     color: #666;
1092     float: right;
1093 }
1094 
1095 .postText2 {
1096     clear: both;
1097     color: #757575;
1098 }
1099 
1100 /*留言*/
1101 .pfl_feedback_area_title {
1102     text-align: right;
1103     line-height: 1.5em;
1104     font-weight: bold;
1105     margin-bottom: 10px;
1106 }
1107 
1108 .pfl_feedbackItem {
1109     border: 1px dashed #ccc;
1110     padding: 10px;
1111     border-radius: 3px;
1112     margin-bottom: 20px;
1113 }
1114 
1115 .pfl_feedbacksubtitle {
1116     width: 100%;
1117     height: 1.5em;
1118 }
1119 
1120 .pfl_feedbackname {
1121     float: left;
1122 }
1123 
1124     .pfl_feedbackname a {
1125         color: #21759b;
1126         font-weight: bold;
1127     }
1128 
1129 .pfl_feedbackManage {
1130     float: right;
1131 }
1132 
1133 .pfl_feedbackCon {
1134     color: black;
1135     padding-top: 5px;
1136     padding-bottom: 5px;
1137 }
1138 
1139 .pfl_feedbackAnswer {
1140     color: #F40;
1141     text-indent: 2em;
1142 }
1143 
1144 .tdSentMessage {
1145     text-align: right;
1146 }
1147 
1148 .errorMessage {
1149     width: 300px;
1150     float: left;
1151 }
1152 
1153 #Profile1_panelAdd input[type=text], #Profile1_txtContent {
1154     padding: 8px;
1155     margin-bottom: 10px;
1156     color: #555;
1157     border: 1px solid #ddd;
1158     border-radius: 3px;
1159     -moz-border-radius: 3px;
1160     -webkit-border-radius: 3px;
1161 }
1162 
1163     #Profile1_panelAdd input[type=text]:hover, #Profile1_txtContent:hover {
1164         color: #333;
1165         border-color: rgba(82, 168, 236, 0.8);
1166         outline: 0;
1167         -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
1168         -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
1169         box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
1170         transition: all 0.4s linear 0s;
1171     }
1172 
1173     #Profile1_panelAdd input[type=text]:focus, #Profile1_txtContent:focus {
1174         outline: 0;
1175         border-color: rgba(82, 168, 236, 0.8);
1176     }
1177 
1178 #Profile1_panelAdd input[type=submit] {
1179     padding: 8px 20px;
1180     text-align: center;
1181     font-size: 14px;
1182     color: #fff;
1183     border: none;
1184     background: #21759b;
1185     border-radius: 3px;
1186     -moz-border-radius: 3px;
1187     -webkit-border-radius: 3px;
1188     -webkit-transition: all 0.4s ease;
1189     -moz-transition: all 0.4s ease;
1190     -o-transition: all 0.4s ease;
1191     -ms-transition: all 0.4s ease;
1192     transition: all 0.4s ease;
1193     cursor: pointer;
1194     display: inline-block;
1195     vertical-align: middle;
1196     outline: none;
1197     text-decoration: none;
1198 }
1199 
1200     #Profile1_panelAdd input[type=submit]:hover {
1201         background: #333;
1202     }
1203 
1204 .feedbackListSubtitle {
1205     clear: both;
1206     color: #A8A8A8;
1207     padding: 8px 5px;
1208 }
1209 
1210 .feedbackItem {
1211     margin-top: 30px;
1212 }
1213 /****列表页面结束******************************/
1214 
1215 /****相册页面开始******************************/
1216 .divPhoto {
1217     border: 1px solid #ccc;
1218     padding: 2px;
1219     margin-right: 10px;
1220 }
1221 
1222 .thumbDescription {
1223     color: #757575;
1224     text-align: right;
1225     padding-top: 5px;
1226     padding-bottom: 5px;
1227     padding-right: 10px;
1228     margin-bottom: 30px;
1229 }
1230 /****相册页面开始******************************/
1231 
1232 
1233 /*****留言页面开始*****************************/
1234 #footer {
1235     color: #686868;
1236     text-align: center;
1237     min-height: 15px;
1238     _height: 15px;
1239     border-top: 1px solid #ededed;
1240     margin-top: 50px;
1241     padding-top: 10px;
1242     margin-bottom: 10px;
1243 }
1244 /*留言查看页面的个人信息*/
1245 .personInfo {
1246     margin-bottom: 20px;
1247 }
1248 /*留言分页区域*/
1249 .pages {
1250     text-align: right;
1251 }
1252 /*****留言页面结束*****************************/
1253 /*****第三部分结束*******************************/
1254 
1255 /**************************************************
1256 第四部分:文章内容常用标签格式。
1257 **************************************************/
1258 /*文章内部常用标签格式*/
1259 .postBody {
1260     color: #000;
1261     line-height: 1.7;
1262     font-size: 14px;
1263 }
1264 
1265     .postBody p, .postCon p {
1266         text-indent: 2em;
1267         margin: 0 auto 1em auto;
1268     }
1269 
1270     .postBody h2 {
1271         font-size: 150%;
1272         margin: 15px auto 2px auto;
1273         font-weight: bold;
1274     }
1275 
1276     .postBody h3 {
1277         font-size: 120%;
1278         margin: 15px auto 2px auto;
1279         font-weight: bold;
1280     }
1281 
1282     .postBody h4 {
1283         font-size: 110%;
1284         margin: 15px auto 2px auto;
1285         font-weight: bold;
1286         color: #333;
1287     }
1288 
1289     .postBody h5 {
1290         font-size: 100%;
1291         margin: 15px auto 2px auto;
1292         font-weight: bold;
1293         color: #333;
1294     }
1295 
1296     .postBody a:link, .postBody a:visited, .postBody a:active {
1297         text-decoration: underline;
1298     }
1299 
1300 .postCon a:link, .postCon a:visited, .postCon a:active {
1301     text-decoration: underline;
1302 }
1303 
1304 .postBody ul, .postCon ul {
1305     margin-left: 2em;
1306 }
1307 
1308 .postBody li, .postCon li {
1309     list-style-type: disc;
1310     margin-bottom: 1em;
1311 }
1312 
1313 .postBody blockquote {
1314     background: url(‘images/comment.gif‘)) no-repeat 25px 0px;
1315     min-height: 35px;
1316     _height: 35px;
1317     line-height: 1.6em;
1318     color: #333;
1319 }
1320 /*****第四部分结束*******************************/
1321 
1322 .myposts_title {
1323     font-weight: bold;
1324     text-align: center;
1325 }
1326 
1327 #sideBar {
1328     font-size: 12px;
1329 }
1330 
1331     #sideBar h3 {
1332         font-size: 14px;
1333     }
1334 
1335 .c_b_p_desc {
1336     font-size: 14px;
1337     line-height: 1.7;
1338 }

目前博客使用的样式,基于 SimpleMemory 修改,借鉴了 CodingLife 和 BlueSky 的一些代码,因为打算是自用的所以修改得很潦草,很多组件也没有测试,所以就当是玩玩吧。

主要特点:

  1. 中文雅黑,英文Georgia
  2. 背景图片比较有质感
  3. 方块状标签
  4. 一些没名堂的东西

粗制博客园皮肤 SimoCoding CSS 样式 —— 轻 Flat 风格

标签:

原文地址:http://www.cnblogs.com/RhinoC/p/4470174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!