模拟导航条代码（模拟导航怎么使用）

本篇文章给大家谈谈模拟导航条代码，以及模拟导航怎么使用对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、用html制作导航条按钮的代码
• 2、谁能给我做个DIV+CSS的简单导航条代码
• 3、求大神用HTML5和CSS做出这个导航条，求源代码，急求大神帮忙
• 4、求一段网页中左侧导航条的代码,要求如下:

用html制作导航条按钮的代码

style type="text/css"

#daohang{ width:900px;}

#daohang ul{ list-style:none;}

#daohang ul li{ width:100px; display:block; background:#999999; float:left; text-align:center}

#daohang ul li:hover{}

#daohang ul li a{text-decoration:none; display:block;}

#daohang ul li a:hover{ background:#FF0000; color:#000000;text-decoration:none}

/style

div id="daohang"

ul

lia href=""菜单一/a/li

lia href=""菜单二/a/li

lia href=""菜单三/a/li

lia href=""菜单四/a/li

lia href=""菜单五/a/li

lia href=""菜单六/a/li

/ul

/div

看看行不行

谁能给我做个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  

求大神用HTML5和CSS做出这个导航条，求源代码，急求大神帮忙

看看合不合你用

!DOCTYPE html

html

    head

        meta charset="UTF-8"

        title/title

    /head

    style type="text/css"

        * {margin: 0;overflow: hidden;}

        i,em,strong{font-style: normal;}

        .bar{border-radius: 10px;width: 450px;box-sizing: ;}

        .sndli em{display: block;float: right;height: 30px;border-right: 1px dashed #666;margin: 5px 0 0 0;}

        a{text-decoration: none;height: 40px;width: 150px;line-height: 40px;color: #000000;display: block;background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8))}

        ul,li{margin: 0;padding: 0;}

        .outlili{list-style: none;float: left;box-sizing: border-box;text-align: center;position: relative;}

        .inli li{list-style: none;box-sizing: border-box;text-align: center;background:#DCDCDC;}

        ul.inli{display: none;}

        .inli0li{float: left;width: 33%;}

        .inli0li:hover{background: #AAA;}

        ul.outlili.sndli:hoverul{display: block;}

    /style

    body

    div class="bar"

        ul class="outli"

            li class="sndli"

                a href="javascript:void(0)"1em/em/a

                ul class="inli"

                    li

                        ul class="inli0"

                            li1.1/li

                            li1.12/li

                            li1.13/li

                        /ul

                    /li

                    li

                        ul class="inli0"

                            li1.21/li

                            li1.22/li

                            li1.23/li

                        /ul

                    /li

                    li

                        ul class="inli0"

                            li1.31/li

                            li1.32/li

                            li1.33/li

                        /ul

                    /li

                /ul

            /li

            li class="sndli"

                a href="javascript:void(0)"2em/em/a

                ul class="inli"

                    li

                        ul class="inli0"

                            li2.1/li

                            li2.12/li

                            li2.13/li

                        /ul

                    /li

                    li

                        ul class="inli0"

                            li2.21/li

                            li2.22/li

                            li2.23/li

                        /ul

                    /li

                    li

                        ul class="inli0"

                            li2.31/li

                            li2.32/li

                            li2.33/li

                        /ul

                    /li

                /ul

            /li

            li class="sndli"

                a href="javascript:void(0)"3/a

                ul class="inli"

                    li

                        ul class="inli0"

                            li3.1/li

                            li3.12/li

                            li3.13/li

                        /ul

                    /li

                    li

                        ul class="inli0"

                            li3.21/li

                            li3.22/li

                            li3.23/li

                        /ul

                    /li

                    li

                        ul class="inli0"

                            li3.31/li

                            li3.32/li

                            li3.33/li

                        /ul

                    /li

                /ul

            /li

        /ul

    /div

    /body

/html

求一段网页中左侧导航条的代码,要求如下:

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

模拟导航条代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于模拟导航怎么使用、模拟导航条代码的信息别忘了在本站进行查找喔。