1. 程式人生 > >簡約響應式佈局樣式

簡約響應式佈局樣式

  1 @font-face {
  2   font-family: 'FontAwesome';
  3   font-style: normal;
  4   font-weight: normal;
  5 }
  6 * {
  7   margin: 0;
  8   padding: 0;
  9 }
 10 body {
 11   background: #eee;
 12   color: #444;
 13   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif
; 14 font-size: 14px; 15 text-shadow: 0 0 1px transparent; 16 color:#505050; 17 } 18 @media screen and (max-width: 1260px) { 19 body { 20 margin: 0px; 21 } 22 } 23 @media screen and (max-width: 600px) { 24 body { 25 font-size: 13px; 26 } 27 } 28 h1,h2,h3,h4,h5,h6
{font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;} 29 h1 {font-size: 1.8em;} 30 h2 {font-size: 1.5em;} 31 h3 {font-size: 1.3em;} 32 a {text-decoration: none;color: #258fb8;} 33 a:hover {text-decoration: underline;} 34 #home{ 35 margin: 0 auto
; 36 width: 90%; 37 background-color: #fff; 38 padding: 20px; 39 margin-top: 20px; 40 margin-bottom: 20px; 41 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 42 border-radius: 20px; 43 } 44 #tbCommentBody {width: 100%;} 45 #blogTitle {width:22%;margin-top: -10px;text-align: center;} 46 .alignright {float: right;} 47 .clearfix {zoom: 1;} 48 .clearfix:before,.clearfix:after {content: "";display: table;} 49 .clearfix:after {clear: both;} 50 #header, #main, #footer {width: 100%;margin: 0 auto;} 51 @media screen and (max-width: 1260px) { 52 #main { 53 width: 100%; 54 } 55 } 56 #mainContent { 57 width: 75%; 58 float: right; 59 margin-left: 10px; 60 } 61 @media screen and (max-width: 1260px) { 62 #main-col { 63 width: 100%; 64 margin-right: -300px; 65 } 66 #home { 67 padding:0px; 68 width:100%; 69 margin-top: -20px; 70 padding-top: 20px; 71 } 72 } 73 @media screen and (max-width: 900px) { 74 #main-col { 75 margin-right: 0; 76 float: none; 77 } 78 } 79 @media screen and (max-width: 1260px) { 80 #wrapper { 81 margin-right: 300px; 82 } 83 } 84 @media screen and (max-width: 900px) { 85 #wrapper { 86 margin-right: 0; 87 } 88 } 89 #header { 90 text-shadow: 0 0 1px #fff; 91 margin: 20px auto 30px; 92 position: relative; 93 height: 60px; 94 color: #999; 95 } 96 #header a { 97 color: #999; 98 } 99 #header a:hover { 100 color: #258fb8; 101 text-decoration: none; 102 } 103 #header h1 { 104 font-weight: normal; 105 font-size: 30px; 106 } 107 #header h2 { 108 font-weight: normal; 109 font-size: 0.9em; 110 margin-top: 10px; 111 margin-left: 30px; 112 } 113 #header #navigator { 114 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 115 width: 100%; 116 font-size: 16px; 117 border-bottom: 1px solid #ededed; 118 border-top: 1px solid #ededed; 119 height: 50px; 120 line-height: 50px; 121 clear: both; 122 margin-top: 25px; 123 } 124 #header #navigator ul { 125 list-style: none; 126 } 127 #header #navigator ul li { 128 float: left; 129 width: 10%; 130 text-align: center; 131 margin-right: 15px; 132 } 133 #header .blogStats { 134 float: right; 135 font-size: 13px; 136 } 137 .topicListFooter { 138 margin-top:30px; 139 margin-bottom: 30px; 140 margin-right: 0 !important; 141 } 142 .topicListFooter a { 143 display: inline !important; 144 padding: 10px 20px; 145 background: #ddd; 146 color: #999; 147 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 148 text-shadow: 0 0 1px #fff; 149 border-radius: 5px; 150 } 151 .topicListFooter a:hover { 152 background: #258fb8; 153 color: #fff; 154 text-decoration: none; 155 text-shadow: none; 156 } 157 .topicListFooter .prev:before { 158 content: '\f053'; 159 padding-right: 10px; 160 font-family: FontAwesome; 161 } 162 .topicListFooter .next:after { 163 content: '\f054'; 164 padding-left: 10px; 165 font-family: FontAwesome; 166 } 167 article { 168 -webkit-box-shadow: 1px 2px 3px #ddd; 169 box-shadow: 1px 2px 3px #ddd; 170 background: #fff; 171 } 172 article.page { 173 padding-left: 20px; 174 } 175 article.page .icon { 176 display: none; 177 } 178 .postIcon:before { 179 content: '\f016'; 180 } 181 article.photo .icon:before { 182 content: '\f030'; 183 } 184 article.link .icon:before { 185 content: '\f0c1'; 186 } 187 article.link .title a:after { 188 content: '\f08e'; 189 color: #999; 190 font: 12px FontAwesome; 191 padding-left: 10px; 192 vertical-align: super; 193 } 194 /******************************************以下自定義樣式***********************************************/ 195 #MySignature{ 196 border-top: 2px solid #ccc; 197 padding-top: 20px; 198 } 199 .pager{ 200 border-bottom: 1px dashed #ddd; 201 padding-bottom: 30px; 202 margin-bottom: -30px; 203 } 204 #blog-calendar{ 205 width:0px; 206 height:0px; 207 display: none !important; 208 } 209 #TopViewPostsBlock ul li{ 210 white-space: nowrap; 211 overflow: hidden; 212 text-overflow: ellipsis; 213 width: 100%; 214 display: inline-block; 215 height: 30px; 216 line-height: 30px; 217 } 218 .day .dayTitle{ 219 display: none !important; 220 } 221 //去掉廣告 222 #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{ 223 display: none !important; 224 } 225 .postTitle, .entrylistPosttitle { 226 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 227 font-size: 1.8em; 228 padding: 20px 20px 15px 0px; 229 background: #fff; 230 border-radius: 10px 10px 0px 0px; 231 white-space: nowrap; 232 overflow: hidden; 233 text-overflow: ellipsis; 234 } 235 .entrylistPostSummary, .postCon, .postBody { 236 /*padding: 0 20px 15px 0px;*/ 237 -webkit-box-shadow: 1px 2px 3px #ddd; 238 box-shadow: 0 2px 0 #ddd; 239 background: #fff; 240 position: relative; 241 } 242 .postDesc, .entrylistItemPostDesc { 243 padding: 0px 20px 15px 0px; 244 color: #999; 245 font-size: 0.9em; 246 line-height: 16px; 247 position: relative; 248 min-height: 16px; 249 background: #fff; 250 border-bottom: 1px dashed #ccc; 251 } 252 #blog-calendar { 253 display: none; 254 } 255 @media screen and (max-width: 600px) { 256 .postCon { 257 padding-left: 0px; 258 } 259 } 260 .postIcon { 261 height: 0px; 262 margin-right: 25px; 263 position: relative; 264 top: 25px; 265 left: 25px; 266 color: #258fb8; 267 } 268 @media screen and (max-width: 600px) { 269 article header .icon { 270 display: none; 271 } 272 } 273 .postIcon:before { 274 position: absolute; 275 font: 32px FontAwesome; 276 top: 0; 277 left: 0; 278 width: 32px; 279 text-align: center; 280 } 281 article header time { 282 color: #999; 283 font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 284 margin-bottom: 5px; 285 display: block; 286 line-height: 1; 287 } 288 article header .title { 289 font-weight: normal; 290 } 291 article header .title a { 292 color: #444; 293 } 294 article header .title a:hover { 295 color: #258fb8; 296 text-decoration: none; 297 } 298 #cnblogs_post_body { 299 text-align: justify; 300 line-height: 1.6; 301 } 302 #cnblogs_post_body p, 303 #cnblogs_post_body blockquote, 304 #cnblogs_post_body ul, 305 #cnblogs_post_body ol, 306 #cnblogs_post_body dl, 307 #cnblogs_post_body table, 308 #cnblogs_post_body iframe, 309 #cnblogs_post_body h3, 310 #cnblogs_post_body h4, 311 #cnblogs_post_body h5, 312 #cnblogs_post_body h6, 313 #cnblogs_post_body .video-container { 314 margin-top: 15px; 315 } 316 #cnblogs_post_body blockquote { 317 border-top: 1px solid #ddd; 318 border-bottom: 1px solid #ddd; 319 font-style: italic; 320 font-family: "Georgia", serif; 321 font-size: 1.2em; 322 padding: 0 30px 15px; 323 } 324 #cnblogs_post_body blockquote footer { 325 border-top: none; 326 font-size: 0.8em; 327 line-height: 1; 328 margin: 20px 0 0; 329 padding-top: 0; 330 } 331 #cnblogs_post_body blockquote footer cite:before { 332 content: '—'; 333 color: #ccc; 334 padding: 0 0.5em; 335 } 336 #cnblogs_post_body code, 337 #cnblogs_post_body pre { 338 font-family: Monaco, Menlo, Consolas, Courier New, monospace; 339 } 340 #cnblogs_post_body code { 341 background: #eee; 342 color: #666; 343 padding: 0 5px; 344 margin: 0 2px; 345 font-size: 0.9em; 346 border: 1px solid #ddd; 347 -webkit-border-radius: 3px; 348 border-radius: 3px; 349 } 350 #cnblogs_post_body pre { 351 background: #eee; 352 overflow: auto; 353 padding: 7px 15px; 354 -webkit-border-radius: 2px; 355 border-radius: 2px; 356 } 357 #cnblogs_post_body pre code { 358 background: none; 359 padding: 0; 360 margin: 0; 361 border: none; 362 -webkit-border-radius: 0; 363 border-radius: 0; 364 } 365 #cnblogs_post_body ul ul, 366 #cnblogs_post_body ol ul, 367 #cnblogs_post_body dl ul, 368 #cnblogs_post_body ul ol, 369 #cnblogs_post_body ol ol, 370 #cnblogs_post_body dl ol, 371 #cnblogs_post_body ul dl, 372 #cnblogs_post_body ol dl, 373 #cnblogs_post_body dl dl { 374 margin-top: 0; 375 } 376 #cnblogs_post_body h1, 377 #cnblogs_post_body h2 { 378 font-weight: bold; 379 border-bottom: 1px solid #ddd; 380 padding-bottom: 10px; 381 margin-top: 20px; 382 } 383 #cnblogs_post_body h3, 384 #cnblogs_post_body h4, 385 #cnblogs_post_body h5, 386 #cnblogs_post_body h6 { 387 font-weight: normal; 388 background: #eee; 389 border-radius: 6px; 390 color: Red; 391 font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; 392 height: 25px; 393 line-height: 25px; 394 margin: 18px 5px !important; 395 padding: 8px; 396 opacity: 0.8; 397 border: 1px dashed #aaa; 398 } 399 .postBody img, 400 .entrylistPostSummary img, .postCon img, 401 .postBody video { 402 max-width: 100%; 403 height: auto; 404 border: none; 405 } 406 #cnblogs_post_body iframe { 407 border: none; 408 } 409 #cnblogs_post_body .caption { 410 display: block; 411 margin-top: 5px; 412 color: #999; 413 position: relative; 414 font-size: 0.9em; 415 padding-left: 25px; 416 } 417 #cnblogs_post_body .caption:before { 418 content: '\f040'; 419 position: absolute; 420 font: 1.3em FontAwesome; 421 position: absolute; 422 left: 0; 423 top: 3px; 424 } 425 #cnblogs_post_body .video-container { 426 position: relative; 427 padding-bottom: 56.25%; 428 padding-top: 30px; 429 height: 0; 430 overflow: hidden; 431 } 432 #cnblogs_post_body .video-container iframe, 433 #cnblogs_post_body .video-container object, 434 #cnblogs_post_body .video-container embed { 435 position: absolute; 436 top: 0; 437 left: 0; 438 width: 100%; 439 height: 100%; 440 margin-top: 0; 441 } 442 #cnblogs_post_body .pullquote { 443 float: right; 444 border: none; 445 padding: 0; 446 margin: 1em 0 0.5em 1.5em; 447 text-align: left; 448 width: 45%; 449 font-size: 1.5em; 450 } 451 #blog-comments-placeholder, #comment_form { 452 padding: 20px; 453 background: #fff; 454 -webkit-box-shadow: 1px 10px 10px #ddd; 455 box-shadow: 10px 10px 10px #ddd; 456 margin-bottom: 50px; 457 border: 1px solid #ccc; 458 padding-top:0; 459 } 460 .feedback_area_title { 461 margin-bottom: 15px; 462 font-size: 1.8em; 463 } 464 .feedbackItem { 465 border-bottom: 1px dashed #CCC; 466 margin-bottom: 10px; 467 padding: 5px; 468 } 469 .color_shine {background: rgb(226, 242, 255);} 470 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;} 471 #comment_form .title { 472 font-weight: normal; 473 margin-bottom: 15px; 474 } 475 #ad_under_post_holder { 476 display: none; 477 } 478 .entrylistTitle { 479 color: #999; 480 font-weight: normal; 481 margin-bottom: 30px; 482 text-shadow: 0 0 1px #fff; 483 } 484 .entrylistTitle:before { 485 font-family: FontAwesome; 486 content: '\f07b'; 487 padding-right: 15px; 488 } 489 .archive { 490 -webkit-box-shadow: 1px 2px 3px #ddd; 491 box-shadow: 1px 2px 3px #ddd; 492 border-bottom: 1px solid #ddd; 493 margin-bottom: 50px; 494 } 495 .archive article { 496 -webkit-box-shadow: none; 497 box-shadow: none; 498 } 499 .archive article .post-content { 500 margin-bottom: 0; 501 } 502 #sideBar{ 503 width: 22%; 504 line-height: 1.8em; 505 float: left; 506 } 507 @media screen and (max-width: 900px) { 508 #sideBar { 509 float: none; 510 width: 100%; 511 } 512 } 513 .catListLink, .catListMyTeams, .catListComment, .catListFeedback { 514 display: none; 515 } 516 .search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank { 517 background: #fff; 518 -webkit-box-shadow: 1px 2px 3px #ddd; 519 box-shadow: 0px 5px 5px #ddd; 520 margin-bottom: 30px; 521 word-wrap: break-word; 522 border-radius: 10px; 523 margin-top: 10px; 524 border: 1px solid #ddd; 525 } 526 #blog-sidecolumn h3, .newsItem h3 { 527 padding: 15px 20px; 528 font-size: 1em; 529 border-bottom: 1px solid #ddd; 530 font-weight: normal; 531 } 532 #blog-sidecolumn ul, .newsItem #blog-news { 533 font-size: 0.9em; 534 padding: 15px 20px; 535 } 536 #blog-sidecolumn ul, 537 #blog-sidecolumn ol, 538 #blog-sidecolumn dl { 539 list-style: none; 540 } 541 #blog-sidecolumn ul ul, 542 #blog-sidecolumn ol ul, 543 #blog-sidecolumn dl ul, 544 #blog-sidecolumn ul ol, 545 #blog-sidecolumn ol ol, 546 #blog-sidecolumn dl ol, 547 #blog-sidecolumn ul dl, 548 #blog-sidecolumn ol dl, 549 #blog-sidecolumn dl dl { 550 list-style: disc; 551 margin-left: 20px; 552 } 553 #q { 554 background: #fff; 555 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 556 font-style: italic; 557 font-size: 1em; 558 padding: 10px 15px; 559 border: 1px solid #ddd; 560 width: 100%; 561 -webkit-box-sizing: border-box; 562 -moz-box-sizing: border-box; 563 box-sizing: border-box; 564 color: #999; 565 height: 100%; 566 } 567 #q:focus { 568 color: #444; 569 } 570 /*隱藏搜尋框中的無用元件*/ 571 .mySearch { 572 display: none; 573 } 574 575 #sideBar .tag small { 576 margin-left: 15px; 577 color: #999; 578 } 579 #sideBar .tag small:before { 580 content: '('; 581 } 582 #sideBar .tag small:after { 583 content: ')'; 584 } 585 #sideBar .twitter li { 586 border-bottom: 1px solid #ddd; 587 padding: 15px 20px; 588 font-size: 0.9em; 589 } 590 #sideBar .twitter li:last-of-type { 591 border-bottom: none; 592 } 593 #sideBar .twitter small { 594 display: block; 595 margin-top: 10px; 596 color: #999; 597 line-height: 1; 598 } 599 #sideBar .tagcloud .entry { 600 padding-right: 5px; 601 } 602 #sideBar .tagcloud a { 603 margin-right: 10px; 604 display: inline-block; 605 } 606 #footer { 607 color: #999; 608 margin-bottom: 50px; 609 font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 610 text-shadow: 0 0 1px #fff; 611 text-align:center; 612 margin: 30px 0px 50px; 613 } 614 .entry .gist { 615 background: #eee; 616 border: 1px solid #ddd; 617 margin-top: 15px; 618 padding: 7px 15px; 619 -webkit-border-radius: 2px; 620 border-radius: 2px; 621 text-shadow: 0 0 1px #fff; 622 line-height: 1.6; 623 overflow: auto; 624 color: #666; 625 } 626 .entry .gist .gist-file { 627 border: none; 628 font-family: inherit; 629 margin: 0; 630 font-size: 0.9em; 631 } 632 .entry .gist .gist-file .gist-data { 633 background: none; 634 border-bottom: none; 635 } 636 .entry .gist .gist-file .gist-data pre { 637 padding: 0 !important; 638 font-family: Monaco, Menlo, Consolas, Courier New, monospace; 639 } 640 .entry .gist .gist-file .gist-meta { 641 background: none; 642 color: #999; 643 margin-top: 5px; 644 padding: 0; 645 text-shadow: 0 0 1px #fff; 646 font-size: 100%; 647 } 648 .entry .gist .gist-file .gist-meta a { 649 color: #258fb8; 650 } 651 .entry .gist .gist-file .gist-meta a:visited { 652 color: #258fb8; 653 } 654 figure.highlight { 655 background: #eee; 656 border: 1px solid #ddd; 657 margin-top: 15px; 658 padding: 7px 15px; 659 -webkit-border-radius: 2px; 660 border-radius: 2px; 661 text-shadow: 0 0 1px #fff; 662 line-height: 1.6; 663 overflow: auto; 664 position: relative; 665 font-size: 0.9em; 666 } 667 figure.highlight figcaption { 668 color: #999; 669 margin-bottom: 5px; 670 text-shadow: 0 0 1px #fff; 671 } 672 figure.highlight figcaption a { 673 position: absolute; 674 right: 15px; 675 } 676 figure.highlight pre { 677 border: none; 678 padding: 0; 679 margin: 0; 680 } 681 figure.highlight table { 682 margin-top: 0; 683 border-spacing: 0; 684 } 685 figure.highlight .gutter { 686 color: #999; 687 padding: 7px 10px 7px 5px !important; 688 border-right: 1px solid #ddd; 689 text-align: right; 690 } 691 figure.highlight .code { 692 padding: 7px 7px 7px 10px !important; 693 border-left: 1px solid #fff; 694 color: #666; 695 } 696 pre .comment, 697 pre .template_comment, 698 pre .diff .header, 699 pre .doctype, 700 pre .pi, 701 pre .lisp .string, 702 pre .javadoc { 703 color: #93a1a1; 704 font-style: italic; 705 } 706 pre .keyword, 707 pre .winutils, 708 pre .method, 709 pre .addition, 710 pre .css .tag, 711 pre .request, 712 pre .status, 713 pre .nginx .title { 714 color: #859900; 715 } 716 pre .number, 717 pre .command, 718 pre .string, 719 pre .tag .value, 720 pre .phpdoc, 721 pre .tex .formula, 722 pre .regexp, 723 pre .hexcolor { 724 color: #2aa198; 725 } 726 pre .title, 727 pre .localvars, 728 pre .chunk, 729 pre .decorator, 730 pre .built_in, 731 pre .identifier, 732 pre .vhdl, 733 pre .literal, 734 pre .id { 735 color: #268bd2; 736 } 737 pre .attribute, 738 pre .variable, 739 pre .lisp .body, 740 pre .smalltalk .number, 741 pre .constant, 742 pre .class .title, 743 pre .parent, 744 pre .haskell .type { 745 color: #b58900; 746 } 747 pre .preprocessor, 748 pre .preprocessor .keyword, 749 pre .shebang, 750 pre .symbol, 751 pre .symbol .string, 752 pre .diff .change, 753 pre .special, 754 pre .attr_selector, 755 pre .important, 756 pre .subst, 757 pre .cdata, 758 pre .clojure .title { 759 color: #cb4b16; 760 } 761 pre .deletion { 762 color: #dc322f; 763 } 764 .feedbackListSubtitle { position: relative;} 765 .feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;} 766 .cnblogs_code_toolbar {display: none;} 767 #cnblogs_post_body {overflow: hidden;} 768 #cnblogs_post_body ol { padding-left: 40px;} 769 #cnblogs_post_body ul { margin-left: 35px;} 770 .fixedReadRank { position: fixed; top: 20px; width: 270px; } 771 .fixedRecRank { position: fixed; top: 360px; width: 270px; } 772 figure.highlight { margin-top: 0; padding: 0;} 773 figure table {width: 100%; margin: 0 !important;} 774 #cnblogs_post_body pre { padding: 0; } 775 #cnblogs_post_body th, #cnblogs_post_body td { padding: 0; } 776 .cnblogs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;} 777 .cnblogs_code th {border: 1px solid silver; padding: 3px;} 778 .cnblogs_code { padding: 0;} 779 /*評論標題*/ 780 .feedback_area_title { 781 padding:10px; 782 font-size:24px; 783 font-weight:bold; 784 color:#aaa; 785 border-bottom:1px dashed #ccc; 786 } 787 .feedbackListSubtitle { 788 font-size:12px; 789 color:#888; 790 } 791 .feedbackListSubtitle a { 792 color:#888; 793 } 794 .comment_quote { 795 background:#FCFAAC; 796 padding:15px; 797 border:1px solid #CCC; 798 } 799 #commentform_title { 800 color:#aaa; 801 background-image:none; 802 background-repeat:no-repeat; 803 margin-bottom:10px; 804 padding:10px 20px 10px 10px; 805 font-size:24px; 806 font-weight:bold; 807 border-bottom:1px dashed #ccc; 808 } 809 /*評論框*/ 810 #comment_form { 811 margin:10px 0; 812 padding:25px; 813 border-radius: 10px; 814 height: 343px; 815 overflow: hidden; 816 } 817 .commentform { 818 margin:10px 0; 819 padding:10px 20px; 820 background:#fff; 821 } 822 /*評論輸入域*/ 823 #tbCommentBody { 824 font-family:'MIcrosoft Yahei'; 825 margin-top:10px; 826 background:white; 827 color:#333; 828 border:2px solid #fff; 829 box-shadow:inset 0 0 8px #aaa; 830 height:120px; 831 font-size:14px; 832 min-height:120px; 833 border-radius: 10px; 834 } 835 /*評論條目*/ 836 .feedbackItem { 837 font-size:14px; 838 line-height:24px; 839 margin:10px 0; 840 padding:20px; 841 } 842 .feedbackListSubtitle { 843 font-weight:normal; 844 } 845 846 /*green_channel*/ 847 #green_channel { 848 text:align:right; 849 padding-left:0px; 850 font-weight:normal; 851 font-size:13px; 852 width:100%; 853 border:1px dashed #ccc; 854 color:#fff; 855 border-radius:4px; 856 margin:5px auto; 857 } 858 @media screen and (max-width: 768px) { 859 body { 860 font-size: 13px; 861 } 862 #main{padding:0px !important;} 863 #mainContent{width: 92%;float: right;margin: 0px 4%;} 864 #sideBar {display: none;} 865 #blogTitle {width: 100%;float:none;margin: 20px auto 0 !important;} 866 #header{height:auto !important;margin: 20px auto 5px;} 867 #header #navigator{width: 100%;text-align: center;float:none;} 868 #header #navigator ul{width: 100%;margin-left: 6%;} 869 #header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;} 870 .postTitle, .entrylistPosttitle{font-size:14px;padding: 20px 20px 15px 0px;} 871 .postDesc, .entrylistItemPostDesc{padding: 0px 20px 15px 0px;} 872 #green_channel{padding:0px !important;} 873 #blog_stats{display: none;} 874 #home { 875 border-radius :0px; 876 } 877 .topicListFooter a { 878 padding: 0.5% 0.8%; 879 } 880 } 881 #blog-news label{box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;} 882 #div_digg{ 883 padding: 5px; 884 border-radius: 5px; 885 position: fixed; 886 left: 0; 887 bottom: 80px; 888 width:80px; 889 z-index:100; 890 display: none; 891 } 892 .diggit{ 893 background: url() no-repeat; 894 width: 60px; 895 height: 60px; 896 } 897 #div_digg .diggnum{ 898 position: absolute; 899 bottom: -20px; 900 left: 6px; 901 background: #D0D0D0; 902 padding: 2px 0; 903 display: block; 904 color: #555; 905 font-size: 12px; 906 text-align: center; 907 width: 60px; 908 -moz-border-radius: 4px; 909 -webkit-border-radius: 4px; 910 font-weight: bold; 911 } 912 .buryit{ 913 display: none; 914 } 915 /*scroll to top*/ 916 #scrollTop div{ 917 left:0; 918 overflow:hidden; 919 position:absolute; 920 top:0; 921 width:149px; 922 margin:0; 923 padding:0 924 } 925 #scrollTop .level-2{ 926 background:url() no-repeat scroll -149px 0 transparent; 927 display:none; 928 height:250px; 929 opacity:0; 930 z-index:1 931 } 932 #scrollTop .level-3{ 933 background:none repeat scroll 0 0 transparent; 934 cursor:pointer; 935 display:block; 936 height:150px; 937 z-index:2 938 } 939 #scrollTop{ 940 background:url() no-repeat scroll 0 0 transparent; 941 cursor:default; 942 display:block; 943 height:250px; 944 overflow:hidden; 945 position:fixed; 946 right:0; 947 top:80%; 948 width:149px; 949 z-index:11; 950 margin:-125px 0 0; 951 padding:0 952 } 953 /*評論帶頭像,且支援旋轉*/ 954 .feedbackCon img:hover { 955 -webkit-transform: rotateZ(360deg); 956 -moz-transform: rotateZ(360deg); 957 -ms-transform: rotateZ(360deg); 958 -o-transform: rotateZ(360deg); 959 transform: rotateZ(360deg); 960 } 961 962 .feedbackCon img { 963 border-radius: 40px; 964 -webkit-transition: all 0.6s ease-out; 965 -moz-transition: all 0.5s ease-out; 966 -ms-transition: all 0.5s ease-out; 967 -o-transition: all 0.5s ease-out; 968 transition: all 0.5s ease-out; 969 } 970 971 /**---------------------------guanghe--------------------------------*/ 972 .headermaintitle { 973 font-size: 35px; 974 } 975 #comment_form { 976 display: none; 977 } 978 #blog-comments-placeholder { 979 display: none; 980 }