<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