#1、皮肤选择

#2、页面定制 CSS 代码

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

注意：这里需要勾选“禁用模板默认CSS”

#3、博客侧边栏公告（支持HTML代码）

<script language="javascript" type="text/javascript">

// 生成目录索引列表

// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html

// modified by: zzq

function GenerateContentList()

{

    var mainContent = $('#cnblogs_post_body');

    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)

        return;

    if(h2_list.length>0)

    {

        var content = '<a name="_labelTop"></a>';

        content += '<div id="navCategory">';

        content += '<p style="font-size:18px"><b>目录</b></p>';

        content += '<ul>';

        for(var i=0; i<h2_list.length; i++)

        {

            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';

            $(h2_list[i]).before(go_to_top);

            var h3_list = $(h2_list[i]).nextAll("h3");

            var li3_content = '';

            for(var j=0; j<h3_list.length; j++)

            {

                var tmp = $(h3_list[j]).prevAll('h2').first();

                if(!tmp.is(h2_list[i]))

                    break;

                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';

                $(h3_list[j]).before(li3_anchor);

                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';

            }

            var li2_content = '';

            if(li3_content.length > 0)

                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';

            else

                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';

            content += li2_content;

        }

        content += '</ul>';

        content += '</div><p> </p>';

        content += '<p style="font-size:18px"><b>正文</b></p>';

        if($('#cnblogs_post_body').length != 0 )

        {

            $($('#cnblogs_post_body')[0]).prepend(content);

        }

    } 

   /* var qqinfo =  '<p style="color:navy;font-size:12px">广告招租：xxx</p>'; */

    $(mainContent[0]).prepend(qqinfo);

}

GenerateContentList();

</script>

#4、页首 HTML 代码

<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">

<script type="text/javascript">

(function(window, document, undefined) {

    var hearts = [];

    window.requestAnimationFrame = (function() {

        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

        function(callback) {

            setTimeout(callback, 1000 / 60);

        }

    })();

    init();

    function init() {

        css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");

        attachEvent();

        gameloop();

    }

    function gameloop() {

        for (var i = 0; i < hearts.length; i++) {

            if (hearts[i].alpha <= 0) {

                document.body.removeChild(hearts[i].el);

                hearts.splice(i, 1);

                continue;

            }

            hearts[i].y--;

            hearts[i].scale += 0.004;

            hearts[i].alpha -= 0.013;

            hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;

        }

        requestAnimationFrame(gameloop);

    }

    function attachEvent() {

        var old = typeof window.onclick === "function" && window.onclick;

        window.onclick = function(event) {

            old && old();

            createHeart(event);

        }

    }

    function createHeart(event) {

        var d = document.createElement("div");

        d.className = "heart";

        hearts.push({

            el: d,

            x: event.clientX - 5,

            y: event.clientY - 5,

            scale: 1,

            alpha: 1,

            color: randomColor()

        });

        document.body.appendChild(d);

    }

    function css(css) {

        var style = document.createElement("style");

        style.type = "text/css";

        try {

            style.appendChild(document.createTextNode(css));

        } catch(ex) {

            style.styleSheet.cssText = css;

        }

        document.getElementsByTagName('head')[0].appendChild(style);

    }

    function randomColor() {

        return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";

    }

})(window, document);

</script>

<link href="http://files.cnblogs.com/files/clwydjgs/cnblog-scroller.css" type="text/css" rel="stylesheet">

<script src="http://files.cnblogs.com/files/clwydjgs/scrollspy.js" type="text/javascript"></script>

<script src="http://files.cnblogs.com/files/clwydjgs/stickUp.min.js" type="text/javascript"></script>

<script src="http://files.cnblogs.com/files/clwydjgs/cnblog-scroller.js" type="text/javascript"></script>

#5、页脚 HTML 代码

<script type="text/javascript">

$(function(){

    $('#blogTitle h1').addClass('bounceInLeft animated');

    $('#blogTitle h2').addClass('bounceInRight animated');

    // 删除反对按钮

    $('.buryit').remove();

    initCommentData();

});

function initCommentData() {

    $('.feedbackItem').each(function() {

        var text = $(this).find('.feedbackListSubtitle .layer').text();

        // 将楼层信息放到data里面

        // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));

        if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');

        var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';

        $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')

    });

}

$(document).ajaxComplete(function(event, xhr, settings) {

  // 监听获取评论ajax事件

  if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {

    initCommentData();

  }

});

</script>

<script src="https://files.cnblogs.com/files/hafiz/jquery-migrate-1.2.1.js"></script>

<div id="scrollTop" style="display:none;">

      <div class="level-2"></div>

      <div class="level-3"></div>

