一级标题
二级标题
三级标题
四级标题
内容
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 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 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(''))