zoukankan      html  css  js  c++  java
  • 我的博客园CSS:处理代码块

    我是一个懒人,懒人就是不喜欢搞太复杂的东西。我希望我的博客比较简单,一是可以方便撰写,二是能够使页面尽量的小。

    所以,在贴代码的时候,我只希望能与正文区分出来,代码比较多时,能限制大小,并按代码常用的字体来显示。其它的功能如语法高亮和代码折叠就不需要了。

    先看看我设置的CSS:

    .code{
        border: 1px solid #ccc;
        padding: 5px;
        background: #eee;
        color:#004080;
        overflow: auto;
        font-family:Consolas "Courier New" Fixedsys;
    }
    .longcode{
        border: 1px solid #ccc;
        padding: 5px;
        background: #eee;
        color:#004080;
        overflow: auto;
        height: 200px;
        font-family: Consolas "Courier New" Fixedsys;
    }
    .console{
        border: 1px solid #ccc;
        padding: 2px;
        background: #000;
        color: #ccc;
        overflow: auto;
        font-family:"Verdana";
    }
    

    这里设置三个class,分别用在代码(按原始大小显示,用于小代码量-10行以内)、长代码(只显示200px)、控制台输出(黑底白字),显示效果个人还满意…

    突然感觉,这个CSS还是不够精减,我的代码都是用<pre>来实现的,所以,我可以将默认的代码样式放在pre中定义,于是得到如下:

    pre{
        border: solid 1px #ccc;
        padding: 5px;
        overflow:auto;
        background: #eee;
        color:#004080;
        font-family:Consolas "Courier New" Fixedsys;
    }
    .code{}
    .longcode{
        height: 200px;
    }
    .console{
        background: #000;
        color: #ccc;
        font-family:"Verdana";
    }
    

    貌似又简单多了。

  • 相关阅读:
    stark
    MySQL与JDBC
    存储过程/视图/触发器
    MyCat部署运行(Windows环境)与使用步骤详解
    常用单词总结
    表单校验---validation检验
    jQuery简介
    javascript简单介绍
    HTML&&CSS
    消息队列Java的简单实现
  • 原文地址:https://www.cnblogs.com/hydonlee/p/1486772.html
Copyright © 2011-2022 走看看