zoukankan      html  css  js  c++  java
  • 使用CSS代码修改博客模板

      在修改设置使公告栏里的头像更新为新的头像时发现里边还有“页面定制CSS代码”这一选项,查了一下发现这东西可以对页面做一些个性化的调整。正好目前我使用的这个模板标题和导航栏的字体实在难看,顺手修改了一下。

      因为我之前是对CSS这方面完全不了解,所以只能连蒙带猜。首先,这CSS代码估计就是设置一下某些参数的值,应该跟.ini之类的文件形式比较类似。看了一下别人写的一些简单的代码,大概了解了一下格式,跟预想的差不多。接下来是要找到模板本身自己的CSS代码,不然我怎么知道要修改谁呢?一开始我是直接从浏览器里查看网页源代码,结果打开的东西完全摸不着头脑,就放弃了这种尝试,转而使用另一种形式,名字叫不上来,就是360浏览器按下F12之后出来的那个东西。大致翻了翻,找到这样一个东西,看它行文的风格估计就是模板的设置了:

      因为我要修改的是字体,肯定是在这里面搜索font family,找到了几处,挨个试了试就知道谁对应的谁了。然后按自己的喜好写好,复制到定制框里就好了。

      我是这么写的:

    .cnblogs_code pre {
        font-family: Courier New!important;
        font-size: 16px!important;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    
    .cnblogs_code span {
        font-family: Courier New!important;
        font-size: 16px!important;
        line-height: 1.5!important;
    }
    body {
        color: #000;
        background: #eee;
        font-family: Microsoft YaHei!important;
        font-size: 10pt;
        min-height: 101%;
    }
    #header h1 {
        font-weight: normal;
        font-size: 30px;
        line-height: 1;
    }
    #header h1 a {
        font-family: "Microsoft YaHei";
    }
    #header h1 a:hover {
        color: #F60;
        text-decoration: none;
    }
    #blogTitle h2 {
        font-weight: normal;
        font-size: 18px;
        color: #000000;
        line-height: 1.5em;
        margin-top: 10px;
        margin-left: 30px;
        width: 50%;
        margin-left: 10em;
        float: left;
    }
    View Code

      修改的内容如下:

        默认的代码字体大小;

        大标题的字体种类和大小,并取消加粗;

        副标题的字体种类和大小,并设置颜色为黑色;

        页面字体的种类和大小;

  • 相关阅读:
    转 [ javascript面向对象技术
    制作双击可运行的jar
    使用eclipse和maven一步一步配置web项目
    [转]hibernate三种状态详解
    [转]hibernate缓存机制所有详解
    Miniprofiler在普通net项目中的使用
    sql server 中更改默认实例
    使用awstats分析iis站点的日志
    NaN 和 Infinity
    反射的结果中排除隐藏的成员
  • 原文地址:https://www.cnblogs.com/dramstadt/p/5831973.html
Copyright © 2011-2022 走看看