博客美化测试

一级标题

二级标题

三级标题

四级标题

内容

1 var x = 1;
2 var y = 2;
3 Console.WriteLine(x + y);

美化用的CSS

  1 #cb_post_title_url
  2 {
  3      display: block;
  4      margin-bottom: 20px;
  5      border-bottom: 3px solid #567286;
  6      padding: 15px 0px;
  7      font-family :"微软雅黑";
  8      font-size: 18px;
  9      color: black;
 10      line-height: 30px;
 11      text-align: center;
 12      text-shadow: 2px 2px 4px #CCC;
 13      letter-spacing: 1px;
 14      -webkit-transition: all 1s ease;
 15      -moz-transition: all 1s ease;
 16      -ms-transition: all 1s ease;
 17      -o-transition: all 1s ease;
 18      transition: all 1s ease;
 19 }
 20 
 21 #cb_post_title_url:hover
 22 {
 23      color: #567286;
 24      text-decoration: none;
 25 }
 26 
 27 #cnblogs_post_body h1,
 28 #cnblogs_post_body h2,
 29 #cnblogs_post_body h3
 30 {
 31      margin: 10px 0px;
 32      padding: 2px 2px 5px 2px;
 33      border-bottom: solid 3px #567286;
 34      border-radius: 10px;
 35      -moz-border-radius: 10px;
 36      -webkit-border-radius: 10px;
 37      color: #567286;
 38      text-align: left;
 39      text-indent: 10px;
 40 }
 41 
 42 #cnblogs_post_body h1
 43 {
 44      font-size: 30px;
 45 }
 46 
 47 #cnblogs_post_body h2
 48 {
 49      font-size: 22px;
 50 }
 51 
 52 #cnblogs_post_body h3
 53 {
 54      font-size: 16px;
 55 }
 56 
 57 #cnblogs_post_body h4
 58 {
 59      padding: 10px;
 60      border:3px dashed #567286;
 61      -moz-border-radius: 15px;
 62      -webkit-border-radius: 15px;
 63      border-radius: 15px;
 64      margin: 15px;
 65      font-weight:normal;
 66      font-style: italic;
 67      text-align: left;
 68 }
 69 
 70 #cnblogs_post_body p
 71 {
 72      margin: 3px 15px;
 73      letter-spacing: 1px;
 74 }
 75 
 76 #cnblogs_post_body div.cnblogs_code
 77 {
 78      margin: 10px 15px;
 79      border:1px dashed #567286;
 80      background-color: #f8f8ee;
 81 }
 82 
 83 #cnblogs_post_body table
 84 {
 85      width: 100%;
 86      border-collapse: collapse;
 87 }
 88 
 89 #cnblogs_post_body table thead tr
 90 {
 91      padding-top: 5px;
 92      padding-bottom: 4px;
 93      background-color: #566286;
 94      color: #ffffff;
 95      font-size: 1.1em;
 96      text-align: left;
 97 }
 98 
 99 #cnblogs_post_body table td, #cnblogs_post_body table th 
100 {
101      border: 1px solid #567286;
102      padding: 3px 7px 2px 7px;
103 }
104 
105 #MySignature .copyright
106 {
107      width: 500px;
108      height: 52px;
109      margin: 10px 15px;
110      background-color: #f3eb7c;
111      border:3px dashed #567286;
112      -moz-border-radius: 15px;
113      -webkit-border-radius: 15px;
114      border-radius: 15px;
115      padding: 10px;
116      font-size: 17px;
117      color: #567286;
118      text-align: left;
119      line-height: 26px;
120 }
121 
122 #blog_contents
123 {
124      margin: 20px; 
125      border: solid 1px #567286;
126      border-radius: 10px;
127      -moz-border-radius: 10px;
128      -webkit-border-radius: 10px;
129      padding: 10px;
130      font-size: 20px;
131      color: #567286;
132      text-align: left;
133      text-indent: 10px;
134      background-color: #f8f8ee;
135 }
136 
137 #blog_contents h2
138 {
139      font-size: 30px;
140      margin-bottom: 10px;
141 }
142 
143 #blog_contents a
144 {
145      display: block;
146      margin-left: 10px;
147      line-height: 30px;
148 }
149 
150 #blog_contents a.h1
151 {
152      margin-left: 10px;
153 }
154 
155 #blog_contents a.h2
156 {
157      margin-left: 25px;
158 }
159 
160 #blog_contents a.h3
161 {
162      margin-left: 50px;
163 }

自动生成目录的Javascript代码

 1 var contents = [];
 2 
 3 contents.push('<div id="blog_contents" name="blog_contents">')
 4 contents.push('<h2>目录</h2>')
 5 $('.postbody h1, .postbody h2, .postbody h3').each(function(index) {
 6     var anchor = 'content_' + index;
 7     $(this).attr('id', anchor).attr('name', anchor);
 8 
 9     $(this).html($(this).html() + '<a style="margin-left: 100px; font-size: 15px;" href="#blog_contents">返回目录</a>');
10 
11     contents.push('<a class="' + this.tagName.toLowerCase() + '" href="#' + anchor + '">' + $(this).text() + '</a>');
12 });
13 contents.push('</div>')
14 $('.postbody').before(contents.join(''))