样式一
1.页面定制css代码
博客背景可以在body{}中添加background:#205424 url('http://mat1.gtimg.com/www/mb/theme/qqfs/one_lhj/wrapBg.jpg') no-repeat top center fixed;
1 <style type="text/css"> 2 .Abstract 3 { 4 padding: 15px; 5 border: dotted 2px #999; 6 color: #999; 7 font-family: 'Microsoft Yahei'; 8 border-radius: 4px; 9 } 10 11 .First 12 { 13 margin: 10px 0; 14 font-family: 'Microsoft Yahei'; 15 text-align: left; 16 padding: 6px 20px; 17 color: #fff; 18 background: #55895B; 19 font-size: 20px; 20 border-radius: 4px; 21 clear: both; 22 } 23 24 25 .Second 26 { 27 margin: 10px 0; 28 font-family: 'Microsoft Yahei'; 29 padding: 6px 20px; 30 background: #93C8A2; 31 color: #fff; 32 font-size: 18px; 33 border-radius: 4px; 34 clear: both; 35 } 36 37 38 .Third 39 { 40 margin: 10px 0; 41 padding: 6px 20px; 42 font-family: 'Microsoft Yahei'; 43 margin: 15px 0; 44 font-size: 16px; 45 color: fff; 46 background: #C6EFD2; 47 color: #999; 48 border-radius: 4px; 49 clear: both; 50 } 51 .note 52 { 53 margin: 10px 0; 54 padding: 15px 20px 15px 60px; 55 background: #FCFAA9 url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png') no-repeat 20px 0; 56 font-size: 15px; 57 font-family: 'Microsoft Yahei'; 58 box-shadow: 0 0 8px #aaa; 59 clear: both; 60 } 61 62 .demo 63 { 64 text-align: left; 65 padding: 6px 20px; 66 overflow: auto; 67 border-radius: 4px; 68 background: orange; 69 color: #fff; 70 font-size: 16px; 71 clear: both; 72 } 73 74 .cnblogs_Highlighter 75 { 76 border: solid 1px #ccc; 77 clear: both; 78 } 79 80 .cnblogs_code 81 { 82 background: #EFFFF4; 83 border: solid 0px #939393; 84 font-size: 14px; 85 clear: both; 86 padding: 10px 20px; 87 } 88 .cnblogs_code pre 89 { 90 font-size: 14px; 91 } 92 .cnblogs_code span 93 { 94 font-family: Courier New; 95 font-size: 14px; 96 } 97 </style> 98 ================================= 99 @charset "utf-8"; 100 /* CSS Document */ 101 102 /************************************************** 103 第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。 104 如果不符合你皮肤的要求，你可以在后面通过更好的优先级覆盖着这些样式，但是 105 你不能删除这些样式。 106 **************************************************/ 107 #EntryTag { 108 margin-top: 20px; 109 font-size: 9pt; 110 color: gray; 111 } 112 .topicListFooter { 113 text-align: right; 114 margin-right: 10px; 115 margin-top: 10px; 116 } 117 #divRefreshComments{ 118 text-align: right; 119 margin-right: 10px; 120 margin-bottom: 5px; 121 font-size: 9pt; 122 } 123 /*****第一部分结束*******************************/ 124 125 /************************************************** 126 第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你 127 可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤 128 模板所有页面的变化。因为它们是全局的。 129 **************************************************/ 130 * { 131 margin: 0; 132 padding: 0; 133 } 134 html { 135 height: 100%; 136 } 137 body { 138 color:#000; 139 background:#FFF; 140 font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif"; 141 font-size: 14px; 142 min-height: 101%; 143 width:60em; 144 margin-left:auto; 145 margin-right:auto; 146 } 147 table { 148 border-collapse: collapse; 149 border-spacing: 0; 150 } 151 fieldset, img { 152 border: 0; 153 } 154 ul { 155 word-break: break-all; 156 } 157 li { 158 list-style: none; 159 } 160 h1, h2, h3, h4, h5, h6 { 161 font-size: 100%; 162 font-weight: normal; 163 } 164 a:link { 165 color: black; 166 text-decoration: none; 167 } 168 a:visited { 169 color: black; 170 text-decoration: none; 171 } 172 a:hover { 173 color: #F60; 174 background-color:#e9f3e8; 175 -moz-border-radius: 9px; 176 -khtml-border-radius: 9px; 177 -webkit-border-radius: 9px; 178 border-radius: 9px; 179 } 180 a:active { 181 color: black; 182 text-decoration: none; 183 } 184 .clear { 185 clear: both; 186 } 187 /*****第二部分结束*******************************/ 188 189 /************************************************** 190 第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他 191 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮 192 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。 193 **************************************************/ 194 /*****home和头部开始**************************/ 195 #home { 196 margin: 0 auto; 197 width:95%; 198 min-width: 60em; 199 } 200 #header { 201 padding-bottom: 0.4em; 202 margin-top: 0.8em; 203 } 204 #blogTitle { 205 height: 7em; 206 clear: both; 207 border:1px solid #999; 208 -moz-border-radius: 11px; 209 -khtml-border-radius: 11px; 210 -webkit-border-radius: 11px; 211 border-radius: 11px; 212 -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px; 213 } 214 #blogTitle h1 { 215 font-size: 200%; 216 font-weight: bold; 217 line-height: 2em; 218 margin-left: 1em; 219 margin-top: 0.4em; 220 width: 50%; 221 float: left; 222 } 223 #blogTitle h2 { 224 margin-left: 4em; 225 line-height: 1.5em; 226 width: 50%; 227 float: left; 228 } 229 #blogLogo { 230 float: right; 231 } 232 #navigator { 233 /* background-color: black; 234 height: 30px; 235 clear: both;*/ 236 237 margin-top:0.3em; 238 height: 2em; 239 clear:both; 240 border:1px solid #999; 241 -moz-border-radius: 11px; 242 -khtml-border-radius: 11px; 243 -webkit-border-radius: 11px; 244 border-radius: 11px; 245 -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px; 246 } 247 #navList { 248 min-height: 1.5em; 249 float: left; 250 } 251 #navList li { 252 float: left; 253 } 254 #navList a { 255 display: block; 256 padding-left:0.5em; 257 padding-right:0.5em; 258 line-height:2em; 259 float: left; 260 text-align: center; 261 border-right: 1px solid #999; 262 } 263 #navList a:link, #navList a:visited, #navList a:active { 264 /* color: #ccc;*/ 265 } 266 #navList a:hover { 267 /* color: white; 268 background-color: #F60; 269 text-decoration: none;*/ 270 padding-left:0.8em; 271 padding-right:0.8em; 272 } 273 274 .blogStats { 275 float: right; 276 font-size:0.8em; 277 color: #666; 278 margin-top: 0.9em; 279 margin-right: 0.2em; 280 text-align: right; 281 } 282 /*****home和头部结束**************************/ 283 284 /*****主页文章列表开始**************************/ 285 #main{ 286 width: 100%; 287 min-width: 60em; 288 text-align: left; 289 } 290 #mainContent .forFlow{ 291 margin-left: 14em; 292 float: none; 293 width: auto; 294 } 295 296 #mainContent { 297 min-height: 18em; 298 padding: 0px 0px 10px 0; 299 *padding-top:10px; 300 -o-text-overflow: ellipsis; 301 text-overflow: ellipsis; 302 overflow: hidden; 303 word-break: break-all; 304 305 float: right; 306 margin-left: -26em; 307 width: 100% 308 } 309 .day { 310 min-height: 10px; 311 _height: 10px; 312 margin-bottom: 20px; 313 padding-bottom: 5px; 314 } 315 .dayTitle { 316 width: 100%; 317 color: #666; 318 319 font-weight: bold; 320 line-height: 1.5em; 321 font-size: 110%; 322 margin-top: 3px; 323 margin-bottom: 10px; 324 clear:both; 325 border-bottom: 2px solid #e9f3e8; 326 text-align:center; 327 328 } 329 .postTitle { 330 font-size: 110%; 331 font-weight: bold; 332 /*border-bottom: 1px solid #9DAAF4;*/ 333 float: right; 334 line-height: 1.5em; 335 width: 100%; 336 clear:both; 337 } 338 .postTitle a:link, .postTitle a:visited, .postTitle a:active { 339 color: #444; 340 } 341 .postTitle a:hover { 342 color: #F60; 343 text-decoration: none; 344 } 345 .postCon { 346 float: right; 347 line-height: 1.5em; 348 width: 100%; 349 clear:both; 350 padding: 10px 0; 351 } 352 .postDesc { 353 float: right; 354 width: 100%; 355 clear:both; 356 text-align: right; 357 padding-right: 5px; 358 color: #666; 359 margin-top: 5px; 360 } 361 .postDesc a:link, .postDesc a:visited, .postDesc a:active { 362 color: #666; 363 } 364 .postDesc a:hover { 365 color: #F60; 366 text-decoration: none; 367 } 368 .postSeparator { 369 clear: both; 370 height: 1px; 371 border-top: 1px dotted #666; 372 width: 100%; 373 clear:both; 374 float: right; 375 margin: 0 auto 15px auto; 376 } 377 /*****主页文章列表开始**************************/ 378 379 /*****侧边栏开始********************************/ 380 #sideBar { 381 width: 14em; 382 min-height: 14em; 383 padding: 0px 0 0px 5px; 384 float: left; 385 -o-text-overflow: ellipsis; 386 text-overflow: ellipsis; 387 overflow: hidden; 388 word-break: break-all; 389 font-size:0.9em; 390 } 391 .newsItem .catListTitle { 392 display: none; 393 } 394 .newsItem { 395 padding: 15px 0 5px 0px; 396 margin-bottom: 8px; 397 } 398 /**日历控件样式开始**/ 399 #calendar { 400 width: 14em; 401 } 402 #calendar .Cal { 403 width: 100%; 404 line-height: 1.5em; 405 } 406 .Cal {/**日历容器table**/ 407 border: none; 408 color: #666; 409 } 410 #calendar table a:link, #calendar table a:visited, #calendar table a:active { 411 font-weight: bold; 412 } 413 #calendar table a:hover { 414 color: white; 415 text-decoration: none; 416 background-color: #F60; 417 } 418 .CalTodayDay{/**今天日期样式**/ 419 color:#f60; 420 } 421 #calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/ 422 font-weight: bold; 423 background-color: white; 424 } 425 .CalDayHeader{ 426 border-bottom:1px solid #ccc; 427 } 428 .CalTitle{/**日历年月头部样式**/ 429 width:100%; 430 background:white; 431 color:black; 432 border-bottom:1px solid #666; 433 } 434 /**日历控件样式结束**/ 435 .catListTitle { 436 font-weight: bold; 437 line-height: 1.5em; 438 font-size: 110%; 439 margin-top: 15px; 440 margin-bottom: 10px; 441 border-bottom: 1px solid #e9f3e8; 442 text-align: center; 443 } 444 .catListComment { 445 line-height: 1.5em; 446 } 447 .divRecentComment { 448 color: #666; 449 margin-bottom:1em; 450 } 451 #sideBarMain ul { 452 line-height: 1.5em; 453 } 454 /*****侧边栏结束********************************/ 455 456 457 /****查看文章页面开始*************************/ 458 #topics { 459 width: 100%; 460 min-height: 18em; 461 padding: 0px 0px 10px 0; 462 float: left; 463 -o-text-overflow: ellipsis; 464 text-overflow: ellipsis; 465 overflow: hidden; 466 word-break: break-all; 467 } 468 #topics .postTitle { 469 font-size: 130%; 470 font-weight: bold; 471 border-bottom: 1px solid #999; 472 float: left; 473 line-height: 1.5em; 474 width: 100%; 475 padding-left: 5px; 476 } 477 .postBody { 478 padding: 5px 2px 5px 5px; 479 line-height: 1.5em; 480 color: #000; 481 border-bottom: 1px solid #8686FF; 482 } 483 #EntryTag { 484 color: #666; 485 } 486 #EntryTag a { 487 margin-left: 5px; 488 } 489 #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active { 490 color: #666; 491 } 492 #EntryTag a:hover { 493 color: #f60; 494 } 495 #topics .postDesc { 496 float: right; 497 width: 100%; 498 font-size:0.9em; 499 text-align: right; 500 padding-right: 5px; 501 color: #666; 502 margin-top: 5px; 503 } 504 .feedback_area_title { 505 font-weight: bold; 506 margin-top: 20px; 507 border-bottom: 1px solid #8686FF; 508 margin-bottom: 10px; 509 padding-left: 8px; 510 } 511 .louzhu { 512 background:transparent url('images/icoLouZhu.gif') no-repeat scroll right top; 513 padding-right:16px; 514 } 515 .feedbackListSubtitle { 516 color: #666; 517 font-size:0.9em; 518 } 519 .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active { 520 color: #666; 521 font-weight: normal; 522 } 523 .feedbackListSubtitle a:hover { 524 color: #f60; 525 text-decoration: none; 526 } 527 .feedbackManage { 528 width: 160px; 529 text-align: right; 530 float: right; 531 } 532 .feedbackCon { 533 border-bottom: 1px solid #ccc; 534 background: url('images/comment.gif') no-repeat 5px 0px; 535 padding: 15px 18px 10px 40px; 536 min-height: 35px; 537 _height: 35px; 538 margin-bottom: 1em; 539 line-height: 1.5em; 540 width:100%; 541 } 542 #divRefreshComments { 543 text-align: right; 544 margin-bottom: 10px; 545 } 546 .commenttb { 547 width: 320px; 548 } 549 /****查看文章页面开始************************ 550 551 /****列表页面开始******************************/ 552 .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/ 553 font-size: 110%; 554 font-weight: bold; 555 border-bottom: 1px solid #8686FF; 556 text-align: right; 557 padding-bottom: 3px; 558 padding-right: 10px; 559 } 560 561 .entrylistDescription { 562 color: #666; 563 text-align: right; 564 padding-top: 5px; 565 padding-bottom: 5px; 566 padding-right: 10px; 567 margin-bottom: 10px; 568 } 569 .entrylistItem { 570 min-height: 20px; 571 _height: 20px; 572 margin-bottom: 30px; 573 padding-bottom: 5px; 574 width: 100%; 575 } 576 .entrylistPosttitle { 577 font-size: 110%; 578 font-weight: bold; 579 border-bottom: 1px solid #666; 580 line-height: 1.5em; 581 width: 100%; 582 padding-left: 5px; 583 } 584 .entrylistPosttitle a:hover { 585 text-decoration: none; 586 } 587 .entrylistPostSummary { 588 margin-top: 5px; 589 padding-left: 5px; 590 margin-bottom: 5px; 591 } 592 .entrylistItemPostDesc { 593 text-align: right; 594 color: #666; 595 } 596 .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active { 597 color: #666; 598 } 599 .entrylistItemPostDesc a:hover { 600 color: #f60; 601 } 602 .entrylist .postSeparator { 603 clear: both; 604 width: 100%; 605 font-size: 0; 606 line-height: 0; 607 margin: 0; 608 padding: 0; 609 height: 0; 610 border: none; 611 } 612 613 .pager { 614 text-align: right; 615 margin-right: 10px; 616 } 617 .PostList { 618 border-bottom: 1px solid #ccc; 619 clear: both; 620 min-height: 1.5em; 621 _height: 1.5em; 622 padding-top: 10px; 623 padding-left: 5px; 624 padding-right: 5px; 625 margin-bottom: 5px; 626 } 627 .postTitl2 { 628 float: left; 629 font-size:0.9em; 630 color: #666; 631 } 632 .postDesc2 { 633 color: #666; 634 float: right; 635 margin-right: ; 636 font-size:0.9em; 637 } 638 .postText2 { 639 clear: both; 640 641 } 642 .pfl_feedback_area_title { 643 text-align: right; 644 line-height: 1.5em; 645 font-weight: bold; 646 border-bottom: 1px solid #666; 647 margin-bottom: 10px; 648 } 649 .pfl_feedbackItem { 650 border-bottom: 1px solid black; 651 margin-bottom: 20px; 652 } 653 .pfl_feedbacksubtitle { 654 width: 100%; 655 border-bottom: 1px dotted #666; 656 height: 1.5em; 657 } 658 .pfl_feedbackname { 659 float: left; 660 } 661 .pfl_feedbackManage { 662 float: right; 663 } 664 .pfl_feedbackCon { 665 color: black; 666 padding-top: 5px; 667 padding-bottom: 5px; 668 } 669 .pfl_feedbackAnswer { 670 color: #F40; 671 text-indent: 2em; 672 } 673 .tdSentMessage { 674 text-align: right; 675 } 676 .errorMessage { 677 width: 300px; 678 float: left; 679 } 680 681 /****列表页面结束******************************/*/ 682 /****相册页面开始******************************/ 683 .divPhoto { 684 border: 1px solid #ccc; 685 padding: 2px; 686 margin-right: 10px; 687 } 688 689 .thumbDescription { 690 color: #666; 691 text-align: right; 692 padding-top: 5px; 693 padding-bottom: 5px; 694 padding-right: 10px; 695 margin-bottom: 10px; 696 } 697 /****相册页面开始******************************/ 698 699 700 /*****留言页面开始*****************************/ 701 #footer { 702 text-align: center; 703 min-height: 15px; 704 _height: 15px; 705 border-top: 1px solid black; 706 margin-top: 10px; 707 padding-top: 10px; 708 margin-bottom: 10px; 709 } 710 /*留言查看页面的个人信息*/ 711 .personInfo { 712 margin-bottom: 20px; 713 } 714 /*留言分页区域*/ 715 .pages { 716 text-align: right; 717 } 718 /*****留言页面结束*****************************/ 719 /*****第三部分结束*******************************/ 720 721 /************************************************** 722 第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如： 723 如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面 724 的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。 725 建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话， 726 并不能保证所有的文章都适合。 727 **************************************************/ 728 /*文章内部常用标签格式*/ 729 .postBody { 730 line-height: 1.5em; 731 } 732 .postBody p,.postCon p{ 733 text-indent: 2em; 734 margin: 0 auto 1em auto; 735 } 736 .postBody h2{ 737 font-size: 150%; 738 margin: 15px auto 2px auto; 739 font-weight:bold; 740 } 741 .postBody h3 { 742 font-size: 120%; 743 margin: 15px auto 2px auto; 744 font-weight:bold; 745 } 746 .postBody h4{ 747 font-size:110%; 748 margin:15px auto 2px auto; 749 font-weight:bold; 750 color:#333; 751 } 752 753 .postBody h5{ 754 font-size:100%; 755 margin:15px auto 2px auto; 756 font-weight:bold; 757 color:#333; 758 } 759 760 .postBody a:link,.postBody a:visited,.postBody a:active{ 761 text-decoration:underline; 762 } 763 .postCon a:link,.postCon a:visited,.postCon a:active{ 764 text-decoration:underline; 765 } 766 .postBody ul,.postCon ul{ 767 margin-left:2em; 768 } 769 770 .postBody li,.postCon li{ 771 list-style-type:disc; 772 margin-bottom:1em; 773 } 774 775 .postBody blockquote{ 776 background:url('images/comment.gif') no-repeat 25px 0px; 777 padding:10px 60px 5px 60px; 778 min-height:35px; 779 _height:35px; 780 line-height:1.6em; 781 color:#333; 782 } 783 /*****第四部分结束*******************************/
扫一扫
2740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
