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

最新推荐文章于 2019-03-18 07:15:06 发布
最新推荐文章于 2019-03-18 07:15:06 发布
阅读量85 收藏
点赞数
文章标签： photoshop 人工智能
原文链接：http://www.cnblogs.com/leave/archive/2005/04/13/136778.html
版权

[原创教程]个性化的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系统在页面上你会看到100x30_Logo.gif图标，一般位于页面的最底部。
·注意事项：下面的制作过程以mblogger.cn汉化的.Text Blog系统为基础，您的Blog如果不是mblogger.cn的，可能在部分词语的表达上会稍微有点不同，不过请放心，这只是系统界面翻译的问题，不影响你的任何操作。
·其他注意事项：其他需要注意的地方，我会在文中相应的地方以粗体或者显目的颜色标示。

  3   Blog Skin 制作过程讲解
步骤一：
登录你的Blog，然后点击“管理”进入管理页面。选择“选项”->“配置”，在这里“模板选择”和“自定义CSS”将决定你的Blog的显示效果。“模板选择”提供了基本的模板，而“自定义CSS”则是你大显身手的地方，这里你可以添加你自定义的CSS样式（如图）。
o_skin_help.jpg
要自定义你的CSS，建议选择你的模板为名称中带有Custom的，例如“Hover-Custom CSS”。
步骤二：
到这里，我们知道了通过添加“自定义CSS”来个性化Blog的界面，但是如何添加呢？
仔细研究过你会发现，每个模板都对应一个CSS文件，该文件包含了该模板所有的CSS样式。
假设你选择了模板“Hover-Custom Css”，现在回到你的blog首页，点击右键，选择“查看源文件”，你会找到下面的代码：<link rel="stylesheet" href="/Skins/Hover/style.css" type="text/css" >
以我的Blog(http://dotnet.mblogger.cn/qiuji/)为例，那么该CSS的位置为http://dotnet.mblogger.cn/Skins/Hover/style.css
打开此文件，你就可以看到CSS代码了。现在，你要修改哪个部分的效果，就把那个部分的CSS代码修改成你自己的，然后放到“自定义CSS”文本框中，然后“SAVE”后，重新打开你的Blog页面，就可以看到效果了。
例如：你要修改页面顶部的显示效果，可以这样修改：
原来的CSS代码：

#top {
padding : 0px;
background-color : #088;
color : #000;
border-bottom : 1px solid #FFF;
height : 40px;
}
在“自定义CSS”输入新的CSS代码：
#top {
padding : 0px;
background-color : #FF0066;
color : #000;
border-bottom : 1px solid #FFF;
height : 40px;
}
“SAVE”后，刷新你的blog，你会看到顶部的颜色变成了粉红色。
如果你还要使用背景图片显示在顶部，可以使用background-image属性，代码如下：
#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;
}
（注：为了说明效果，上面的图片地址引用了我的blog上面的地址，你可以根据需要改成你自己的路径。）
其他部分的效果，你可以用同样的方法修改，此时，你需要对CSS知识有一定的了解。

  4    我的第一个Blog Skin的CSS代码
