正文

如何设置博客园好看的标题样式

陷入学习，不能自拔  陷入学习，不能自拔  2022-09-03  740

关键词：

1.向博客园申请js权限

　　我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码 ，博客园也会在用户邮箱给你发送是否开通js权限的邮件。

2.添加css样式

　　我们在【管理】-->【设置】-->【博客设置】-->【页面定制CSS代码】中粘贴如下面的代码

#cnblogs_post_body
{
    color: black;      
    font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 15px;
}
#各个等级标题的颜色样式
#cnblogs_post_body h1    {
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2    {
    background: #008eb7;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3    {
    background: #399ab2;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h4{
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}
#页面中a标签鼠标位置
#cnblogs_post_body h2:a{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h2 a:hover{
   color: rgb(255, 102, 0);
}
#页面中标题位置
#cnblogs_post_body h1{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h1:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h2{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h2:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h3{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h3:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h4{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h4:hover{
   color: rgb(255, 102, 0);
}

博客园[标题样式]

　　保存后，刷新一下文章的内容，就会发现样式已经应用上了

如何设置博客园好看的标题样式(代码片段)

1.向博客园申请JS权限我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一... 查看详情

自定义博客园主题样式

...自定义目录以及相关样式功能，感兴趣的可以看下博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色在此基础上再加点捣鼓内容，实现主题样式透明化、增加侧边“分享”模块、标题级别显示设... 查看详情

博客园如何设计自己的样式？

博客园如何设计自己的样式？<canvasheight="990"id="c_n9"style="position:fixed;top:0px;left:0px;z-index:-1;opacity:0.1;"... 查看详情

修改博客园模板样式

...步骤：1.寻找自己喜欢的图片，要求图片足够清晰，以免设置背景时不清楚。博客园首页->管理->相册->设置标题（相册名）-&g 查看详情

修改博客园css样式

看到一款博客园主题，感觉很好看，只是有些css样式不怎么满意，所以自己修改了下，修改的方法在这里记录了下。皮肤连接：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tree/v1.1.9F12查看元素,就可以看到css样式的标签，在这里调试... 查看详情

纯css打造bilibili样式博客主题

前言一直以来，我都在思考如何减少不必要的JS代码，仅通过CSS来实现博客园主题美化。CSS有很多魔法代码，例如:before，iconfont，order，等等，利用好这些技巧，也能实现很好美化效果。这一次带来的是仿制BiliBli制作的纯CSS博客... 查看详情

如何修改博客园的标题，文本，表格等的显示样式

注：这个修改方法需要有些html,css的知识，不然你就要自己去查格式 1，打开你的博客首页比如我的是这个：http://www.cnblogs.com/progor/ 2，右键查看网页源代码，在网页源代码中查找到 3.点开href的连接，即可获得你... 查看详情

如何在博客园随笔中增加章节导航

...还有目录索引，自己也用博客园很长时间了，今天补充下如何自己手动生成博文的章节目录索引。阅读目录：1. 文章撰写2. 添加锚点3. 添加目录并建立锚点链接4. 附录 1. 文章撰写把需要的文章内容先... 查看详情

博客园的代码高亮

博客园自带的代码样式很难看，以下是如何自己设置代码的高亮。 1.点开HTML编辑。　　2.找到代码位置，大致如下： 3.提炼成以下样式：<preclass=‘{0}‘>内容</pre> 4.博客园已经默认支持SyntaxH... 查看详情

博客园设置自定义页面样式

首先是背景图片,这个修改对模版而言都是通用的bodybackground:url(‘URL‘)no-repeattopcenterfixed;这里图片路径可以上传到博客本地图片,图片就有了网上路径然后是正文模块在整体背景中的浮动#homemargin:0pxauto;width:1000px;一个控制模... 查看详情

自定义博客园主题样式(代码片段)

...请目的：后面的添加js特效需要用到我的博客园-->管理设置-->博客园侧边栏公告-->点击申请JS权限编写申请js权限内容例：尊敬的博查看详情

博客园样式的设置系列-01-侧边栏和皮肤的设置

1.皮肤设置、可以使用自己定制的css.本人比较懒木有搞这款还比较简洁 2.侧边栏的设置 <divid="myTime"><objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/sh 查看详情

博客园codinglife模板手机样式优化

...模块放在文章下面后宽度和位置不太合适，刚好今天看到设置中可以上传自定义样式，于是写了一些样式来优化CodingLife模板，等下次有时间再继续优化，感兴趣的园友可以复制以下样式到你的页面定制CSS代码中，/*authorstump 查看详情

博客园自定义页面风格设计

...使用SimpleMemory，可以自适应，方便我们进行页面CSS定制论如何改变自己的博客园，变得好不好看我就不敢保证了，也许会出现各种毛病QAQ①拥有自己的CSS代码我自己是完全禁用掉了模板CSS然后会发现，blog干净得很查看详情

博客园侧边栏样式问题

1问题1.1问题描述　　侧边栏目录遮拦后面的文字链接，使其实效。　　侧边栏在目录多的时候，不显示二级导航（应该和css设置高度有关系）1.2问题截图如下2解决（问题放这里，先不解决）查看详情

记录帖如何自定义博客园界面

关于如何自定义博客园界面的文章记录博客园美化教程大集合----极致个性化你的专属博客（超详细，看这篇就够了）博客园cnblogs：自定义页面风格博客园自定义样式查看详情

博客园自定义样式(代码片段)

...该是一个女生背景，一些星星的悬浮飘扬那么我们怎么来设置博客园的自定义的样式，而不是不个性的默认界面呢？第一步：进入你的首页，打开管理=>设置第二步：我在博客皮肤中选择了SimpleMemory，这个皮肤相对来说要轻快... 查看详情

博客园主题样式修改教程(代码片段)

...博客园申请了js代码的权限，申请入口还是在刚刚那个【设置】里：我这里是批准了所以显示支持js代码，你们要想实现这个代码高亮，那就得先申请（希望博客园的管理员别打我—..—）然后复制下面代码到【博客侧边栏... 查看详情