冰淇淋主题博客皮肤

 

页面定制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 }
View Code

侧边公告栏

 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>
View Code

页首代码

 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>
View Code

页脚代码

posted @ 2018-10-23 09:27  凉の茶  阅读(364)  评论(0编辑  收藏  举报