zoukankan      html  css  js  c++  java
  • 标题样式

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

     

    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);
    }
    
    博客园[标题样式]
    View Code

    样式二

    #cnblogs_post_body
    {
        color: black;      
        font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
        font-size: 15px;
    }
    #各个等级标题的颜色样式
    #cnblogs_post_body h1    {
        background: #169fe6;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        font-size: 24px;
        font-weight: bold;
        height: 25px;
        line-height: 25px;
        margin: 18px 0 !important;
        padding: 8px 0 8px 5px;
        text-shadow: 2px 2px 3px #222222;
    }
    #cnblogs_post_body h2    {
        background: #169fe6;
        border-radius: 5px 5px 5px 5px;
        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 8px 5px;
        text-shadow: 2px 2px 3px #222222;
    }
    #cnblogs_post_body h3    {
        background: #36648B;
        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 0 30px;
        padding: 8px 0 5px 5px;
        text-shadow: 2px 2px 3px #222222;
    }
    #cnblogs_post_body h4{
        background:  #36648B;
        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 0 40px;
        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);
    }

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

  • 相关阅读:
    随笔2
    随笔
    关于updateElement接口
    随笔1
    本地访问正常,服务器访问乱码 记录
    Redis (error) NOAUTH Authentication required.解决方法
    tomcat启动很慢 停留在 At least one JAR was scanned for TLDs yet contained no TLDs.
    微信公众号消息回复
    微信公众号 报token验证失败
    idea中web.xml报错 Servlet should have a mapping
  • 原文地址:https://www.cnblogs.com/htybky/p/11649920.html
Copyright © 2011-2022 走看看