页面定制Css代码
1 /************************************************** 2 第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。 3 如果不符合你皮肤的要求，你可以在后面通过更高的优先级覆盖着这些样式，但是 4 你不能删除这些样式。 5 **************************************************/ 6 #EntryTag { 7 margin-top: 20px; 8 font-size: 9pt; 9 color: gray; 10 } 11 .topicListFooter { 12 text-align: right; 13 margin-right: 10px; 14 margin-top: 10px; 15 } 16 #divRefreshComments{ 17 text-align: right; 18 margin-right: 10px; 19 margin-bottom: 5px; 20 font-size: 9pt; 21 } 22 /*****第一部分结束*******************************/ 23 24 /************************************************** 25 第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你 26 可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤 27 模板所有页面的变化。因为它们是全局的。 28 **************************************************/ 29 * { 30 margin: 0; 31 padding: 0; 32 } 33 html { 34 height: 100%; 35 } 36 body, html { 37 color: #7a7d86; 38 /*background: #FFF;*/ 39 font-family: 'PingFang SC','Helvetica Neue','Helvetica','Arial',sans-serif; 40 font-weight: 300; 41 font-size: 0.9rem; 42 line-height: 1.65; 43 44 background-color: #f2f5fa; 45 background-image: url(http://images.cnblogs.com/cnblogs_com/liangdecha/1293564/o_overlay.png), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMTAwJyB2aWV3Qm94PScwIDAgMjAwIDEwMCcgcHJlc2VydmVBc3BlY3RSYXRpbz0nbm9uZSc+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSdyZzEnIGN4PScwJScgY3k9JzAlJyByPScxMDAlJyBmeD0nMCUnIGZ5PScwJSc+PHN0b3Agb2Zmc2V0PScwJScgc3R5bGU9J3N0b3AtY29sb3I6ICNhNDgwZmY7IHN0b3Atb3BhY2l0eTogMC41JyAvPjxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6ICNhNDgwZmY7IHN0b3Atb3BhY2l0eTowJyAvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSdyZzInIGN4PScxMDAlJyBjeT0nMCUnIHI9JzEwMCUnIGZ4PScxMDAlJyBmeT0nMCUnPjxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiAjZmY4ZjgzOyBzdG9wLW9wYWNpdHk6IDAuNScgLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiAjZmY4ZjgzOyBzdG9wLW9wYWNpdHk6MCcgLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cG9seWdvbiBwb2ludHM9JzAsMCAxMjUsMCAxMjUsMTAwIDAsMTAwJyBzdHlsZT0nZmlsbDogdXJsKCNyZzEpOycgLz48cG9seWdvbiBwb2ludHM9Jzc1LDAgMjAwLDAgMjAwLDEwMCA3NSwxMDAnIHN0eWxlPSdmaWxsOiB1cmwoI3JnMik7JyAvPjwvc3ZnPg==), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMTAwJyB2aWV3Qm94PScwIDAgMjAwIDEwMCcgcHJlc2VydmVBc3BlY3RSYXRpbz0nbm9uZSc+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSdyZzEnIGN4PScwJScgY3k9JzEwMCUnIHI9JzEwMCUnIGZ4PScwJScgZnk9JzEwMCUnPjxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiAjYTQ4MGZmOyBzdG9wLW9wYWNpdHk6IDAuNScgLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiAjYTQ4MGZmOyBzdG9wLW9wYWNpdHk6MCcgLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0ncmcyJyBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzEwMCUnIGZ4PScxMDAlJyBmeT0nMTAwJSc+PHN0b3Agb2Zmc2V0PScwJScgc3R5bGU9J3N0b3AtY29sb3I6ICNmZjhmODM7IHN0b3Atb3BhY2l0eTogMC41JyAvPjxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6ICNmZjhmODM7IHN0b3Atb3BhY2l0eTowJyAvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxwb2x5Z29uIHBvaW50cz0nMCwwIDEyNSwwIDEyNSwxMDAgMCwxMDAnIHN0eWxlPSdmaWxsOiB1cmwoI3JnMSk7JyAvPjxwb2x5Z29uIHBvaW50cz0nNzUsMCAyMDAsMCAyMDAsMTAwIDc1LDEwMCcgc3R5bGU9J2ZpbGw6IHVybCgjcmcyKTsnIC8+PC9zdmc+); 46 background-size: auto, 100% 60rem, 100% 60rem; 47 background-position: top left, top left, bottom left; 48 background-repeat: repeat, no-repeat, no-repeat; 49 } 50 table { 51 border-collapse: collapse; 52 border-spacing: 0; 53 } 54 fieldset, img { 55 border: 0; 56 } 57 ul { 58 word-break: break-all; 59 } 60 li { 61 list-style: none; 62 } 63 h1, h2, h3, h4, h5, h6 { 64 font-size: 100%; 65 font-weight: normal; 66 } 67 a:link { 68 color: black; 69 text-decoration: none; 70 } 71 a:visited { 72 color: black; 73 text-decoration: none; 74 } 75 a:hover { 76 color: #e59dc4; 77 text-decoration: underline; 78 -webkit-transition: all 0.2s; 79 -moz-transition: all 0.2s; 80 -ms-transition: all 0.2s; 81 -o-transition: all 0.2s; 82 transition: all 0.2s; 83 } 84 a:active { 85 color: black; 86 text-decoration: none; 87 } 88 .clear { 89 clear: both; 90 } 91 /*****第二部分结束*******************************/ 92 93 /************************************************** 94 第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他 95 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮 96 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。 97 **************************************************/ 98 /*****home和头部开始**************************/ 99 #home { 100 /*position: relative;*/ 101 margin: 0 auto; 102 width:calc(100% - 24em); 103 min-width: 736px; 104 padding-top: 6.0rem; 105 /*opacity: 0.6;*/ 106 } 107 #header { 108 padding-bottom: 5px; 109 margin-top: 4rem; 110 margin-bottom: 2rem; 111 /*background-color: #fff; 112 background-image: url(http://images.cnblogs.com/cnblogs_com/liangdecha/1293564/o_overlay.png), url(http://images.cnblogs.com/cnblogs_com/liangdecha/1293564/o_overlay.png), linear-gradient(45deg, #a2cedc, #ff8f83);*/ 113 /*opacity: 0.5;*/ 114 /*box-shadow: 0 1rem 4rem 0.125rem rgba(161, 177, 204, 0.325); 115 z-index: -1;*/ 116 } 117 #blogTitle { 118 /*height: 60px;*/ 119 clear: both; 120 text-align: center; 121 color: #fff; 122 width: 100%; 123 } 124 #blogTitle h1 { 125 font-size: 200%; 126 font-weight: bold; 127 line-height: 1.5em; 128 padding-top: 2rem; 129 } 130 #blogTitle h1 a{ 131 color: #fff !important; 132 } 133 #blogTitle h2 { 134 padding-bottom: 2rem; 135 } 136 #blogLogo { 137 float: right; 138 } 139 #navigator { 140 clear: both; 141 position: fixed; 142 top: 0; 143 left: 0; 144 width: 100%; 145 height: 4.5rem; 146 line-height: 4.5rem; 147 background-color: #ffffff; 148 box-shadow: 0 0 0.5rem 0 rgba(161, 177, 204, 0.325); 149 cursor: default; 150 z-index: 10000; 151 } 152 #navList { 153 min-height: 30px; 154 float: right; 155 } 156 #navList li { 157 float: left; 158 } 159 #navList a { 160 display: block; 161 width: 5em; 162 float: left; 163 text-align: center; 164 font-weight: 600; 165 } 166 #navList a:link, #navList a:visited, #navList a:active { 167 color: #7a7d86; 168 } 169 #navList a:hover { 170 /*color: white; 171 background-color: #e59dc4;*/ 172 color: #e59dc4; 173 border-bottom: 2px solid #ff8f83; 174 text-decoration: none; 175 -webkit-transition: all 0.2s ease-in-out; 176 -moz-transition: all 0.2s ease-in-out; 177 -ms-transition: all 0.2s ease-in-out; 178 -o-transition: all 0.2s ease-in-out; 179 transition: all 0.2s ease-in-out; 180 } 181 182 .blogStats { 183 display: none; 184 float: right; 185 color: #ccc; 186 margin-top: 8px; 187 margin-right: 2px; 188 text-align: right; 189 } 190 /*****home和头部结束**************************/ 191 192 /*****主页文章列表开始**************************/ 193 #main{ 194 width: 100%; 195 /*min-width: 950px;*/ 196 text-align: left; 197 198 } 199 #mainContent .forFlow{ 200 float: none; 201 width: auto; 202 } 203 204 #mainContent { 205 /*overflow: hidden;*/ 206 word-break: break-all; 207 float: left; 208 width: 70%; 209 210 } 211 .day { 212 min-height: 10px; 213 _height: 10px; 214 margin-bottom: 20px; 215 padding-bottom: 5px; 216 background-color: #fff; 217 box-shadow: 0 1rem 4rem 0.125rem rgba(161, 177, 204, 0.325); 218 padding: 1rem 1rem; 219 } 220 .dayTitle { 221 width: 100%; 222 color: #666; 223 224 font-weight: bold; 225 line-height: 1.5em; 226 font-size: 110%; 227 margin-top: 3px; 228 margin-bottom: 10px; 229 230 clear:both; 231 /*border-bottom: 2px solid #666;*/ 232 text-align:center; 233 234 } 235 .dayTitle:after{ 236 content: ""; 237 display: block; 238 margin:1rem auto; 239 bottom: 0; 240 width: 100%; 241 height: 2px; 242 background-image: linear-gradient(90deg, #a480ff, #ff8f83); 243 } 244 .postTitle { 245 font-size: 110%; 246 font-weight: bold; 247 /*border-bottom: 1px solid rgba(144, 144, 144, 0.25);*/ 248 float: right; 249 line-height: 1.5em; 250 width: 100%; 251 clear:both; 252 } 253 .postTitle a:link, .postTitle a:visited, .postTitle a:active { 254 color: #444; 255 } 256 .postTitle a:hover { 257 color: #e59dc4; 258 text-decoration: none; 259 -webkit-transition: all 0.2s; 260 -moz-transition: all 0.2s; 261 -ms-transition: all 0.2s; 262 -o-transition: all 0.2s; 263 transition: all 0.2s; 264 } 265 .postCon { 266 float: right; 267 line-height: 1.5em; 268 width: 100%; 269 clear:both; 270 padding: 10px 0; 271 } 272 .postDesc { 273 float: right; 274 width: 100%; 275 clear:both; 276 text-align: right; 277 padding-right: 5px; 278 color: #666; 279 margin-top: 5px; 280 } 281 .postDesc a:link, .postDesc a:visited, .postDesc a:active { 282 color: #666; 283 } 284 .postDesc a:hover { 285 color: #e59dc4; 286 text-decoration: none; 287 -webkit-transition: all 0.2s; 288 -moz-transition: all 0.2s; 289 -ms-transition: all 0.2s; 290 -o-transition: all 0.2s; 291 transition: all 0.2s; 292 } 293 .postSeparator { 294 clear: both; 295 height: 1px; 296 border-top: 1px dotted rgba(144, 144, 144, 0.25); 297 /*padding-top: 0.6rem;*/ 298 width: 100%; 299 clear:both; 300 float: right; 301 margin: 15px auto 15px auto; 302 } 303 /*****主页文章列表开始**************************/ 304 305 /*****侧边栏开始********************************/ 306 #sideBar { 307 /*width: 230px; 308 min-height: 200px; 309 padding: 0px 0 0px 5px; 310 float: left; 311 -o-text-overflow: ellipsis; 312 text-overflow: ellipsis;*/ 313 /*overflow: hidden;*/ 314 word-break: break-all; 315 float: right; 316 width: 28%; 317 } 318 .newsItem .catListTitle { 319 display: none; 320 } 321 .newsItem { 322 padding: 1rem 1rem; 323 margin-bottom: 8px; 324 background-color: #fff; 325 box-shadow: 0 1rem 4rem 0.125rem rgba(161, 177, 204, 0.325); 326 } 327 #leftcontentcontainer{ 328 background-color: #fff; 329 box-shadow: 0 1rem 4rem 0.125rem rgba(161, 177, 204, 0.325); 330 padding: 1rem 1rem; 331 } 332 /**日历控件样式开始**/ 333 #calendar { 334 width: 229px; 335 display: none; 336 } 337 #calendar .Cal { 338 width: 100%; 339 line-height: 1.5em; 340 } 341 .Cal {/**日历容器table**/ 342 border: none; 343 color: #666; 344 } 345 #calendar table a:link, #calendar table a:visited, #calendar table a:active { 346 font-weight: bold; 347 } 348 #calendar table a:hover { 349 color: white; 350 text-decoration: none; 351 background-color: #e59dc4; 352 -webkit-transition: all 0.2s; 353 -moz-transition: all 0.2s; 354 -ms-transition: all 0.2s; 355 -o-transition: all 0.2s; 356 transition: all 0.2s; 357 } 358 .CalTodayDay{/**今天日期样式**/ 359 color:#e59dc4; 360 } 361 #calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/ 362 font-weight: bold; 363 background-color: white; 364 } 365 .CalDayHeader{ 366 border-bottom:1px solid #ccc; 367 } 368 .CalTitle{/**日历年月头部样式**/ 369 width:100%; 370 background:white; 371 color:black; 372 border-bottom:1px solid #666; 373 } 374 /**日历控件样式结束**/ 375 .catListTitle { 376 font-weight: bold; 377 line-height: 1.5em; 378 font-size: 110%; 379 margin-top: 15px; 380 margin-bottom: 10px; 381 padding-bottom: 10px; 382 border-bottom: 1px solid rgba(229, 157, 196, 0.25); 383 text-align: center; 384 } 385 .catListComment { 386 line-height: 1.5em; 387 } 388 .divRecentComment { 389 text-indent: 2em; 390 color: #666; 391 } 392 #sideBarMain ul { 393 line-height: 1.5em; 394 } 395 /*****侧边栏结束********************************/ 396 397 398 /****查看文章页面开始*************************/ 399 #topics { 400 width: 100%; 401 /*min-height: 200px; 402 padding: 0px 0px 10px 0;*/ 403 float: left; 404 -o-text-overflow: ellipsis; 405 text-overflow: ellipsis; 406 overflow: hidden; 407 word-break: break-all; 408 background-color: #fff; 409 box-shadow: 0 1rem 4rem 0.125rem rgba(161, 177, 204, 0.325); 410 } 411 #topics .postTitle { 412 font-size: 130%; 413 font-weight: bold; 414 /*border-bottom: 1px solid #999;*/ 415 float: left; 416 line-height: 1.5em; 417 width: 100%; 418 padding-left: 5px; 419 } 420 #topics .postTitle:after{ 421 content: ""; 422 display: block; 423 margin:1rem auto; 424 bottom: 0; 425 width: 100%; 426 height: 2px; 427 background-image: linear-gradient(90deg, #a480ff, #ff8f83); 428 } 429 #topics .post{ 430 padding: 1rem 1rem; 431 } 432 .postBody { 433 padding: 5px 2px 5px 5px; 434 line-height: 1.5em; 435 color: #000; 436 border-bottom: 1px solid rgba(144, 144, 144, 0.25); 437 } 438 #EntryTag { 439 color: #666; 440 } 441 #EntryTag a { 442 margin-left: 5px; 443 } 444 #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active { 445 color: #666; 446 } 447 #EntryTag a:hover { 448 color: #e59dc4; 449 -webkit-transition: all 0.2s; 450 -moz-transition: all 0.2s; 451 -ms-transition: all 0.2s; 452 -o-transition: all 0.2s; 453 transition: all 0.2s; 454 } 455 #topics .postDesc { 456 float: right; 457 width: 100%; 458 text-align: right; 459 padding-right: 5px; 460 color: #666; 461 margin-top: 10px; 462 padding-bottom: 10px; 463 } 464 .feedback_area_title { 465 font-weight: bold; 466 margin-top: 20px; 467 border-bottom: 1px solid #e59dc4; 468 margin-bottom: 10px; 469 padding-left: 8px; 470 padding-bottom: 0.6rem; 471 padding-top: 0.6rem; 472 } 473 .louzhu { 474 background:transparent url('images/icoLouZhu.gif') no-repeat scroll right top; 475 padding-right:16px; 476 } 477 .feedbackListSubtitle { 478 color: #666; 479 } 480 .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active { 481 color: #666; 482 font-weight: normal; 483 } 484 .feedbackListSubtitle a:hover { 485 color: #e59dc4; 486 text-decoration: none; 487 -webkit-transition: all 0.2s; 488 -moz-transition: all 0.2s; 489 -ms-transition: all 0.2s; 490 -o-transition: all 0.2s; 491 transition: all 0.2s; 492 } 493 .feedbackManage { 494 width: 200px; 495 text-align: right; 496 float: right; 497 } 498 .feedbackCon { 499 border-bottom: 1px solid #ccc; 500 background: url('images/comment.gif') no-repeat 5px 0px; 501 padding: 2.5rem 0 1rem 0; 502 min-height: 35px; 503 _height: 35px; 504 margin-bottom: 1em; 505 line-height: 1.5em; 506 width:100%; 507 } 508 #divRefreshComments { 509 text-align: right; 510 margin-bottom: 10px; 511 } 512 .commenttb { 513 width: 320px; 514 } 515 /****查看文章页面开始*************************/ 516 517 /****列表页面开始******************************/ 518 .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/ 519 font-size: 110%; 520 font-weight: bold; 521 /*border-bottom: 1px solid black;*/ 522 text-align: right; 523 padding-bottom: 3px; 524 padding-right: 10px; 525 } 526 .entrylistTitle,.PostListTitle,.thumbTitle:after{ 527 content: ""; 528 display: block; 529 margin:1rem auto; 530 bottom: 0; 531 width: 100%; 532 /* height: 2px; 533 background-image: linear-gradient(90deg, #a480ff, #ff8f83);*/ 534 } 535 536 .entrylistDescription { 537 color: #666; 538 text-align: right; 539 padding-top: 5px; 540 padding-bottom: 5px; 541 padding-right: 10px; 542 margin-bottom: 10px; 543 } 544 .entrylistItem { 545 min-height: 20px; 546 _height: 20px; 547 margin-bottom: 30px; 548 padding-bottom: 5px; 549 width: 100%; 550 } 551 .entrylistPosttitle { 552 font-size: 110%; 553 font-weight: bold; 554 555 line-height: 1.5em; 556 width: 100%; 557 padding-left: 5px; 558 } 559 .entrylistPosttitle :after{ 560 content: ""; 561 display: block; 562 margin:1rem auto; 563 bottom: 0; 564 width: 100%; 565 height: 2px; 566 background-image: linear-gradient(90deg, #a480ff, #ff8f83); 567 } 568 .entrylistPosttitle a:hover { 569 text-decoration: none; 570 -webkit-transition: all 0.2s; 571 -moz-transition: all 0.2s; 572 -ms-transition: all 0.2s; 573 -o-transition: all 0.2s; 574 transition: all 0.2s; 575 } 576 .entrylistPostSummary { 577 margin-top: 5px; 578 padding-left: 5px; 579 margin-bottom: 5px; 580 } 581 .entrylistItemPostDesc { 582 text-align: right; 583 color: #666; 584 } 585 .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active { 586 color: #666; 587 } 588 .entrylistItemPostDesc a:hover { 589 color: #e59dc4; 590 -webkit-transition: all 0.2s; 591 -moz-transition: all 0.2s; 592 -ms-transition: all 0.2s; 593 -o-transition: all 0.2s; 594 transition: all 0.2s; 595 } 596 .entrylist .postSeparator { 597 clear: both; 598 width: 100%; 599 font-size: 0; 600 line-height: 0; 601 margin: 0; 602 padding: 0; 603 height: 0; 604 border: none; 605 } 606 607 .pager { 608 text-align: right; 609 margin-right: 10px; 610 } 611 .PostList { 612 border-bottom: 1px solid #ccc; 613 clear: both; 614 min-height: 1.5em; 615 _height: 1.5em; 616 padding-top: 10px; 617 padding-left: 5px; 618 padding-right: 5px; 619 margin-bottom: 5px; 620 } 621 .postTitl2 { 622 float: left; 623 } 624 .postDesc2 { 625 color: #666; 626 float: right; 627 margin-right: ; 628 } 629 .postText2 { 630 clear: both; 631 color: #666; 632 } 633 .pfl_feedback_area_title { 634 text-align: right; 635 line-height: 1.5em; 636 font-weight: bold; 637 border-bottom: 1px solid #666; 638 margin-bottom: 10px; 639 } 640 .pfl_feedbackItem { 641 border-bottom: 1px solid black; 642 margin-bottom: 20px; 643 } 644 .pfl_feedbacksubtitle { 645 width: 100%; 646 border-bottom: 1px dotted #666; 647 height: 1.5em; 648 } 649 .pfl_feedbackname { 650 float: left; 651 } 652 .pfl_feedbackManage { 653 float: right; 654 } 655 .pfl_feedbackCon { 656 color: black; 657 padding-top: 5px; 658 padding-bottom: 5px; 659 } 660 .pfl_feedbackAnswer { 661 color: #F40; 662 text-indent: 2em; 663 } 664 .tdSentMessage { 665 text-align: right; 666 } 667 .errorMessage { 668 width: 300px; 669 float: left; 670 } 671 .mySearch #q { 672 height: 1.5rem; 673 max-width: 175px; 674 } 675 /****列表页面结束******************************/ 676 677 /****相册页面开始******************************/ 678 .divPhoto { 679 border: 1px solid #ccc; 680 padding: 2px; 681 margin-right: 10px; 682 } 683 684 .thumbDescription { 685 color: #666; 686 text-align: right; 687 padding-top: 5px; 688 padding-bottom: 5px; 689 padding-right: 10px; 690 margin-bottom: 10px; 691 } 692 /****相册页面开始******************************/ 693 694 695 /*****留言页面开始*****************************/ 696 #footer { 697 text-align: center; 698 min-height: 15px; 699 _height: 15px; 700 border-top: 1px solid rgba(144, 144, 144, 0.25); 701 margin-top: 30px; 702 padding-top: 30px; 703 padding-bottom: 50px; 704 /*margin-bottom: 10px;*/ 705 } 706 /*留言查看页面的个人信息*/ 707 .personInfo { 708 margin-bottom: 20px; 709 } 710 /*留言分页区域*/ 711 .pages { 712 text-align: right; 713 } 714 /*****留言页面结束*****************************/ 715 /*****第三部分结束*******************************/ 716 717 /************************************************** 718 第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如： 719 如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面 720 的“.postBody”明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。 721 建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话， 722 并不能保证所有的文章都适合。 723 **************************************************/ 724 /*文章内部常用标签格式*/ 725 .postBody { 726 line-height: 1.5em; 727 } 728 .postBody p,.postCon p{ 729 text-indent: 2em; 730 margin: 0 auto 1em auto; 731 } 732 .postBody h2{ 733 font-size: 150%; 734 margin: 15px auto 2px auto; 735 font-weight:bold; 736 } 737 .postBody h3 { 738 font-size: 120%; 739 margin: 15px auto 2px auto; 740 font-weight:bold; 741 } 742 .postBody h4{ 743 font-size:110%; 744 margin:15px auto 2px auto; 745 font-weight:bold; 746 color:#333; 747 } 748 749 .postBody h5{ 750 font-size:100%; 751 margin:15px auto 2px auto; 752 font-weight:bold; 753 color:#333; 754 } 755 756 .postBody a:link,.postBody a:visited,.postBody a:active{ 757 text-decoration:underline; 758 } 759 .postCon a:link,.postCon a:visited,.postCon a:active{ 760 text-decoration:underline; 761 } 762 .postBody ul,.postCon ul{ 763 margin-left:2em; 764 } 765 766 .postBody li,.postCon li{ 767 list-style-type:disc; 768 margin-bottom:1em; 769 } 770 771 .postBody blockquote{ 772 background:url('images/comment.gif')) no-repeat 25px 0px; 773 padding:10px 60px 5px 60px; 774 min-height:35px; 775 _height:35px; 776 line-height:1.6em; 777 color:#333; 778 } 779 /*********新添加样式************/ 780 #cnblogs_post_body img { 781 max-width: 100%; 782 height: auto; 783 } 784 .entrylist{ 785 margin-left: 0; 786 background-color: #fff; 787 box-shadow: 0 1rem 4rem 0.125rem rgba(161, 177, 204, 0.325); 788 padding: 1rem 1rem; 789 margin-bottom: 20px; 790 } 791 #myposts{ 792 margin-left: 0; 793 background-color: #fff; 794 box-shadow: 0 1rem 4rem 0.125rem rgba(161, 177, 204, 0.325); 795 padding: 1rem 1rem; 796 margin-bottom: 20px; 797 } 798 #sideBar input{ 799 -webkit-appearance: none; 800 -moz-appearance: none; 801 appearance: none; 802 border-radius: 6px; 803 border: 1px solid rgba(229, 157, 196,0.2); 804 height: 1.5rem; 805 outline: 0; 806 color: #7a7d86; 807 background-color: #fff; 808 padding: 0px 5px; 809 } 810 #sideBar input[type="text"]{ 811 max-width: 175px; 812 } 813 #sideBar input:focus{ 814 border-color:rgba(229, 157, 196,0.2) !important; 815 outline: 0; 816 box-shadow: inset 1px 1px rgba(0,0,0,.07),0 0 5px rgba(229, 157, 196,0.4); 817 -webkit-transition: all 0.2s; 818 -moz-transition: all 0.2s; 819 -ms-transition: all 0.2s; 820 -o-transition: all 0.2s; 821 transition: all 0.2s; 822 } 823 #sideBar input:hover{ 824 border-color:rgba(229, 157, 196,0.2) !important; 825 outline: 0; 826 box-shadow: inset 1px 1px rgba(0,0,0,.07),0 0 5px rgba(229, 157, 196,0.4); 827 -webkit-transition: all 0.3s; 828 -moz-transition: all 0.3s; 829 -ms-transition: all 0.3s; 830 -o-transition: all 0.3s; 831 transition: all 0.3s; 832 } 833 /* .commentform table{ 834 display: block; 835 } 836 .commentform table tr td{ 837 display: inline-block; 838 padding-top: 0.5rem; 839 } */ 840 .commentform input[type=text]{ 841 background: transparent; 842 -webkit-appearance: none; 843 -moz-appearance: none; 844 appearance: none; 845 border-radius: 6px; 846 border: 1px solid rgba(229, 157, 196,0.2); 847 height: 1.5rem; 848 outline: 0; 849 color: #7a7d86; 850 padding: 3px 5px; 851 } 852 .commentform input[type=text]:hover{ 853 border-color:rgba(229, 157, 196,0.2) !important; 854 outline: 0; 855 box-shadow: inset 1px 1px rgba(0,0,0,.07),0 0 5px rgba(229, 157, 196,0.4); 856 -webkit-transition: all 0.3s; 857 -moz-transition: all 0.3s; 858 -ms-transition: all 0.3s; 859 -o-transition: all 0.3s; 860 transition: all 0.3s; 861 } 862 .commentform textarea{ 863 background: transparent; 864 border-radius: 6px; 865 border: 1px solid rgba(229, 157, 196,0.2); 866 padding: 5px; 867 margin-top: 0.5rem; 868 } 869 .commentform textarea:hover{ 870 border-color:rgba(229, 157, 196,0.2) !important; 871 outline: 0; 872 box-shadow: inset 1px 1px rgba(0,0,0,.07),0 0 5px rgba(229, 157, 196,0.4); 873 -webkit-transition: all 0.3s; 874 -moz-transition: all 0.3s; 875 -ms-transition: all 0.3s; 876 -o-transition: all 0.3s; 877 transition: all 0.3s; 878 } 879 .commentform textarea:focus{ 880 border-color:rgba(229, 157, 196,0.2) !important; 881 outline: 0; 882 box-shadow: inset 1px 1px rgba(0,0,0,.07),0 0 5px rgba(229, 157, 196,0.4); 883 -webkit-transition: all 0.3s; 884 -moz-transition: all 0.3s; 885 -ms-transition: all 0.3s; 886 -o-transition: all 0.3s; 887 transition: all 0.3s; 888 color: #7a7d86; 889 } 890 .gallery{ 891 background-color: #fff; 892 box-shadow: 0 1rem 4rem 0.125rem rgba(161, 177, 204, 0.325); 893 padding: 1rem; 894 } 895 /*****第四部分结束*******************************/ 896 897 898 /********自适应****************/ 899 @media screen and (max-width: 736px){ 900 #home { 901 margin: 0 auto; 902 width:calc(100% - 2em); 903 min-width: 300px; 904 padding-top: 1.0rem; 905 } 906 #mainContent{ 907 width: 100%; 908 } 909 #sideBar{ 910 width: 100%; 911 } 912 #navigator{ 913 display: none; 914 } 915 #header{ 916 padding-bottom: 0px; 917 margin-top: 0rem; 918 margin-bottom: 0rem; 919 } 920 /*#blogTitle{ 921 background-color: rgba(255,255,255,0.1); 922 }*/ 923 /**************移动端导航栏*************/ 924 div.burger { 925 height: 30px; 926 width: 40px; 927 position: absolute; 928 top: 11px; 929 left: 21px; 930 cursor: pointer; 931 z-index: 11; 932 } 933 div.x, 934 div.y, 935 div.z { 936 position: absolute; margin: auto; 937 top: 0px; bottom: 0px; 938 background: #fff; 939 border-radius:2px; 940 -webkit-transition: all 200ms ease-out; 941 -moz-transition: all 200ms ease-out; 942 -ms-transition: all 200ms ease-out; 943 -o-transition: all 200ms ease-out; 944 transition: all 200ms ease-out; 945 } 946 div.x, div.y, div.z { height: 3px; width: 26px; } 947 div.y{top: 18px;} 948 div.z{top: 37px;} 949 div.collapse{ 950 top: 20px; 951 background:#fff; 952 -webkit-transition: all 70ms ease-out; 953 -moz-transition: all 70ms ease-out; 954 -ms-transition: all 70ms ease-out; 955 -o-transition: all 70ms ease-out; 956 transition: all 70ms ease-out; 957 } 958 div.rotate30{ 959 -ms-transform: rotate(30deg); 960 -webkit-transform: rotate(30deg); 961 transform: rotate(30deg); 962 -webkit-transition: all 50ms ease-out; 963 -moz-transition: all 50ms ease-out; 964 -ms-transition: all 50ms ease-out; 965 -o-transition: all 50ms ease-out; 966 transition: all 50ms ease-out; 967 } 968 div.rotate150{ 969 -ms-transform: rotate(150deg); 970 -webkit-transform: rotate(150deg); 971 transform: rotate(150deg); 972 -webkit-transition: all 50ms ease-out; 973 -moz-transition: all 50ms ease-out; 974 -ms-transition: all 50ms ease-out; 975 -o-transition: all 50ms ease-out; 976 transition: all 50ms ease-out; 977 } 978 979 div.rotate45{ 980 -ms-transform: rotate(45deg); 981 -webkit-transform: rotate(45deg); 982 transform: rotate(45deg); 983 -webkit-transition: all 100ms ease-out; 984 -moz-transition: all 100ms ease-out; 985 -ms-transition: all 100ms ease-out; 986 -o-transition: all 100ms ease-out; 987 transition: all 100ms ease-out; 988 } 989 div.rotate135{ 990 -ms-transform: rotate(135deg); 991 -webkit-transform: rotate(135deg); 992 transform: rotate(135deg); 993 -webkit-transition: all 100ms ease-out; 994 -moz-transition: all 100ms ease-out; 995 -ms-transition: all 100ms ease-out; 996 -o-transition: all 100ms ease-out; 997 transition: all 100ms ease-out; 998 } 999 div.circle{ 1000 border-radius: 50%; 1001 width: 0px; 1002 height: 0px; 1003 position:absolute; 1004 top: 35px; 1005 left: 36px; 1006 background:#40435b; 1007 z-index: 10; 1008 opacity:0.94; 1009 -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1010 -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1011 -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1012 -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1013 transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1014 } 1015 div.circle.expand{ 1016 position: fixed; 1017 width:1800px; 1018 height:1800px; 1019 top: -430px; 1020 left: -565px; 1021 overflow-y：hidden; 1022 -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1023 -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1024 -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1025 -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1026 transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1027 1028 } 1029 div#navigator { 1030 height: 100%; 1031 width: 100%; 1032 position: absolute; 1033 top: 110px; 1034 left: 0px; 1035 background-color:rgba(0,0,0,0); 1036 box-shadow: 0 0 0.5rem 0 rgba(161, 177, 204, 0); 1037 /* z-index: -1;*/ 1038 } 1039 div#navigator ul li{ 1040 list-style: none; 1041 position:absolute; 1042 top:50px;; 1043 left:0; 1044 opacity:0; 1045 width:100%; 1046 text-align:center; 1047 font-size:0px; 1048 -webkit-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1049 -moz-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1050 -ms-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1051 -o-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1052 transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1053 } 1054 div#navigator ul li a{ 1055 color:#fff !important; 1056 font-weight: 500; 1057 text-transform:uppercase; 1058 text-decoration:none; 1059 1060 /*letter-spacing:3px; */ 1061 } 1062 1063 div#navigator li.animate{ 1064 font-size:21px; 1065 opacity:1; 1066 -webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1067 -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1068 -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1069 -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1070 transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 1071 } 1072 /*此处根据移动端菜单显示调整位置*/ 1073 div#navigator li.animate:nth-of-type(1){ 1074 top:0px; 1075 transition-delay: 0.0s; 1076 } 1077 div#navigator li.animate:nth-of-type(2){ 1078 top:70px; 1079 transition-delay: 0.03s; 1080 1081 } 1082 div#navigator li.animate:nth-of-type(4){ 1083 top:140px; 1084 transition-delay: 0.06s; 1085 1086 } 1087 div#navigator li.animate:nth-of-type(6){ 1088 top:210px; 1089 transition-delay: 0.09s; 1090 1091 } 1092 #navList { 1093 min-height: 30px; 1094 float: right; 1095 } 1096 #navList li { 1097 /*float: left;*/ 1098 display: flex; 1099 justify-content:center; 1100 } 1101 #navList a { 1102 display: block; 1103 width: 5em; 1104 float: left; 1105 text-align: center; 1106 font-weight: 600; 1107 font-size: 1.1rem; 1108 } 1109 #navList a:link, #navList a:visited, #navList a:active { 1110 color: #7a7d86; 1111 } 1112 #navList a:hover { 1113 /*color: white; 1114 background-color: #e59dc4;*/ 1115 color: #e59dc4; 1116 border-bottom: 0px solid #ff8f83; 1117 text-decoration: none; 1118 -webkit-transition: all 0.2s ease-in-out; 1119 -moz-transition: all 0.2s ease-in-out; 1120 -ms-transition: all 0.2s ease-in-out; 1121 -o-transition: all 0.2s ease-in-out; 1122 transition: all 0.2s ease-in-out; 1123 } 1124 } 1125 @media screen and (max-width: 321px){ 1126 #green_channel{ 1127 width: 260px !important; 1128 } 1129 }
侧边公告栏
1 <script type="text/javascript"> 2 3 $('.burger').click(function(){ 4 if (!$(this).hasClass('open')) { 5 openMenu(); 6 } else { 7 closeMenu(); 8 } 9 }); 10 function openMenu() { 11 document.body.style.overflow='hidden'; 12 $("#navigator").show(); 13 $('div.circle').addClass('expand'); 14 $('div.burger').addClass('open'); 15 $('div.x, div.y, div.z').addClass('collapse'); 16 $('#navigator li').addClass('animate'); 17 setTimeout(function () { 18 $('div.y').hide(); 19 $('div.x').addClass('rotate30'); 20 $('div.z').addClass('rotate150'); 21 }, 70); 22 setTimeout(function () { 23 $('div.x').addClass('rotate45'); 24 $('div.z').addClass('rotate135'); 25 }, 120); 26 } 27 function closeMenu() { 28 document.body.style.overflow='visible'; 29 $("#navigator").hide(); 30 $('div.burger').removeClass('open'); 31 $('div.x').removeClass('rotate45').addClass('rotate30'); 32 $('div.z').removeClass('rotate135').addClass('rotate150'); 33 $('div.circle').removeClass('expand'); 34 $('#navigator li').removeClass('animate'); 35 setTimeout(function () { 36 $('div.x').removeClass('rotate30'); 37 $('div.z').removeClass('rotate150'); 38 }, 50); 39 setTimeout(function () { 40 $('div.y').show(); 41 $('div.x, div.y, div.z').removeClass('collapse'); 42 }, 70); 43 } 44 </script>
页首代码
1 <style> 2 #cnblogs_post_body table[style]{ 3 width: 100% !important;} 4 5 @media screen and (max-width: 767px){ 6 #cnblogs_post_body table[style]{ 7 width: 100% !important; 8 } 9 } 10 </style> 11 <div class="circle"></div> 12 <div class="burger"> 13 <div class="x"></div> 14 <div class="y"></div> 15 <div class="z"></div> 16 </div>
页脚代码
无