。Blog界面定制和修改 marvin2


我选用的皮肤是:marvin2

首先是添加一个顶部的导航菜单,我把原来左侧最上面的My Links的内容放到了导航菜单里面,并且自己自定义了几个链接。
通过分析页面的源文件,我们可以看出marvin2的布局基本上是这样的:

<form>
<div id="top"></div>
<div id="menu"></div>
<div id="leftmenu">
<h3>My Links</h3>
<ul>
<li></li>
</ul>
</div>
<div id="main">
<p class="date"></p>
<div class="post">
<h2>
</h2>
<p class="postfoot">
</p></div></div>
<p id="footer"></p></form>

通过JavaScript使用DOM属性和方法操纵文档内容,就可以改变最后的效果了
所以之后页面的布局实际上就成了这样子的了:

<form>
<div id="top"></div>
<div id="menu"></div>
<div id="leftmenu">
<h3>My Links</h3>
<ul><li></li></ul></div>
<div id="main">
<p class="date"></p>
<div class="post">
<h2></h2>
<p class="postfoot"></p>
</div>
</div>
<p id="footer"></p></form>

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

<script>// 修改和交换左侧一栏的内容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,动态的添加了这个玩意:

<script>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:(marvin2)

/* http://blog.csdn.net/bluevoyage/archive/2004/08/13/73100.aspx */
/* 要想完全使用自己定义的样式表,防止默认的样式表对自己的定义样式产生影响 */
/* 可以将默认样式表里面的内容全部拿过来,对每一个属性都重新定义,不要遗漏哦 */

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://blog.csdn.net/kekeblog/archive/2004/11/21/189200.aspx


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值