网站导航条代码(css导航条代码)
javascript中能实现网页上导航条选项特效代码，比如有三个，首页，产品，新闻等选项
title/title
style
body
{
margin: 50px;
padding: 0;
}
#tab ul
{
list-style-type: none;
padding: 0;
width:250px;
margin: 0px;
}
#tab ul li
{
width:80px;
height:20px;
font-size: 20px;
text-align: center;
line-height: 20px;
border: 1px solid #abcdef;
float: left;
cursor: pointer;
}
#tab ul li.active
{
background: #f90;
}
/style
script
window.onload=function()
{
var oTab=document.getElementById('tab');
var aLi=oTab.getElementsByTagName('li');
for(var i=0;iaLi.length;i++)
{
//鼠标移入
aLi[i].onmouseover=function()
{
for(var i=0;iaLi.length;i++)
{
aLi[i].className='';
}
this.className='active';
}
//鼠标移出
aLi[i].onmouseout=function()
{
for(var i=0;iaLi.length;i++)
{
aLi[i].className='';
}
}
}
}
/script
/head
body
div id="tab"
ul
li首页/li
li产品/li
li新闻/li
/ul
/div
/body
/html
html网页中嵌入导航条代码
是啊，就像楼上那位仁兄所说，导航代码是有CSS做一些布局加javascript做一些效果，他们都是用外联的方式引用这些代码的，还有一些图片什么的如果将这个页面下载下来就会得到这个页面的代码和它所引用的脚步和图片这样就可以引用到你的页面里了。
淘宝导航css代码
设置导航条的背景色
/* 导航栏背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;}
/* 导航列表背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}
/*导航条最右边的一部分背景*/
.skin-box-bd{background:#000000;}
--------------------------------------------------------------------------
设置导航条内的“所有分类”
/*所有分类背景色*/
.all-cats .link{background: none repeat scroll 0 0 #00ad08;}
/*所有分类文字样式*/
.all-cats .title{color:#颜色代码;font-size:字号px;}
修改“所有宝贝”右边小图标代码如下：
.all-cats .link .popup-icon{background:url(图片连接);}
------------------------------------------------------------------------------
设置导航条内的一级分类
/*一级分类的分隔线，实际上就是右边框的颜色*/
.skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}
/*一级分类的文字样式*/
.skin-box-bd .menu-list .menu .title{color:#颜色代码;font-size:字号px;}
/*一级分类所在的li 列表的背景色*/
.skin-box-bd .menu-list .menu-selected .link{background:#000000;}
/*一级分类所在的li 列表的文字背景色*/
.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
修改一级分类的宽度：
.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}
鼠标滑过一级分类导航文字变换背景色代码如下：
.menu-list .menu-hover .link{background:#000000;}
鼠标滑过一级分类导航文字变换颜色代码如下：
.menu-list .menu-hover .link .title{color:#FFFFFF;}
---------------------------------------------------------------------------------
设置二级分类的样式
二级分类文字代码如下：
.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}
二级分类背景代码如下：
.popup-content{background:#000000;}
鼠标滑过二级分类导航文字变换背景色代码如下：
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
鼠标滑过二级分类导航文字变换颜色代码如下：
.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
修改二级分类的高度：
.popup-content .cats-tree{margin:0 0 50px 0;}
修改二级分类右侧图标代码如下（有三级分类才会显示）：
.popup-content .cats-tree .fst-cat-icon{background:url(图片连接);}
----------------------------------------------------------------------------------
设置三级分类的样式
三级分类文字代码（除去“所有宝贝”分类）如下
.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}
三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色，我们会继续完善该代码！如下
.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}
三级分类背景代码：
.popup-content .cats-tree .snd-pop-inner{background:#000000;}
鼠标滑过三级分类导航文字变换背景色代码如下：
.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
在三级分类前加上小块白色代码如下：
.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}
高分求一个腾讯首页导航条代码
这里发不下，好多啊。这样吧，剩下的我把它发到我空间去，可以吧？这个是现成的，如果有其他的要求要改，可以hi我！！楼上那位朋友的没有弄完，还差一点后缀！
META http-equiv=X-UA-Compatible content=IE=EmulateIE7
STYLE
body{margin:0;padding:0 0 12px 0;background:#fff;font-size:13px;line-height:22px;}
div,p,li{font-family:Verdana,宋体;font-size:13px;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
li{font-size:13px;}
.tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}
.dis{display:block;}.undis{display:none;}
.fl{float:left;}.fr{float:right;}.cl{clear:both;}
.fh{height:22px;}.fb{font-weight:bold;}.fnb{font-weight:200;margin-left:-1px;}
.fc30{color:#303030;font-family:"宋体";}.fchot{color:#ff0700}
.f11{font-size:12px;font-family:tahoma;}
/*今日话题标题*/
h1{font-size:16px;font-weight:200;font-family:黑体;}
h1 a{color:#303030;}
/*普通标题*/
h3{font-size:14px;}
/*页卡*/
h4{font-weight:200;font-size:13px;cursor:pointer;}
h4 a{width:100%;heihgt:100%;display:block;}
a{color:#00007F;text-decoration:none;}
a:hover{color:#bd0a01;text-decoration:underline;}
a.lcblue{color:#0F479C;}
a.lchot{color:#bd0a01;}
.lchot{color:#bd0a01;}
/*迷你导航*/
#miniNav{height:22px;border-bottom:1px solid #e6e6e6;background:#f8f8f8;color:#a1a0a0;text-
align:center;line-height:14px;}
#miniNav img{margin-bottom:4px;border:0;}
#miniNav div{width:950px;margin:0 auto;font-size:12px;padding-top:4px; font-family:宋体;}
#miniNav span{display:bolck;float:right;}
#miniNav a{color:#a1a0a0;margin:0 3px;font-size:12px;text-decoration:none;padding:1px 3px
1px 3px;display:bolck;float:right;}
#miniNav a:hover{color:#fff;background:#929292;}
#miniNav .qq{font-family:Verdana;margin-top:-2px;}
/*顶部910导航*/
#NavCenter{text-align:center;}
#TopNav{width:910px;margin:0 auto;padding:6px 0 4px 0;height:39px;line-height:17px;}
#Logo{width:128px;float:left;text-align:center;}
#TextNav{float:left;width:780px;font-size:13px;}
#TextNav span{display:block;float:left;}
#TextNav a{padding:2px 6px 0 7px;font-size:13px;display:block;float:left;}
#TextNav a.lcnew{background:url() no-repeat
31px -37px;}
#TextNav a:hover{color:#fff;text-decoration:none;}
#TextNav a.lcnew:hover{color:#fff;background-image:url
();background-position:31px -37px; background-
repeat:no-repeat;}
/*soso*/
#Soso{width:912px;height:78px;margin:0 auto;}
#Soso_Left{padding:5px 0 0 25px;width:225px;margin:0 10px 0 0;float:left;}
#Wealth{line-height:18px;height:54px;padding-bottom:7px;margin-top:-9px;margin-left:-
5px;cursor:pointer;width:170px;}
#Wealth *{line-height:18px;}
#Wealth h6{font-size:13px;padding-top:20px;}
#Wealth span.img{float:left;display:block;padding-top:8px}
#Wealth p{float:left;margin:0;padding:0;}
#Wealth div{font-size:12px;font-family:tahoma,宋体;width:100px;}
/*皮肤列表*/
#Skin div {float:left}
#SkinList {width:56px;height:11px;overflow:hidden;display:block;}
#Skin li{float:left;width:14px;height:11px;cursor:pointer;}
#def div{background:url() no-repeat left top;}
#s1 div{background:url() no-repeat left -11px;}
#s2 div{background:url() no-repeat left -22px;}
#s3 div{background:url() no-repeat left -33px;}
#s4 div{background:url() no-repeat left -44px;}
#s5 div{background:url() no-repeat left -55px;}
#s6 div{background:url() no-repeat left -66px;}
#s7 div{background:url() no-repeat left -77px;}
#s8 div{background:url() no-repeat left -88px;}
#s9 div{background:url() no-repeat left -99px;}
#sar{cursor:pointer;}
#sar div{background:url() no-repeat -20px -
1px;}
#sar div.s{background:url() no-repeat -10px -
1px;}
/*soso输入框区域*/
#SosoArea{width:470px;padding:9px 0 0 0;float:left;}
#sosoFod{padding-left:14px;height:25px;}
#sosoFod h3{float:left;width:40px;height:26px;font-size:12px;font-weight:200;padding-
left:13px;cursor:pointer;}
#sosoFod #sosoqzone {width:50px;padding-left:3px;}
#sosoFod #sosoqzone div{margin-top:-1px;font-size:12px;}
#SosoArea input.w{width:392px;height:22px;border:0;padding:4px 3px 0 3px;margin-
right:6px;line-height:18px;font-size:14px;}
#SosoArea input.bot{border:0;width:51px;height:27px;padding-top:2px;}
#SosoArea table{line-height:17px;}
#SosoArea table a{color:#fff;}
#SosoAd{float:left;}
#sosoLogo {position:absolute;margin:26px 0 0 -55px;}
.more{position:absolute;background:#fff;margin:-2px 0 0 -5px!important;margin:16px 0 0 -
46px;z-index:10000;border:1px solid #B2D0EA;}
.more a{width:55px;display:block;padding-left:5px;}
.more ul{list-style-type:none;margin:0;padding:0;}
.more li{line-height:24px;list-style-type:none;margin:0;padding:0;text-align:left;}
.more li a,.more li a:visited{color:#3B5995;text-decoration:none;font-size:12px;}
.more li a:hover{background:#D6E9F8;color:#3B5995;text-decoration:none;font-size:12px;}
/*内容部分通用class*/
.cArea{width:910px;margin:0 auto;padding:10px 0 0 0;clear:both;z-index:1;}
.cArea1{width:910px;margin:0 auto;padding:7px 0 0 0;clear:both;}
.txArea{width:714px;float:left;}
.resArea{width:296px;float:left;}
.proArea{width:409px;;float:right;}
.adArea{width:186px;float:right}
.adMArea{clear:both;padding-top:10px;}
.imgArea{background:url() repeat-x
bottom;height:83px;}
.imgLArea{width:105px;height:70px;padding:0 12px 0 0;float:left;}
.imgRArea,.imgRArea1{float:left;}
.imgRArea *{font-size:14px;line-height:24px;}
.imgLAreapic {width:105px;height:80px;padding:0 12px 0 0;float:left;text-align:center;}
.imgLAreapic img{width:105px;height:55px;margin-bottom:1px;}
.imgLAreapic a{font-size:13px;}
.height{height:122px;}
.res_b,.pro_b{height:2px;}
.textArea{clear:both;padding:5px 0 0 0;}
/*产品导航区域*/
#proArea *{font-size:12px;line-height:16px;}
#proArea{width:286px;height:132px;overflow:hidden;padding:4px 0 0 10px;margin-bottom:10px;}
#proArea div{clear:both;height:22px;}
#proArea span{display:block;float:left;padding:3px 6px 0 0;font-weight:bold;}
#proArea a{text-decoration:none;padding:2px 3px 0 3px;display:block;
float:left;height:17px;}
#proArea a.m{text-decoration:underline;margin-left:2px;}
#proArea a.m:hover{color:#fff;text-decoration:underline;}
#proArea a.qq{text-decoration:none;margin-top:-1px;}
#proArea a.lchot{color:#bd0a01;}
#proAd{padding-bottom:2px;height:114px;width:409px;overflow:hidden;}
#proAdFlash {position:absolute;width:409px;z-index:500;}
#proArea_banner{height:20px;margin-bottom:10px;padding-left:16px;line-height:20px;font-
size:12px;color:#3d464b;}
#proArea_banner .tahoma{font-family:Tahoma;}
#proArea_search{width:409px;height:52px;background:url(
-2.gif);margin:10px auto;padding-top:8px;}
#proArea_search ul,#proArea_search li{margin:0;padding:0;list-style:none;clear:both;}
#proArea_search ul{margin-left:20px;}
#proArea_search .links{color:#0330BB;font-size:12px;font-weight:bold;font-family:宋体;}
#proArea_search .links a{color:#0330BB;font-size:14px;text-decoration:underline;}
#proArea_search .links a:hover{color:#f00;font-size:14px;}
#proArea_searchnub a{font-family:Tahoma;font-size:16px;color:#BD0A01;font-weight:bold;
margin:0 3px}
#pro1{width:584px}
#pro1 td{padding-right:12px;}
/*今日导航*/
#toDay{width:389px;height:133px;overflow:hidden;padding:10px;margin-bottom:10px;}
#toDay div.t{float:left;width:73px;height:25px;text-align:center;padding:2px 12px 0
63px;line-height:25px;font-weight:700;font-size:12px;}
#toDay div.t a:hover{text-decoration:none;}
#toDay h1{float:left;line-height:26px;padding-top:2px;font-family:宋体;font-size:16px; font
-weight:bold;height:36px;}
#toDay h1 a:hover{color:#bd0a01;}
#toDay h1 a.lchot{color:#bd0a01;}
#toDay p{color:#bab9b9;clear:both;font-family:宋体;font-size:14px;line-height:24px;}
#toDay p a.lchot:visited{color:#bd0a01;}
/*左边频道栏目*/
#NewsInfo .imgRArea li,#NewsInfo .imgRArea1 li,#SportsInfo .imgRArea li,#financeInfo
.imgRArea li,#techInfo .imgRArea li,#carInfo .imgRArea li,#eduInfo li{padding:2px 0 0
12px;background:url() no-repeat -26px
10px;font-family:宋体;}
/*内容链接颜色控制*/
#News h4 a:hover,#Sports h4 a:hover,#finance h4 a:hover,#tech h4 a:hover,#car h4
a:hover,#edu h4 a:hover,#blog h4 a:hover,#ent h4 a:hover,#game h4 a:hover,#book h4
a:hover,#lady h4 a:hover,#comic h4 a:hover{color:#bd0a01;}
#NewsInfo h3 a:hover{color:#bd0a01;}
#NewsInfo a.lchot,#SportsInfo a.lchot,#financeInfo a.lchot,#techInfo a.lchot,#carInfo
a.lchot,#eduInfo a.lchot{color:#bd0a01;}
#NewsInfo a.lchot:visited,#SportsInfo a.lchot:visited,#financeInfo a.lchot:visited,#techInfo
a.lchot:visited,#carInfo a.lchot:visited,#eduInfo a.lchot:visited{color:#bd0a01;}
#blogInfo a.lchot,#entInfo a.lchot,#gameInfo a.lchot,#comicInfo a.lchot,#bookInfo
a.lchot,#ladyInfo a.lchot,#comicInfo a.lchot{color:#bd0a01;}
#blogInfo a.lchot:visited,#entInfo a.lchot:visited,#gameInfo a.lchot:visited,#comicInfo
a.lchot:visited,#bookInfo a.lchot:visited,#ladyInfo a.lchot:visited,#comicInfo
a.lchot:visited{color:#bd0a01;}
/*新闻*/
#News h4{float:left;height:20px;line-height:20px;text-
align:center;width:73px;overflow:hidden;margin-right:1px;padding-top:3px;}
#News h4.s,#News h4.s1{font-weight:700;border-right:0;width:73px;padding-bottom:4px;}
#News span h4 {width:82px;padding-left:4px}
#News span h4.s {width:86px;}
#News span h4.s1 {width:102px;}
#News span h4.s0 {width:102px;}
#News span h4 a{display:inline;}
#NewsInfo a.black{color:#000;}
#NewsInfo a.black:hover{color:#000;}
#NewsInfo a.blue{color:#0330bb;}
#NewsInfo a.blue:hover{color:#0330bb;}
.dotline{padding:0;margin:4px 0 8px 4px;font:0;line-
height:0;width:278px;height:1px;background:url
() top repeat-x;clear:both;}
/*左侧列表内容12链接文字14*/
#NewsInfo *,#SportsInfo .textArea *,#financeInfo .textArea *,#techInfo .textArea *,#carInfo
.textArea *,#eduInfo .textArea *{font-size:12px;line-height:23px;}
#NewsInfo a,#tailorInfo a,#SportsInfo .textArea a,#financeInfo .textArea a,#techInfo
.textArea a,#carInfo .textArea a,#eduInfo .textArea a {font-size:14px;}
/*地方新闻定制页卡*/
#tailor div{float:left;margin-left:5px;width:auto; cursor:pointer;}
#tailor div.i{padding-top:3px;width:17px;height:12px;}
#tailor div.io{padding-top:3px;width:17px;height:12px;}
#tailorInfo .imgArea{background:url() repeat-x
bottom;height:84px;}
#tailorInfo .textArea{font-family:"宋体";font-size:12px;line-height:24px;margin-top:3px;}
#tailorInfo .textArea a{font-size:14px;}
#tailorInfo .imgLAreapic {width:105px;height:80px;padding:0 6px 0 6px;float:left;text-
align:center;}
#tailorInfo .imgLAreapic img{width:105px;height:55px;margin-bottom:5px;}
#tailorInfo .imgLAreapic a{font-size:13px;line-height:15px;}
#tailorInfo {padding-top:3px;}
#tailorInfo .point{background:url() repeat-x
top;clear:both;margin-top:5px;padding-top:8px;}
#tailorInfo .imgLArea {padding-top:4px;}
#tailorInfo .imgLArea {display:none;}
#tailorInfo .imgRArea a.c{color:#BA0F07;}
#tailorInfo .imgRArea1 {width:276px;text-align:right;}
#tailorInfo .imgRArea1 li{display:inline;background:url
() no-repeat -26px 7px;}
/*体育,财经,科技,汽车*/
#Sports h4,#finance h4,#tech h4,#car h4{float:left;height:20px;line-
height:20px;width:73px;text-align:center;overflow:hidden;margin-right:1px;padding-top:3px;}
#Sports h4.s,#finance h4.s,#tech h4.s,#car h4.s{height:20px;line-height:20px;font-
weight:700;width:73px;padding:3px 0 4px 0;}
#Sports span,#finance span,#tech span,#car span
{position:absolute;overflow:visible;display:block;}
#News h4 a:hover,#Sports h4 a:hover,#finance h4 a:hover,#tech h4 a:hover,#car h4 a:hover
{color:#bd0a01;}
#News,#Sports,#finance,#tech,#car{height:27px;}
#NewsInfo,#SportsInfo,#financeInfo,#techInfo,#carInfo,#eduInfo
{clear:both;overflow:hidden;padding:10px 6px 10px 2px;color:#BAB9B9;}
#NewsInfo .imgLAreapic,#SportsInfo .imgLAreapic,#financeInfo .imgLAreapic,#techInfo
.imgLAreapic,#carInfo .imgLAreapic,#eduInfo .imgLAreapic{width:105px;height:80px;padding:0
6px 0 6px;float:left;text-align:center;}
#SportsInfo .textArea,#financeInfo .textArea,#techInfo .textArea{padding:10px 0;}
#carInfo .textArea{padding:10px 0;}
#eduInfo .textArea{padding:10px 0;}
#NewsInfo{height:444px;padding-top:10px;}
#SportsInfo{height:209px;}
#financeInfo{height:247px;padding-bottom:0;}
#techInfo {height:208px;}
#carInfo{height:208px;}
#financeInfo form{height:22px;margin:219px -10px 0 -2px;padding:4px 6px 3px
6px;color:#000;width:282px;position:absolute;}
#financeInfo form input.w{width:53px;padding:1px;line-height:14px;}
#financeInfo form input.i{width:39px;height:18px;padding-top:1px;cursor:pointer;}
#map{position:absolute;margin:0 0 0 -2px;border-bottom:1px solid #8DC0E8;height:280px;z-
index:999}
/*中间一栏*/
#blog h4,#ent h4,#game h4,#comic h4,#book h4,#edu h4,#lady h4{float:left;width:73px;text-
align:center;height:20px;line-height:20px;margin-right:1px;padding-top:3px}
#blog h4.s,#ent h4.s,#game h4.s,#book h4.s,#lady h4.s{font-weight:700;width:73px;padding:3px
0 4px 0;height:20px;line-height:20px;}
#blog,#ent,#game,#book,#lady{height:27px;}
#comic,#edu{height:25px;}
#blog {width:409px}
#blog div{float:right;padding:1px 13px 6px 0;height:17px;width:172px;text-align:right;}
#entInfo,#gameInfo,#comicInfo,#bookInfo,#ladyInfo{width:387px;padding:10px;color:#BAB9B9;}