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

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 myhan 的 blog

<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:

/* 要想完全使用自己定义的样式表,防止默认的样式表对自己的定义样式产生影响, */
/* 可以将默认样式表里面的内容全部拿过来,对每一个属性都重新定义,不要遗漏哦 */
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

本文关键:[BLOG] 我的Blog定制效果和方法
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top