为了给你的学习带来一些帮助，这里公布我的第一个Blog Skin的CSS代码，你可以直接使用该代码查看效果。
（注：此代码仅供学习使用，请最好不要将此作为你的blog最终的代码，而且其中图片连接的地址不一定长期有效。）
效果预览： 查看效果
模板选择： Hover-Custom CSS
自定义CSS：
ExpandedBlockStart.gif ContractedBlock.gif body  {dot.gif} { 
InBlock.giffont-size : 9pt; 
InBlock.giffont-family : 宋体,Verdana, Geneva, Arial, Helvetica, sans-serif; 
InBlock.gifmargin : 0px; 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gifA:link  {dot.gif} { 
InBlock.gifCOLOR: #3F68A6; TEXT-DECORATION: none 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gifA:active  {dot.gif} { 
InBlock.gifCOLOR: #3F68A6; FONT-STYLE: normal; TEXT-DECORATION: none 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gifA:visited  {dot.gif} { 
InBlock.gifCOLOR: #3F68A6; TEXT-DECORATION: none 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gifA:hover  {dot.gif} { 
InBlock.gifCOLOR: #A7672E;TEXT-DECORATION: underline 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gif#leftmenu ul  {dot.gif} { 
InBlock.giflist-style : none; 
InBlock.gifmargin : 0px; 
InBlock.gifpadding : 0px; 
InBlock.gifmargin-left : 5px; 
InBlock.gifmargin-bottom : 10px; 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gif#top  {dot.gif} { 
InBlock.gifbackground-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_qiuji_top.jpg); 
InBlock.gifbackground-repeat: repeat; 
InBlock.gifpadding-top: 15px; 
InBlock.gifbackground-color : #088; 
InBlock.gifcolor : #000; 
InBlock.gifborder-bottom : 1px solid #FFF; 
InBlock.gifheight : 70px;vertical-align : middle; 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gifdiv.post {dot.gif} { 
InBlock.gifbackground-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_o_bj.jpg); 
InBlock.gifbackground-repeat: repeat-x; 
InBlock.gifpadding-right: 20px; 
InBlock.gifpadding-left: 20px; 
InBlock.giffont-size: 9pt; 
InBlock.gifpadding-bottom: 5px; 
InBlock.gifpadding-top: 5px; 
InBlock.gifline-height:150%; 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gif#leftmenu  {dot.gif} { 
InBlock.gifposition : absolute; 
InBlock.gifleft : 0px; 
InBlock.gifwidth : 180px; 
InBlock.gifbackground-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_zuo_bj.jpg); 
InBlock.gifpadding-bottom : 5px; 
InBlock.gifline-height:150%; 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gif#comments h4  {dot.gif} { 
InBlock.gifvertical-align : middle; 
InBlock.gifmargin : 0px; 
InBlock.giffont-size : 1.2em; 
InBlock.gifbackground-color : #F1F7FA; 
InBlock.gifheight:25px; 
InBlock.gifcolor:#006699; 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gifp.date  {dot.gif} { 
InBlock.gifheight : 25px; 
InBlock.giffont-size : 12pt; 
InBlock.gifmargin-bottom : 0px; 
InBlock.gifpadding : 2px 0px; 
InBlock.gifcolor:#FFF; 
InBlock.gifbackground-color : #45A; 
InBlock.gifbackground-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bg0001.jpg); 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gifp.date span  {dot.gif} { 
InBlock.gifpadding-left : 10px; 
InBlock.gifpadding-right : 10px; 
InBlock.giftext-align:right; 
InBlock.gifbackground-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bg0001.jpg); 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gif#tagline  {dot.gif} { 
InBlock.gifcolor : #000; 
InBlock.giffont-size : 1em; 
InBlock.gifmargin : 0px; 
InBlock.gifbackground-image: url(http://dotnet.mblogger.cn/images/dotnet.mblogger.cn/qiuji/45/o_bihai3.gif); 
InBlock.gifpadding : 5px;font-weight : bold; 
InBlock.gifbackground-color : #B2DEFF; 
ExpandedBlockEnd.gif}  
None.gif
None.gif#leftmenu a:active, 
None.gif#leftmenu a:visited, 
ExpandedBlockStart.gifContractedBlock.gif#leftmenu a:link  {dot.gif} { 
InBlock.gifborder : 0px solid #C00; 
InBlock.gifmargin-right : 5px; 
InBlock.gifpadding : 2px; 
InBlock.gifCOLOR: #3F68A6; 
InBlock.gifTEXT-DECORATION: none 
ExpandedBlockEnd.gif}  
ExpandedBlockStart.gifContractedBlock.gif#leftmenu a:hover  {dot.gif} { 
InBlock.gifCOLOR: #A7672E; 
InBlock.gifborder : 0px solid #C00; 
InBlock.gifbackground-color : transparent; 
InBlock.gifTEXT-DECORATION: underline 
ExpandedBlockEnd.gif}   
None.gif

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!^_^

转载于:https://www.cnblogs.com/leave/archive/2005/04/13/136778.html

