此博客使用的CSS样式详解！

此博客使用的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）的话（标题字体的颜色可以改为蓝色或黄色），则可以获得黑色主题，也就是夜间模式，白色文字的主体。

是另外一种风格。

存在问题

1. H3标题不够突出，字体太小且没有加黑！
2. 为什么Markdown随笔的页面显示就和编辑的预览不一样呢？
3. 页尾生成目录代码有瑕疵，如果没有H1标题，生成的目录就无法跳转。暂未修改成功。