博客园日志美化

日志写的稍微有点多了，有些格式问题实在是看不下去了，所以就研究了一下如何修改blog的样式。发现这方面的文章不多，但是已经有几位大虾写的很好了。在这里把文章汇总一下，分享出来，为其他的兄弟姐妹们节省点时间。

  《Donews Blog的非官方使用指北》

  《Donews Blog的小花招》

  《教你怎样快速DIY自己的博客园SKIN》

看完这些文章之后，方法上差不多了。再加上一点点CSS的入门知识，再投入点时间，你就可以让自己的博客漂亮一点点了，至少有些地方不会让自己看着非常不顺眼。

下面是我感觉挺有用的一点CSS的东西。当然这还不够，不过用IE Dev Toolbar, 会看，会比较，再加上看到别人的blog里有好的样式，会抄，就差不多了。

body
{
       font-family: Arial,sans-serif;
       padding: 0px;
}
#masthead
{
       margin: 0;
       width: 100%;
}
.feature img
{
       float: left;
} 

其中，#对应id，.对应class，不加对应html 标签。

我使用博客模板是AnotherEon001. 有些地方我觉得不太合我的心意，所以就动手修改了一些。把我的自定义代码贴出来，供大家参考。如果你用的不是AnotherEon001模板，如同上面文章提到的，应用在你的blog中不一定会成功。最有效的方法是用ie dev toolbar来弄清楚你要修改的部分的id，或者是class，然后进行修改。

/***随笔代码样式, 缩小了代码的字体，做小了行间距***/
.code
{
    background:  #eeeeee;
    border: #c0c0c0 1px solid;
    padding: 4px;
    margin-top:0;
    margin-right:3;
    margin-bottom:0;
    margin-left:0;
    font-family: Verdana,Helvetica, "微软雅黑" , Arial, "宋体" , sans-serif;
    font-size:0.9em;
    line-height:12pt
}

/***不喜欢默认的段落，如果需要突出结构，宁愿自己添换行符***/
p
{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/***blockquote的样式太丑了，修改了背景的宽度***/
BLOCKQUOTE
{
    border: #c0c0c0 1px solid;
    background-color:#E6E6E6;
    border-left:1px ;
    padding-left:10px;
    width:100%;
} 

/***#对应id, .对应class***/
#Header1_HeaderTitle
{
    font-family:Verdana, "微软雅黑","宋体", sans-serif;
    font-size:1.2em;
    font-weight:710;
}

.LeftCell
{
    width:195px;
}

#Calendar1_entryCal
{
    width:175px;
}

如果你有更好的修改，欢迎指出！让我们的博客漂亮起来吧！

另外，使用Windows Live Writer贴代码的时候有一些非常好的插件，可以让页面上的代码非常漂亮。

推荐

Paste from Visual Studio

http://gallery.live.com/liveItemDetail.aspx?li=d8835a5e-28da-4242-82eb-e1a006b083b9

效果如下：

BOOL Foo2( int a, int b )
{
    char    response[32];

    cout << "In Foo2." << endl;
    cout << "a = " << a << endl;
    cout << "b = " << b << endl;
    cout << "press enter to continue" << endl;

    cin  >> response;

    return TRUE;
}

Paste As Visual Studio Code

http://gallery.live.com/liveItemDetail.aspx?li=49a26ff9-fdbd-4cd7-883a-633f6474656f&wa=wsignin1.0

效果如下：

Code Snippet

1. BOOL Foo2( int a, int b )
2. {
3.     char    response[32];
4.  
5.     cout << "In Foo2." << endl;
6.     cout << "a = " << a << endl;
7.     cout << "b = " << b << endl;
8.     cout << "press enter to continue" << endl;
9.  
10.     cin  >> response;
11.  
12.     return TRUE;
13. }

前者比较简单实用，后者比较美观。

后者不如前者的地方是在从网页上复制代码的时候，会包含行号或井号之类的东东。如果读者想从你的站点上赋值代码并实践一下，会有点麻烦。