转贴：个性化的Blog Skin制作方法详解(本教程适用于.Text的Blog系统)

[原创教程]个性化的Blog Skin制作方法详解

原文地址 http://dotnet.mblogger.cn/qiuji/posts/2012.aspx

    自从7月9日我设计出自己的第一个Blog Skin开始到现在，已经有许多朋友表示对此感兴趣，并且迫切的想知道怎么样去实现它。由于前段时间比较忙，所以一直没有时间来整理，现在把制作方法整理出来，提供给大家参考，希望能够给您美化您的Blog带来一定的帮助。阅读过程中如果有什么疑问，请在下面留言。

  1   需要具备的知识

你需要了解基本的HTML知识以及CSS样式表的知识。另外，如果你需要界面更加生动，可以添加一些图片效果，这时你需要掌握一些图片处理的知识，会使用一种图像处理软件（例如：Photoshop, Fireworks等等）。

  2   本教程的适用范围以及相关注意事项

·适用范围：本教程适用于.Text的Blog系统（其他的Blog系统由于没有测试过，所以不能肯定是否适用）。

如果确定你的Blog系统是.Text的Blog系统？

.Text的Blog系统在页面上你会看到

#leftmenu a:active, 

#leftmenu a:visited, 

body { font-size : 9pt; font-family : 宋体,Verdana, Geneva, Arial, Helvetica, sans-serif; margin : 0px; } A:link { COLOR: #3F68A6; TEXT-DECORATION: none } A:active { COLOR: #3F68A6; FONT-STYLE: normal; TEXT-DECORATION: none } A:visited { COLOR: #3F68A6; TEXT-DECORATION: none } A:hover { COLOR: #A7672E;TEXT-DECORATION: underline } #leftmenu ul { list-style : none; margin : 0px; padding : 0px; margin-left : 5px; margin-bottom : 10px; } #top { background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_qiuji_top.jpg); background-repeat: repeat; padding-top: 15px; background-color : #088; color : #000; border-bottom : 1px solid #FFF; height : 70px;vertical-align : middle; } div.post{ background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_o_bj.jpg); background-repeat: repeat-x; padding-right: 20px; padding-left: 20px; font-size: 9pt; padding-bottom: 5px; padding-top: 5px; line-height:150%; } #leftmenu { position : absolute; left : 0px; width : 180px; background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_zuo_bj.jpg); padding-bottom : 5px; line-height:150%; } #comments h4 { vertical-align : middle; margin : 0px; font-size : 1.2em; background-color : #F1F7FA; height:25px; color:#006699; } p.date { height : 25px; font-size : 12pt; margin-bottom : 0px; padding : 2px 0px; color:#FFF; background-color : #45A; background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bg0001.jpg); } p.date span { padding-left : 10px; padding-right : 10px; text-align:right; background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bg0001.jpg); } #tagline { color : #000; font-size : 1em; margin : 0px; background-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bihai3.gif); padding : 5px;font-weight : bold; background-color : #B2DEFF; } #leftmenu a:active, #leftmenu a:visited, #leftmenu a:link { border : 0px solid #C00; margin-right : 5px; padding : 2px; COLOR: #3F68A6; TEXT-DECORATION: none } #leftmenu a:hover { COLOR: #A7672E; border : 0px solid #C00; background-color : transparent; TEXT-DECORATION: underline }

  5   总结

    基本上要点就是这么多，由于时间仓促，可能还有部分要点没有提到，如有疑问和任何不理解的地方，请在下面留言，我会尽快给您解答。

    充分发挥你的想象力，相信您会把你的Blog改得非常的漂亮、非常充满个性。

    祝您使用愉快！Enjoy yourself!^_^