此博客使用的CSS样式详解！
页面使用的博客园模板为：LuxInteriorLight，可以在博客皮肤里找到。
页首屏蔽广告代码
<script>console.log("顶部标题栏屏蔽开始；");
document.all.top_nav.style.display='none';
console.log("顶部标题栏屏蔽完成；");</script>
页面定制CSS代码
这些都是可以自己使用浏览器的检查元素的模式改的，然后将改动处放入博客设置中的此处。
此为2021年2月版本。
/* 更改容器的宽度，也就是扩大主要文字页面的宽度 */
#container {
width: 69em;
}
/* 设置正文部分和侧边栏部分的相应宽度 */
#content {
width: 53em;
}
#sidebar-a {
width: 13em;
}
/* 更改body属性的字体大小 */
body {
font-size: 1em;
}
/* 增大侧边栏的标题字号，从1em改为1.25em */
#sidebar-a h3 {
font-size: 1.25em;
margin-left: 0.3em;
}
/* 改变首页、新随笔等等几个标题链接的颜色与字号，将之调为灰色，增大字号 */
#nav ul li a {
color: #666;
font-size: 1.1em;
}
/* 设置各项文字的行高与字体间距 */
p {
line-height: 160%;
}
.postbody {
line-height: 160%;
font-size: 1em;
}
.post {
margin: 0 0 1.3em;
}
/* 设置移动设备上浏览的文章宽度 */
@media only screen and (max-width:767px) {
#container {
width:100%
}
#content,
#sidebar-a {
width:auto;
float:none
}
}
/* 设置文字颜色，#000代表黑色，如果是黑色主题则需要相应的将颜色调整为黑色，也就是#fff */
a {
text-decoration:none;
color:#000;
}
/* 设置从h2标题，h3，h4，正文的相应字体大小，间距 */
#cnblogs_post_body p {
margin: 1em auto;
text-indent: 0;
}
#cnblogs_post_body h2 {
font-size: 1.63em;
font-weight: bold;
line-height: 1.5;
margin: 10px 0;
}
#cnblogs_post_body h4 {
font-size: 18px;
}
#cnblogs_post_body h3 {
font-size: 1.38em;
font-weight: bold;
line-height: 1.546;
margin: 10px 0;
}
.posthead h2 {
font-size: 1.40em;
letter-spacing: 1.2px;
text-transform: uppercase;
}
页脚生成博文目录的JS代码
<!-- 目录索引列表生成 -->
<script language="javascript" type="text/javascript">
function GenerateContentList()
{
if ($('#cnblogs_post_body').length == 0) { return; }
var jquery_h1_list = $('#cnblogs_post_body h1');
var jquery_h2_list = $('#cnblogs_post_body h2');
var jquery_h3_list = $('#cnblogs_post_body h3');
if (jquery_h1_list.length != 0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
content += '<ul class="first_class_ul">';
for (var i = 0; i < jquery_h1_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_label' + i + '"></a></div>';
$(jquery_h1_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
var nextH1Index = i + 1;
if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
if (jquery_h2_list.length > 0)
{
li_content += '<ul class="second_class_ul">';
}
for (var j = 0; j < jquery_h2_list.length; j++)
{
var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_lab2_'+ i + '_' + j + '"></a></div>';
$(jquery_h2_list[j]).before(go_to_top2);
li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
var nextH2Index = j + 1;
var next;
if (nextH2Index == jquery_h2_list.length)
{
if (i + 1 == jquery_h1_list.length)
{
next = jquery_h1_list[0];
}
else
{
next = jquery_h1_list[i + 1];
}
}
else
{
next = jquery_h2_list[nextH2Index];
}
var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
if (jquery_h3_list.length > 0)
{
li_content += '<ul class="third_class_ul">';
}
for (var k = 0; k < jquery_h3_list.length; k++)
{
var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_Content);
li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
}
if (jquery_h3_list.length > 0)
{
li_content += '</ul>';
}
li_content += '</li>';
}
if (jquery_h2_list.length > 0)
{
li_content +='</ul>';
}
li_content +='</li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else if (jquery_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 class="second_class_ul">';
for(var i =0; i < jquery_h2_list.length; i++)
{
var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_lab2_'+ i + '_' + j + '"></a></div>';
$(jquery_h2_list[j]).before(go_to_top2);
var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h2_list[i]).text() + '</a></li>';
var nextH1Index = i + 1;
if (nextH1Index == jquery_h2_list.length) { nextH1Index = 0; }
var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i+1], "h3");
if(jquery_h3_list.length>0)
{
li_content +='<ul class="third_class_ul">';
}
for(var j = 0;j < jquery_h3_list.length;j++)
{
var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_Content);
li_content +='<li><a href="#_lab2'+ i +'_' + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>';
}
if(jquery_h3_list.length>0)
{
li_content +='</ul>';
}
li_content +='</li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else if (jquery_h3_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 < jquery_h3_list.length; i++)
{
var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_Content);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else
{
return;
}
$($('#cnblogs_post_body')[0]).prepend(content);
}
GenerateContentList();
</script>
黑色主题
如果将博客皮肤更改为LuxInteriorDark，并且将CSS里的字体颜色更改为黑色（#fff）的话（标题字体的颜色可以改为蓝色或黄色），则可以获得黑色主题，也就是夜间模式，白色文字的主体。
是另外一种风格。
存在问题
- H3标题不够突出，字体太小且没有加黑！
- 为什么Markdown随笔的页面显示就和编辑的预览不一样呢？
- 页尾生成目录代码有瑕疵，如果没有H1标题，生成的目录就无法跳转。暂未修改成功。