专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » divcss导航条:DIV+CSS+JS 仿kijiji导航条 »正文

divcss导航条:DIV+CSS+JS 仿kijiji导航条

来源: 发布时间:星期四, 2009年2月12日 浏览:564次 评论:0


　　客齐集首页个效果,今天有人问我是如何写,于是晚上就又重写了个;顺便把那个布局再理下；
　　你可以先看下客齐集首页效果:http://shanghai.kijiji.cn
　　我试着不用position:absolute思路方法；但写起来太难了；后来还是用position:absolute了；但在客齐集站上是没有用；真不知道当时是如何写出来；
　　以下是效果图:

\" border=\"0\" alt=\"\"/>

　　以下是布局部分:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<divid=\"info\">
<divid=\"kjj_tag\"></div>
<ul>
<liid=\"tag1\"><h4><ahref=\"javascript:kijijitag(\'1\');\">热门活动</a></h4></li>
<liid=\"tag2\"><h4><ahref=\"javascript:kijijitag(\'2\');\">最新功能</a></h4></li>
<liid=\"tag3\"><h4><ahref=\"javascript:kijijitag(\'3\');\">服务承诺</a></h4></li>
<liid=\"tag4\"><h4><ahref=\"javascript:kijijitag(\'4\');\">最新成功故事</a></h4></li>
<liid=\"tag5\"><h4><ahref=\"javascript:kijijitag(\'5\');\">热贴推荐</a></h4></li>
</ul>
<divid=\"info1\"><ahref=\"http://www.zishu.cn\"target=\"blank\">子鼠00001</a></div>
<divid=\"info2\"><ahref=\"http://www.zishu.cn\"target=\"blank\">子鼠00002</a></div>
<divid=\"info3\"><ahref=\"http://www.zishu.cn\"target=\"blank\">子鼠00003</a></div>
<divid=\"info4\"><ahref=\"http://www.zishu.cn\"target=\"blank\">子鼠00004</a></div>
<divid=\"info5\"><ahref=\"http://www.zishu.cn\"target=\"blank\">子鼠00005</a></div>
</div>



　　以下是CSS部分:(CSS还没有优化)

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
/*子鼠www.zishu.cn*/
*{margin:0;padding:0;font-size:12px;font-family:Verdana,Arial,\"宋体\";list-style:none;}
body{background:#FFFFCC;margin:100px00100px;}
#info{border:1pxsolid#FFCC66;padding:30px;background:#f7f7f7;width:500px;}
#kjj_tag{width:500px;border-bottom:1pxsolid#CCC;background:url(taga_c.g)repeat-xleftbottom;height:30px;}
#info1,#info2,#info3,#info4,#info5{border:1pxsolid#ccc;border-top:none;padding:10px;background:#fff;clear:both;}
h4{font-weight:normal;float:left;border-right:1pxsolid#fff;}
.hd{display:none;}
.sw{display:block;}
#infoli{float:left;}
#infolia{float:left;display:block;padding:4px10px4px10px;color:#37572E;text-decoration:none}
#infolia:hover{background:#E9FE70;color:#000}
#infoul{float:left;margin-top:-28px;padding:5px0;position:absolute}
#info.haa{color:#FFF}
#info.haa:hover{color:#FFF;background:none}
#info.ha.hc:hover{background:url(tag_d.g)no-repeatcenterbottom;}
.ha{background:url(taga_a.g)no-repeatlefttop;margin-top:-3px;padding-top:3px;}
.hb{background:url(taga_b.g)no-repeatrighttop;margin-top:-3px;padding-top:3px;}
.hc{background:url(tag_d.g)no-repeatcenterbottom;height:17px;color:#FFF;font-weight:bold}


　　以下为JS部分:由于javascript对于我来说太难了；所以可能这部分写比较烂但效果是出来了；

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]


<scriptlanguage=\"javascript\">
vark=Math.floor(Math.random*5+1);
for(i=1;i<6;i){
(ik){
document.getElementById(\"info\"+i).Name=\"sw\";
document.getElementById(\"tag\"+i).Name=\"ha\";
document.getElementById(\"tag\"+i).getElementsByTagName(\"h4\")[0].Name=\"hb\";
document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].Name=\"hc\";
}
{
document.getElementById(\"info\"+i).Name=\"hd\";
}
}
functionkijijitag(tag){
for(i=1;i<6;i)
{
(itag)
{
document.getElementById(\"info\"+i).Name=\"sw\";
document.getElementById(\"tag\"+i).Name=\"ha\";
document.getElementById(\"tag\"+i).getElementsByTagName(\"h4\")[0].Name=\"hb\";
document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].Name=\"hc\";
}
{
document.getElementById(\"info\"+i).Name=\"hd\";
document.getElementById(\"tag\"+i).Name=\"\";
document.getElementById(\"tag\"+i).getElementsByTagName(\"h4\")[0].Name=\"\";
document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].Name=\"\";
}
}
}
</script>



　　以下是用到 4个图:

\" border=\"0\" alt=\"\"/>
\" border=\"0\" alt=\"\"/>
\" border=\"0\" alt=\"\"/>
\" border=\"0\" alt=\"\"/>

　　看下效果:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]



=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]


特别介绍说明:
　　1、CSS部分不是很清晰写我都有点晕了；
　　2、 5个TAG是随机换；
　　3、JS部分还可以再精简些但要有CSS支持；
本文作者:zishu
标签：css制作导航条 css导航条 div导航条 divcss导航条
2
我顶

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章