本文共 6057 字，大约阅读时间需要 20 分钟。
不知道大家觉得我的Blog的效果怎么样:) 我个人感觉还不错哦，hoho！仿照微软的主页做的一点点修改，主要使用了DOM和CSS。
关于如何添加JS代码和自定义CSS，很多人的blog里面都有了，我就不说了。
下面是我自己的修改过程，一一说来，供大家分享，写的不好别扔我：）
我选用的皮肤是：marvin2。
首先是添加一个顶部的导航菜单，我把原来左侧最上面的My Links的内容放到了导航菜单里面，并且自己自定义了几个链接。
通过分析页面的源文件，我们可以看出marvin2的布局基本上是这样的：
通过JavaScript使用DOM属性和方法操纵文档内容，就可以改变最后的效果了：
所以之后页面的布局实际上就成了这样子的了：
然后我继续通过JS使用DOM操纵页面，将左侧原来的My Links内容去掉，然后将左侧几项的顺序调换一下。代码如下：
随后我还添加了一个计数器，可以看到我的计数器显示的位置是一个独立的小栏里面，我一样还是使用DOM，动态的添加了这个玩意：
关于DOM的其他更为详细的讲解，请参看这里：
至于页面的其他样式的定制修改，就是样式表的功劳了，请看我的样式表内容，我就不一一解释了。
我的css：
/* 要想完全使用自己定义的样式表，防止默认的样式表对自己的定义样式产生影响， *//* 可以将默认样式表里面的内容全部拿过来，对每一个属性都重新定义，不要遗漏哦 */BODY { MARGIN: 0px; BACKGROUND-COLOR: #fbfbfb; FONT-SIZE: 0.9em; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;}A, A:visited, A:active, A:link { COLOR: #00f; TEXT-DECORATION: none;}A:hover { COLOR: black; TEXT-DECORATION: none;}H1 { FONT-SIZE: 1.5em; MARGIN: 0px;}H1 A:visited { COLOR: #000;}H1 A:active { COLOR: #000;}H1 A:link { COLOR: #000;}H1 A:hover { COLOR: #47f; TEXT-DECORATION: none;}H2 { FONT-SIZE: 1em; margin-top: 0px; padding-left: 0px;}H3 { FONT-SIZE: 1.2em; BORDER-BOTTOM: #aaa 1px solid}H5 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}P { MARGIN: 10px 0px}BLOCKQUOTE { FONT-STYLE: italic}INPUT.text { WIDTH: 300px}TEXTAREA { WIDTH: 300px; HEIGHT: 200px}/* 这里的filter产生一个渐进的背景效果， 参数gradientType 为 1 则是横向的渐进，0 则为纵向的渐进，更详细的内容请参看 MSDN*/#top { PADDING: 10px; BORDER:0px; BACKGROUND-COLOR: #fff; COLOR: #fff; HEIGHT: 100%; FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0A6CCE', endColorStr='#FFFFFF', gradientType='1');}#top H1 { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px}#top H1 A { COLOR: #fff;}#tagline { MARGIN: 0px; PADDING: 5px; FONT-SIZE: 10px; COLOR: #fff;}#menu { BORDER-TOP: #999 1px solid; FONT-SIZE: 100%; BACKGROUND-COLOR: #f1f1f1; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: #999 1px solid}#menu UL { height: 100%; FONT-size: 100%; COLOR: black; TEXT-DECORATION: none; MARGIN: 0px; PADDING: 0px; border: 0px; LIST-STYLE-TYPE: none;}#menu LI { height: 100%; FONT-SIZE: 100%; BORDER-RIGHT: #a9a9a9 1px solid; PADDING-RIGHT: 2px; DISPLAY: inline; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;}#menu li a { height:100%; FONT: 75% Verdana; COLOR: black; TEXT-DECORATION: none;}/* 这里对导航菜单的链接样式做了设计，产生类似微软网站的效果，我只使用css，没有用js操作 */#menu LI A { border: 1px #f1f1f1 solid; padding-left: 8px; padding-right: 8px; padding-top:1px; padding-bottom:1px; margin: 0px; background-color: #f1f1f1; COLOR: black; TEXT-DECORATION: none; }#menu LI A:hover { border: 1px #999 solid; padding-left: 8px; padding-right: 8px; padding-top:1px; padding-bottom:1px; margin: 0px; background-color: #ccc; COLOR: black; TEXT-DECORATION: none;}#MyLinks1_XMLLink { VISIBILITY: hidden; width: 0px; height: 0px; padding: 0px; margin: 0px;}#MyLinks1_XMLLink IMG { VISIBILITY: hidden; width: 0px; height: 0px; padding: 0px; margin: 0px;}#leftmenu { MARGIN: 0px; margin-top: 10px; LEFT: 10px; padding: 0px; WIDTH: 180px; POSITION: absolute;}#leftmenu H3 { FONT-SIZE: 0.9em; BORDER: #999 1px solid; BORDER-BOTTOM: 0px; HEIGHT: 100%; MARGIN: 0px; PADDING: 5px; FILTER: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#4992DB', gradientType='0'); }#leftmenu UL { FONT-SIZE: 0.8em; LIST-STYLE-TYPE: none; PADDING: 4px; BORDER: #999 1px solid; MARGIN: 0px; MARGIN-BOTTOM: 10px;}#leftmenu LI A { COLOR: black; TEXT-DECORATION: none;}#leftmenu LI A:hover { COLOR: black; TEXT-DECORATION: underline;}#main { PADDING: 10px; MARGIN-LEFT: 200px; BORDER: 0px; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 4px solid; BACKGROUND-COLOR: #ffffff;}#main P.date { FONT-WEIGHT: bold; FONT-SIZE: 0.9em; BORDER: #999 1px solid; BORDER-BOTTOM: none; PADDING-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; MARGIN: 0px; HEIGHT: 100%; FILTER: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#4992DB', startColorstr='#FFFFFF', gradientType='1'); }#main P.date IMG { VERTICAL-ALIGN: middle}#main DIV.post { BORDER: #999 1px solid; PADDING: 5px; MARGIN: 0px 0px 10px; }#main A, A:hover, A:visited { COLOR: #700;}#main P.postfoot { FONT-SIZE: 0.75em; PADDING: 0px; PADDING-TOP: 5px; PADDING-BOTTOM: 2px; MARGIN: 10px 0px 0px; BORDER-TOP: #999 1px dotted;}#relatedlinks UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 10px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}#comments { MARGIN-BOTTOM: 10px; COLOR: #700}#comments H3 { COLOR: #700}#comments H4 { FONT-SIZE: 0.9em; MARGIN: 0px}#comments H4 SPAN { COLOR: #999;}#comments P { BORDER-BOTTOM: #dddddd 1px solid}#comments P A { FONT-SIZE: 9px; COLOR: darkblue}#footer { FONT-SIZE: 0px; VISIBILITY: hidden; MARGIN: 0px; PADDING: 0px; HEIGHT: 0px; TEXT-ALIGN: center}#footer IMG { VISIBILITY: hidden; WIDTH: 0px; HEIGHT: 0px}#div_list P { FONT-SIZE: 12px}#div_list IMG { BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid}#imageFrame DIV.div_image { MARGIN-TOP: 20px; TEXT-ALIGN: center}#imageFrame DIV.div_link { TEXT-ALIGN: center}#commentform TABLE { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px}#commentform TD { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px}#commentform TR { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px}#main DIV.cus_code { COLOR: #465584; FONT-SIZE: 12px; FONT-FAMILY: Courier New;BORDER: #000000 1px solid;BORDER-LEFT: #666666 6px solid; PADDING-LEFT: 0px 0px 0px 0px;MARGIN: 10px 20px;BACKGROUND-COLOR: #ffffff;} 转载地址：http://uudvb.baihongyu.com/