导航条的代码(导航条的代码怎么看)
谁能给我做个DIV+CSS的简单导航条代码
!DOCTYPE html
?
html
?
head
?
titletest/title
?
style type = "text/css"
?
/*设置通配符样式*/
?
*{
?
?margin:0;
?
?padding:0;
?
}
?
body{
?
?font-size:12px;
?
}
?
ul{
?
?list-style:none;
?
}
?
a{
?
?text-decoration:none;
?
}
?
/*设置二级导航样式*/ ?
?
.nav {
?
?width:500px;
?
?height:30px;
?
?background-color:#b4b4b4;
?
?/*导航栏居中*/
?
?margin:auto;
?
}
?
.nav ul li {
?
?width:100px;
?
?height:30px;
?
?float:left;
?
?position:relative;
?
}
?
.nav ul li a {
?
?display:block;
?
?width:96px;
?
?border:2px solid gray;
?
?height:26px;
?
?line-height:26px;
?
?text-align:center;
?
}
?
.nav ul li a:hover {
?
?background-color:yellow;
?
}
?
/*设置一级导航样式*/
?
.nav ul li ul{
?
?display:none;
?
}
?
.nav ul li:hover ul{
?
?display:block;
?
?width:100px;
?
?position:absolute;
?
?top:30px;
?
?left:0;
?
?background-color:white;
?
}
?
.nav ul li:hover ul li a{
?
?display:block;
?
?width:96px;
?
?height:26px;
?
?line-height:26px;
?
?border:2px solid gray;
?
?text-align:center;
?
}
?
.nav ul li:hover ul li a:hover{
?
?background-color:orange;
?
}
?
/*设置三级导航样式*/
?
.nav ul li:hover ul li ul {
?
?display:none;
?
}
?
.nav ul li:hover ul li:hover ul{
?
?display:block;
?
?width:100px;
?
?position:absolute;
?
?top:0px;
?
?left:100px;
?
?background-color:#b4b4b4;
?
}
?
.nav ul li:hover ul li:hover ul li {
?
?width:100px;
?
?height:30px;
?
}
?
.nav ul li:hover ul li:hover ul li a {
?
?display:block;
?
?width:96px;
?
?height:26px;
?
?line-height:26px;
?
?border:2px solid gray;
?
?text-align:center;
?
}
?
.nav ul li:hover ul li:hover ul li a:hover {
?
?background-color:#00CC00;
?
}
?
.nav ul li:hover ul .nav_jw ul {
?
?display:none;
?
}
?
.nav ul li:hover ul .nav_jw:hover ul{
?
?display:block;
?
?width:100px;
?
?position:absolute;
?
?top:0px;
?
?left:-100px;
?
?background-color:#b4b4b4;
?
}
?
.nav ul li:hover ul .nav_jw:hover ul li {
?
?width:100px;
?
?height:30px;
?
}
?
.nav ul li:hover ul .nav_jw:hover ul li a {
?
?display:block;
?
?width:96px;
?
?height:26px;
?
?line-height:26px;
?
?border:2px solid gray;
?
?text-align:center;
?
}
?
.nav ul li:hover ul .nav_jw:hover ul li a:hover {
?
?background-color:#00CC00;
?
}
?
/style
?
meta charset="gb2312"
?
/head
?
body
?
div class = "nav"
?
ul
?
lia href = "#"一级导航/a
?
?ul
?
?lia href = "#"二级导航/a
?
? ? ?ul
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ?/ul
?
?/li ? ?
?
?lia href = "#"二级导航/a
?
? ? ?ul
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ?/ul
?
?/li ? ?
?
?lia href = "#"二级导航/a
?
? ? ?ul
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ?/ul
?
?/li ? ?
?
?/ul
?
/li
?
lia href = "#"一级导航/a
?
?ul
?
?lia href = "#"二级导航/a/li ? ?
?
?lia href = "#"二级导航/a/li ? ?
?
?lia href = "#"二级导航/a/li ? ?
?
?/ul
?
/li
?
lia href = "#"一级导航/a
?
?ul
?
?lia href = "#"二级导航/a/li ? ?
?
?lia href = "#"二级导航/a/li ? ?
?
?lia href = "#"二级导航/a/li ? ?
?
?/ul
?
/li
?
lia href = "#"一级导航/a
?
?ul
?
?lia href = "#"二级导航/a/li ? ?
?
?lia href = "#"二级导航/a/li ? ?
?
?lia href = "#"二级导航/a/li ? ?
?
?/ul
?
/li
?
lia href = "#"一级导航/a
?
?ul
?
?li class="nav_jw"a href = "#"二级导航/a
?
? ? ?ul
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ?/ul
?
?/li ? ?
?
?li class="nav_jw"a href = "#"二级导航/a
?
? ? ?ul
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ?/ul
?
?/li ? ?
?
?li class="nav_jw"a href = "#"二级导航/a
?
? ? ?ul
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ? ? ?lia href = "#"三级导航/a/li
?
? ? ?/ul
?
?/li ? ?
?
?/ul
?
/li
?
/ul
?
/div
?
/body
?
/html ?
淘宝店铺装修，导航条代码问题
.skin-box-bd{background:#1D96D4;}/*页头背景颜色设置成#1D96D4可以做成宽屏的导航*/
.skin-box-bd
.menu-list{background:#1D96D4;}
.skin-box-bd
.menu-list
.menu{background:#1D96D4;border:none;}
.skin-box-bd
.menu-list
.menu
.link{background:#1D96D4;border:none;border-right:1px
solid
#ffffff;}
.all-cats
.link{background:#CC66CC;border:none;}
.all-cats
.link:hover{background:#CC99FF;}
.all-cats
.link
.title{color:#ffffff;border:none;}
.all-cats
.link
.title:hover{color:#ffff00}
.skin-box-bd
.menu-list
.menu
.link:hover{background:#CC99FF;}
.skin-box-bd
.menu-list
.menu
.link
.title{background:none;color:#ffffff;font-weight:bold;}
.skin-box-bd
.menu-list
.menu
.link
.title:hover{color:#333333;}
.skin-box-bd
.menu-list
.menu-selected
.link{background:#CC99FF;}
.skin-box-bd
.menu-list
.menu-selected
.link
.title{color:#333333;}
.popup-content{border:none;padding:0px;margin:0px;}
.popup-content
.popup-inner{border:none;padding:0px;margin:0px;background:#cccccc;}
.popup-inner
.cats-tree
.fst-cat{background:#cccccc;border-top:solid
1px
#FFFFFF;}
.popup-inner
.cats-tree
.fst-cat:hover{background:#eeeeee;}
.popup-inner
.cats-tree
.fst-cat
.cat-hd
.fst-cat-name{color:#FFFFFF;}
.popup-inner
.cats-tree
.fst-cat
.cat-hd
.fst-cat-name:hover{color:#333333}
.popup-content
.menu-popup-cats
.sub-cat{background:#cccccc;}
.popup-content
.menu-popup-cats
.sub-cat
.cat-name{color:#FFFFFF;background:#cccccc;}
.popup-content
.menu-popup-cats
.sub-cat
.cat-name:hover{color:#333333;background:#eeeeee;}
.snd-pop-inner{height:auto;padding:0px;margin:0px;}
.snd-pop-inner
.fst-cat-bd{padding:0px;margin:0px;background-color:#eeeeee;}
.snd-pop-inner
.fst-cat-bd
.snd-cat-hd{background-color:#eeeeee;}
.snd-pop-inner
.fst-cat-bd
.snd-cat-name{color:#555555;}
.snd-pop-inner
.fst-cat-bd
.snd-cat-name:hover{color:#eeeeee;background-color:#555555;}
怎么用html+css做一个导航条
首先建立一个DIV，为其命名为“nav”，在DIV中建立一个ul无序列表，导航共有几个栏目，就为列表添加几个li的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项li标签设置左浮动的样式，代码为：li {float:left;}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
导航条的更多样式及详细步骤可去这里参考
求一段网页中左侧导航条的代码,要求如下:
!--One step to installing this script--
!--1) Simply add the below to your BODY:--
script LANGUAGE="JavaScript1.2"
!--
/*
For this script, visit
or
*/
var WhereTo = null;
var TimerID = null;
var now = new Date();
var pos = 0;
var StartTime = null;
var PauseTime = 3000;
// Change the PauseTime value (in milliseconds) to
// change the speed at which the button URLs rotate.
function InitializeArray() {
this.length = InitializeArray.arguments.length
for (var i = 0; i this.length; i++)
{
this[i+1] = InitializeArray.arguments[i]
}
}
function ParseString(data,num) {
for(var i=0;idata.length;i++)
{
if(data.substring(i,i+1)=="|") break;
}
if (num==0) return(data.substring(0,i));
else return(data.substring(i+1,data.length));
}
function StartTimer() {
now = new Date();
StartTime=now.getTime();
StopTimer();
WhereTo = new InitializeArray("Java-Scripts.net|",
"Free-Backgrounds|",
"Website Abstraction|",
"Dynamic Drive|",
"MSNBC.com|",
"Geocities|",
"CodeArena.com|",
"Email Us|george@java-scripts.net");
ShowTimer();
}
function StopTimer() {
TimerID = null;
WhereTo = null;
}
function ShowTimer() {
pos= (pos == WhereTo.length) ? 1 : pos + 1;
document.forms[0].elements[0].value=ParseString(WhereTo[pos],0);
TimerID=window.setTimeout('ShowTimer()',PauseTime);
}
function DestinationUrl() {
this.location=ParseString(WhereTo[pos],1);
return (false);
}
window.onload=window.StartTimer
//--
/script
form
div align="center"centerpinput TYPE="button" VALUE=" Cool Links! "
NAME="Destination" onClick="window.DestinationUrl()"
/form
淘宝导航条修改代码
你好，导航你看看下面的代码，我现在在用，没问题，把对应的文字改成你要设置的颜色，如果不显示颜色（透明色），就把颜色改成#transparent就可以了
.skin-box-bd{background:##导航背景色;}/*此代码由樱淘美工作室提供*/
.skin-box-bd .menu-list{background:##导航背景色;}
.skin-box-bd .menu-list .menu{background:##导航背景色;border:none;}
.skin-box-bd .menu-list .menu .link{background:##导航背景色;border:none;border-right:1px solid #transparent;}
.all-cats .link{background:##所有分类背景色;border:none;}
.all-cats .link:hover{background:##鼠标触控所有分类背景色;}
.all-cats .link .title{color:##所有分类文字色;border:none;}
.all-cats .link .title:hover{color:##鼠标触控所有分类文字色}
.skin-box-bd .menu-list .menu .link:hover{background:##鼠标触控导航背景色;}
.skin-box-bd .menu-list .menu .link .title{background:none;color:##导航文字色;font-weight:normal;}
.skin-box-bd .menu-list .menu-selected .link{background:##鼠标触控导航背景色;}
.skin-box-bd .menu-list .menu .link .title:hover {color:##鼠标移至导航文字色;}
.skin-box-bd .menu-list .menu-selected .link .title{color:##导航文字色;}
.popup-content{border:none;padding:0px;margin:0px;}
.popup-content .popup-inner{border:none;padding:0px;margin:0px;background:#2b913a;}
.popup-inner .cats-tree .fst-cat{background:#2b913a;border-top:solid 1px #2b913a;}
.popup-inner .cats-tree .fst-cat:hover{background:#5f0430;}
.popup-inner .cats-tree .fst-cat .cat-hd .fst-cat-name{color:#ffffff;}
.popup-inner .cats-tree .fst-cat .cat-hd .fst-cat-name:hover{color:#ffffff}
.popup-content .menu-popup-cats .sub-cat{background:#2b913a;}
.popup-content .menu-popup-cats .sub-cat .cat-name{color:#ffffff;background:#2b913a;}
.popup-content .menu-popup-cats .sub-cat .cat-name:hover{color:#ffffff;background:#5f0430;}
.snd-pop-inner{height:auto;padding:0px;margin:0px;}
.snd-pop-inner .fst-cat-bd{padding:0px;margin:0px;background-color:#f8fbc4;}
.snd-pop-inner .fst-cat-bd .snd-cat-hd{background-color:#f8fbc4;}
.snd-pop-inner .fst-cat-bd .snd-cat-name{color:#333333;}
.snd-pop-inner .fst-cat-bd .snd-cat-name:hover{color:#ffffff;background-color:#5f0430;}
谢谢采纳！
导航栏代码
下面是代码，div层gameNavcontent1什么的是标题，gameNavccontent1什么的是下面的具体内容，需要转换自己改，复制到html文件里就能看到效果，不懂hi我
style
/*游戏导航
----------------------------------*/
#gameNav { width: 776px; padding: 0; margin: 0; height: 300px; float: left; overflow:hidden; color:#CFCFCF; }/*--------------------------20090701补丁*/
#gameNavHeader{ width:769px; height:64px; padding:0; margin:0 3px 0 4px; background: url() no-repeat top left;background-position: -1130px -1970px;}/*大背景*/
#gameNavContent{ clear:both; width:769px; height:236px; padding:0; margin:0 3px 0 4px;}
#gameNavHeader .row1{ float:left; width:769px;}
#gameNavHeader .row1 .col1{ float:left; width:362px; height:23px;background:url() no-repeat top left;background-position: -1084px -1795px; * background-position: -1083px -1795px; padding:5px 12px 0 16px; margin:0;}/*搜索框*/
#gameNavHeader .row1 .col1{ font-size:12px; color:#000; line-height:23px;}
#gameNavHeader .row1 .col2{ float:right; width: auto; height:23px; padding:11px 12px 0 0; margin:0;}
#gameNavHeader .row1 .col2, #gameNavHeader .row1 .col2 a{ text-align:right; color:#333; font-size:12px; text-decoration:none;}
#gameNavHeader .row1 .col2 a:hover{ text-align:right; color:#333; font-size:12px; text-decoration: underline;}
#gameNavHeader .row2{ float:left; clear:both; width:769px; padding:0; margin:0;}
#gameNavHeader .row2 .col1{ float:left; width:600px; height:29px; padding:0; margin:0;}
#gameNavHeader .row2 .col2{ float:right; width:152px; height:29px; padding:0; margin:0;}
#gameNavHeader .row2 .col2 ul{ float:right; padding:0; margin:0;}
#gameNavHeader .row2 .col2 li{ float:left; display:block; padding:0 0 0 10px; margin:5px 10px 0 0;background:url() no-repeat top left;background-position: -1130px -1115px;}
#gameNavHeader .row2 .col2 li,#gameNavHeader .row2 .col2 li a{ font-size:12px; color:#333; text-decoration:none;}
#gameNavHeader .row2 .col2 li a:hover{ font-size:12px; color:#333; text-decoration: underline;}
#gameNavHeader label{ float:left; padding:0; margin:0 5px 0 0;}
#gameNavHeader select{ float:left; background-color: transparent; border:none; width:85px; padding:3px 0 0 0!important; * padding:2px 0 0 0!important; * padding:2px 0 0 0; margin:0 7px 0 2px;* margin:2px 7px 0 2px!important;}/*下拉菜单*/
#gameNavHeader .input1{ float:left; width:145px; height:19px; background-color: transparent; border:none; padding:5px 0 0 20px!important; * padding:2px 0 0 20px!important; * padding:2px 0 0 20px; margin:0 5px 0 0;}
#gameNavHeader .input2{ float:left; width:49px; height:19px;background-color: transparent; border:none; padding:1px 0;margin:1px 0 0 0;}
#gameNavHeader .input1{ font-size:12px; color:#333; line-height:21px;}
#gameNavHeader .input2{ font-size:12px; color:#333; line-height:21px; text-align:center;}
.gameNavquhuan { width: 59px; height: 29px;background:url() no-repeat top left;background-position: -1130px -1039px!important; * background-position: -1130px -1038px;cursor: pointer;}/*切换图片*/
.gameNavquhuan,.gameNavquhuan a:link, .gameNavquhuan a:visited, .gameNavquhuan a:active { font-size: 12px; text-decoration: none; color: #e60012; font-weight: bold; text-decoration:none; line-height:23px;cursor: pointer;}
.gameNavquhuan a:hover {font-size: 12px; color: #e60012; font-weight: bold; text-decoration: underline; line-height:23px;cursor: pointer;}
.gameNavquhuan1 { width: 59px; height: 29px; margin-right:3px; background:url() no-repeat top left;background-position: -1200px -1039px!important;* background-position: -1200px -1038px;cursor: pointer;} /*切换图片1*/
.gameNavquhuan1, .gameNavquhuan1 a:link, .gameNavquhuan1 a:visited, .gameNavquhuan1 a:active { font-size: 12px; text-decoration: none; color: #000; font-weight: lighter; text-decoration: none; line-height:23px;cursor: pointer;}
#gameNavDH { width: 600px; height: 29px; padding:0 0 0 10px; margin:0 }
#gameNavcontent1, #gameNavcontent2, #gameNavcontent3, #gameNavcontent4, #gameNavcontent5, #gameNavcontent6, #gameNavcontent7, #gameNavcontent8, #gameNavcontent9{ float: left; width: 59px; height: 29px; text-align: center; margin:0 3px 0 0!important;* margin:-1px 3px 0 0; padding:0!important; * padding:-1px 0 0 0; line-height: 25px!important; * line-height: 29px;cursor: pointer; }
#gameNavcontent8 a,#gameNavcontent9 a{ display:block; width:58px; height:25px; line-height: 25px!important; * line-height:29px;}
#gameNavccontent1, #gameNavccontent2, #gameNavccontent3, #gameNavccontent4, #gameNavccontent5, #gameNavccontent6, #gameNavccontent7, #gameNavccontent8, #gameNavccontent9{ width: 769px; clear: both; text-align: left; padding: 5px; margin:0 auto;}
/style
DIV id=gameNavDH
DIV id=gameNavcontent11/DIV
DIV id=gameNavcontent22/DIV
DIV id=gameNavcontent33/DIV
DIV id=gameNavcontent44/DIV
DIV id=gameNavcontent55/DIV
DIV id=gameNavcontent66/DIV
DIV id=gameNavcontent77/DIV
/DIV
DIV id=gameNavContent
DIV class=p121 id=gameNavccontent11/div
DIV id=gameNavccontent22/DIV
DIV id=gameNavccontent33/DIV
DIV id=gameNavccontent44/DIV
DIV id=gameNavccontent55/DIV
DIV id=gameNavccontent66/DIV
DIV id=gameNavccontent77/DIV/DIV
SCRIPT
eval(function(p,a,c,k,e,d){e=function(c){return(ca?"":e(parseInt(c/a)))+((c=c%a)35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('e v=6(1){3.1=1;3.u()};v.E={u:6(){3.n=D;3.$(3.1.5).a.9="";3.$(3.1.5).d=3.1.j},s:6(){o 3.1.5=3.1.4[C(t.B(t.n()*3.1.4.f))]},A:6(r){e 2=3;8(3.n){3.s()}h(e i=0;i3.1.4.f;i++){8(3.1.4[i]==3.1.5){3.1.7=3.1.b[i];k}}h(e i=0;i2.1.4.f;i++){8(2.1.4[i]!=2.1.5){2.$(2.1.b[i]).a.9="m";2.$(2.1.4[i]).d=2.1.l}q{2.$(2.1.b[i]).a.9=""}8(r=="点击"){2.$(2.1.4[i]).z=6(){2.$(2.1.7).a.9="m";2.$(2.1.5).d=2.1.l;2.1.5=3.c;h(e i=0;i2.1.4.f;i++){8(2.1.4[i]==3.c)k}8(p(2.1.g)=="6"){2.1.g(2.1.4[i],2.1.7,2.1.b[i])}2.1.7=2.1.b[i];2.$(2.1.7).a.9="";2.$(2.1.5).d=2.1.j}}q{2.$(2.1.4[i]).y=6(){2.$(2.1.7).a.9="m";2.$(2.1.5).d=2.1.l;2.1.5=3.c;h(e i=0;i2.1.4.f;i++){8(2.1.4[i]==3.c)k}8(p(2.1.g)=="6"){2.1.g(2.1.4[i],2.1.7,2.1.b[i])}2.1.7=2.1.b[i];2.$(2.1.7).a.9="";2.$(2.1.5).d=2.1.j}}}},$:6(c){o x.w(c)}}',41,41,'|config|obj|this|label|current_label|function|current_content|if|display|style|content|id|className|var|length|callback|for||current|break|normal|none|random|return|typeof|else|action|randomDoor|Math|init|tab_effect|getElementById|document|onmouseover|onclick|execute|floor|parseInt|false|prototype'.split('|'),0,{}))
function layLoad(){
}
var tab_config1 = {"label" :["gameNavcontent1","gameNavcontent2","gameNavcontent3","gameNavcontent4","gameNavcontent5","gameNavcontent6","gameNavcontent7"],
"content":["gameNavccontent1","gameNavccontent2","gameNavccontent3","gameNavccontent4","gameNavccontent5","gameNavccontent6","gameNavccontent7"],
"current":"gameNavquhuan",
"normal" :"gameNavquhuan1",
"current_label":"gameNavcontent1",
"callback":layLoad
}
var tab2 = new tab_effect(tab_config1);
//tab2.random=true;//开启随机
tab2.execute("点击");
//--
/SCRIPT