[BLOG] 我的Blog定制效果和方法

不知道大家觉得我的Blog的效果怎么样:) 我个人感觉还不错哦，hoho！仿照微软的主页做的一点点修改，主要使用了DOM和CSS。

关于如何添加JS代码和自定义CSS，很多人的blog里面都有了，我就不说了。

下面是我自己的修改过程，一一说来，供大家分享，写的不好别扔我：）

我选用的皮肤是：marvin2。

首先是添加一个顶部的导航菜单，我把原来左侧最上面的My Links的内容放到了导航菜单里面，并且自己自定义了几个链接。

通过分析页面的源文件，我们可以看出marvin2的布局基本上是这样的：

<form>

<h3>My Links</h3>

<ul>

</ul>

</div>

</div>

</form>

通过JavaScript使用DOM属性和方法操纵文档内容，就可以改变最后的效果了：

// 定位到左边菜单节点

var left = document.getElementById("leftmenu");

// 创建一个新的div节点

var menu = document.createElement("div");

// 设置该div节点的ID为menu，为了在css中定义其样式

menu.setAttribute("id", "menu");

// 重写div节点里面的内容，我去掉了xml的小图标，添加了两个链接

menu.innerHTML = '<ul><li><a id="MyLinks1_HomeLink" href="/myhan/">Home</a></li><li><a id="MyLinks1_ContactLink" accesskey="9" HREF="/myhan/contact.aspx">Contact</a></li><li><a id="MyLinks1_Syndication" href="http://blog.njmars.com/myhan/Rss.aspx">Syndication</a></li><li><a id="njmars" href="http://blog.njmars.com/myhan/">blog.njmars!</a></li><li><a id="csdn" HREF="/">blog.csdn!</a></li><li><a id="MyLinks1_Admin" HREF="/myhan/admin/default.aspx">Admin</a></li></ul>';

// 关键：left.parentNode就是form了，使用insertBefore()方法在节点left之前插入新的节点

left.parentNode.insertBefore(menu, left);

</script>

所以之后页面的布局实际上就成了这样子的了：

<form>

<h3>My Links</h3>

<ul>

</ul>

</div>

</div>

</form>

然后我继续通过JS使用DOM操纵页面，将左侧原来的My Links内容去掉，然后将左侧几项的顺序调换一下。代码如下：

// 修改和交换左侧一栏的内容

function swapleft()

{

// 这个if判断页面是否已经下载完毕，因为这段代码放在News栏目里面，显示的较leftmenu的其他内容要早

// 如果直接之行下面的代码的话，会有错误产生。

// 我使用定时器不断的检查，知道页面全部下载完毕之后，在之行下面的内容:)

if (document.getElementById("footer")) {

// 定位到左侧菜单节点

var left = document.getElementById("leftmenu");

// 通过left对象的childNodes属性得到<div id="leftmenu"></div>这个节点里面的内容，如<h3></h3>和<ul></ul>

// list 是一个数组

// 注意 <h3>和<ul>是同一级别的节点，而项目<li>是<ul>的子节点。

var list = left.childNodes;

// 对left的字节进行操作

// 使用removeNode方法，将该节点删除。

list[0].removeNode(true);

list[0].removeNode(true); // 注意，这个节点本来是list[1]，但是上面删除了list[0]，这个就变成了list[0]了。

list[0].swapNode(list[2]); // 交换节点，将节点的顺序换掉。

list[1].swapNode(list[3]);

list[2].swapNode(list[5]);

list[3].swapNode(list[6]);

list[5].swapNode(list[9]);

list[6].swapNode(list[10]);

list[0].innerText = "心语"; // 修改节点的文字内容

list[9].innerText = "状态";

} else {

setTimeout("swapleft();", 30);

}

setTimeout("swapleft();", 30);

</script>

随后我还添加了一个计数器，可以看到我的计数器显示的位置是一个独立的小栏里面，我一样还是使用DOM，动态的添加了这个玩意：

function addcounter()

{

var cnt_po = document.getElementById("leftmenu");

var cnt_h3 = document.createElement("h3"); // 依次创建节点

var cnt_ul = document.createElement("ul");

var cnt_div = document.createElement("div");

var cnt_img = document.createElement("img");

cnt_h3.innerText = "计数"; //设置属性

cnt_img.setAttribute("src", "http://nmc2.jy.js.cn/cgi-bin/counter.pl?id=njmars_myhan&md=a11&ln=6&from=1000&bd=$0;$0;$0");

cnt_img.setAttribute("align", "absmiddle");

cnt_div.setAttribute("align", "center");

cnt_div.appendChild(cnt_img); // 依次将节点一个一个的附加上去 :) 注意顺序哦

cnt_ul.appendChild(cnt_div);

cnt_po.appendChild(cnt_h3);

cnt_po.appendChild(cnt_ul);

}

setTimeout("addcounter();", 40); // 等会儿，差不多页面下载完毕之后，执行之！

</script>

关于DOM的其他更为详细的讲解，请参看这里：http://tjian.myrice.com/study_data/script-2/1.htm

至于页面的其他样式的定制修改，就是样式表的功劳了，请看我的样式表内容，我就不一一解释了。

我的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;

}