weixin_30709635
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
转贴：四十岁的男人要像孩子一样养.doc
05-13
转贴：四十岁的男人要像孩子一样养
skin的应用[制作skin][应用skin][编程使用skin]
weixin_34335458的博客
01-14 189
Skin文件是.NET Framework2.0中的新特性，是用来美化前台界面的一个控件。在以前对HTML控件进行美化的时候通常采用css来作为美化的模板。但是随着.net的不断丰富，新控件有了很多的新特性，css这个与html同时期的模板对高级控件的支持显得力不从心，这时候MS就推出了skin来满足强大的.net 2.0的控件库的美化需要。下面就介绍如何制作和使用skin制作Skin：1、添加新...
[test]mblogger
weixin_33812433的博客
05-24 79
mbloger 的一个测试
我的mblogger
cixu3288的博客
03-18 65
我的mblogger链接:http://moonsoft.mblogger.cn ...
告别 博客.CN (mblogger.cn)，入住 CSDNBlog ......
NOD32无泪之城(SevenEleven)
09-23 890
　　离别的心情总是不怎么好受，在博客.CN数数也九个多月了，也结识了一帮新的网友，在那有快乐、有悲伤、有得到的、也有失去的、爱过、哭过、笑过、失落过……，谢谢一起走过的朋友，也谢谢有你们一起的日子　　来到一个新的“家“（CSDNBlog）,感觉挺不错的，换个地方换个心情，让我们从心开始……　 　 今天也正式启用了blog.canyoncn.com 我的BLOG域名，也欢迎大家常来坐坐……
LogExplore的一个详细操作手册
热门推荐
jinjazz
05-19 1万+
这篇文章最早是我3年前在mblogger上发表的,那时候csdn的blog经常down,在那边保留了一些文档,现在那个blog早已停止更新了,而这篇文档有时候还会用到,所以干脆搬了过来.原来的地址:http://borland.mblogger.cn/jinjazz/posts/19073.aspxLogExplore下载地址: http://js.fixdown.com/soft/832
动网转贴.zip易语言项目例子源码下载
03-22
动网转贴.zip易语言项目例子源码下载动网转贴.zip易语言项目例子源码下载 1.合个人学习技术做项目参考 2.适合学生做毕业设计参考 3.适合小团队开发项目参考
动网转贴.e.rar
04-06
动网转贴.e.rar
Qt制作Skin（皮肤）总结
playStudy的专栏
08-03 1776
使用Skin（皮肤）是制作酷酷界面的一 个有利的工具，在用户界面GUI越来越重要的今天，一个应用程序如果只有一套皮肤，不能更换皮肤，那么这个应用程序的生命力是非常值得人们怀疑的；那么使 用Qt如何制作酷酷而又吸引人的界面呢？下面我会对在Qt下进行皮肤制作，异型窗口制作做一个总结，对于新手是一个入门，对于老手算是一个参考吧，如果有 不妥和不当之处，还请大家不吝指出。 制作漂亮的界面目前至少有两
此人已走 HTTP://CHINIX.MBLOGGER.CN
x.Chin
05-27 1337
此人已走 HTTP://CHINIX.MBLOGGER.CN
智能导航的方法SmartNavigation
徐虎的专栏
12-06 2252
(百度和网页http://wayneliu.ms.mblogger.cn/Rss.aspx?CategoryID=1015的作者无关，不对其内容负责。)http://wayneliu.ms.mblogger.cn/我的.net世界zh-CHSRSS Generated by MBlogger Blogswayneliuhttp://wayneliu.ms.mblogger.cn/posts
http://dotnet.mblogger.cn/w6f3y0/search.aspx
王凤毅的专栏
09-12 1624
http://dotnet.mblogger.cn/w6f3y0/search.aspx
if "贴现模板" or '转贴买断' in file:
最新发布
05-31
因此，这个判断的实际效果等同于： ```python if "贴现模板": # do something ``` 如果你想判断一个字符串中是否包含多个子字符串，可以使用下面这样的写法： ```python if "贴现模板" in file or '转贴买断' in...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值