博客园日志美化

日志写的稍微有点多了,有些格式问题实在是看不下去了,所以就研究了一下如何修改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. }

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

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

posted on   中道学友  阅读(546)  评论(0编辑  收藏  举报

编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律

导航

< 2009年10月 >
27 28 29 30 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
1 2 3 4 5 6 7

技术追求准确,态度积极向上

点击右上角即可分享
微信分享提示