</div>

<script src="http://files.cnblogs.com/files/hafiz/scroll2top.js"></script>

<script type="text/javascript">

    UI.global_search();

    var uvOptions = {};

    // !important

    (function() {

        initScrollTop();

    })();

</script>

Blogs模板选择及基础代码设置的更多相关文章

  1. Mysql基础代码（不断完善中）

    Mysql基础代码,不断完善中~ /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限 ...

  2. 使用 T4 文本模板生成设计时代码

      使用设计时 T4 文本模板,您可以在 Visual Studio 项目中生成程序代码和其他文件. 通常,您编写一些模板,以便它们根据来自模型的数据来改变所生成的代码. 模型是包含有关应用程序要求的 ...

  3. IDEA模板注释及相关快捷键设置

    IDEA模板注释及相关快捷键设置 最近使用IDEA时发现自带的模板注释不怎么好用,因此自己根据网上的教程总结了适合自己的模板设置,可以一键生成类和方法的注释,废话不多说一起看看吧: 第9步的类模板注释 ...

  4. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...

  5. Android中代码设置RadioButton的高端技巧

    不知道怎么起标题,就这样了. 目前主要讲两个方面内容: 代码方式 设置RadioButton的 android:button . android:background 等属性为 @null : 代码方 ...

  6. [译]Vulkan教程(04)基础代码

    [译]Vulkan教程(04)基础代码 General structure 通用结构 In the previous chapter you've created a Vulkan project w ...

  7. android 后台代码设置动画

    1.设置旋转动画 final RotateAnimation animation =new RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF, 0. ...

  8. 一行代码设置TForm颜色的前世今生（属性赋值引起函数调用，然后发消息实现改变显示效果），TForm的初始颜色在dfm中设置了clBtnFace色

    来自万一的帖子:http://www.cnblogs.com/del/archive/2008/04/27/1173658.html的确做到了一行代码设置TForm控件的颜色(一点感想:Delphi程 ...

  9. 通过代码设置button中文字的对齐方式

    // button.titleLabel.textAlignment = NSTextAlignmentLeft; 这句无效 button.contentHorizontalAlignment = U ...

随机推荐

  1. SpringBoot整合Elasticsearch7

    SpringBoot连接ElasticSearch有以下种方式, TransportClient,9300端口,在 7.x 中已经被弃用,据说在8.x 中将完全删除 restClient,9200端口 ...

  2. java base64加解密

    接上篇java Base64算法. 根据之前过程使用base64加解密,所以写成了工具类. 代码示例; public class Base64Util { private static Logger ...

  3. HEXO | 给博客添加RSS

    Hexo是一个简洁.高效.易用的博客框架,同时它拥有十分丰富的主题环境,本次我们所谈到的是cards主题,但是该主题的原生环境里没有相关的rss配置,所以我们需要采用手动添加的方式,进而实现rss功能 ...

  4. 40 张图带你搞懂 TCP 和 UDP

    前言 欢迎阅读「程序员cxuan」 的文章,从今往后,你就是我的读者了. 我的 github bestJavaer 已经收录此文章,目录在 https://github.com/crisxuan/be ...

  5. 磁盘冗余阵列之RAID5、RAID10

    RAID技术主要有以下三个基本功能: (1).通过对磁盘上的数据进行条带化,实现对数据成块存取,减少磁盘的机械寻道时间,提高了数据存取速度. (2).通过对一个阵列中的几块磁盘同时读取,减少了磁盘的机 ...

  6. oracle 流程控制句式

    --for loop declare val number(10):=0; begin for val in 0..10 loop dbms_output.put_line('val='||val); ...

  7. Fiddler 4 断点调试（修改response请求参数）

    1.选择测试链接 2. 2然后点击规则的Automatic Breakpoints 的 After Responses 3.然后重新发起请求并找到链接 4.然后修改数据 5.最终效果

  8. vue回调接口

    1.微博回调接口 1.1oauth/urls.py 中添加路由 urlpatterns = [ path('weibo/callback/', views.OauthWeiboCallback.as_ ...

  9. golang拾遗：嵌入类型

    这里是golang拾遗系列的第三篇,前两篇可以点击此处链接跳转: golang拾遗:为什么我们需要泛型 golang拾遗:指针和接口 今天我们要讨论的是golang中的嵌入类型(embedding t ...

  10. linux离线安装docker + docker-compose

    1 准备阶段(docker) 1.1 卸载旧版本 如果电脑上已经存在docker,需要先卸载可能存在的旧版本: 1. 删除某软件,及其安装时自动安装的所有包 sudo apt-get autoremo ...