今天給各位分享網(wǎng)頁(yè)制作導(dǎo)航條代碼的知識(shí)，其中也會(huì)對(duì)如何繪制網(wǎng)頁(yè)導(dǎo)航條進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、求一段網(wǎng)頁(yè)中左側(cè)導(dǎo)航條的代碼,要求如下:
• 2、用DW怎樣制作網(wǎng)頁(yè)導(dǎo)航條？鼠標(biāo)經(jīng)過(guò)的時(shí)候和鼠標(biāo)離開(kāi)兩種背景效果，和兩種字體顏色
• 3、網(wǎng)頁(yè)設(shè)計(jì)導(dǎo)航條
• 4、網(wǎng)頁(yè)設(shè)計(jì) 制作導(dǎo)航條 如何制作
• 5、動(dòng)態(tài)網(wǎng)站!顯示網(wǎng)頁(yè)當(dāng)前位置的那種導(dǎo)航條是怎么做的?

求一段網(wǎng)頁(yè)中左側(cè)導(dǎo)航條的代碼,要求如下:

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

用DW怎樣制作網(wǎng)頁(yè)導(dǎo)航條？鼠標(biāo)經(jīng)過(guò)的時(shí)候和鼠標(biāo)離開(kāi)兩種背景效果，和兩種字體顏色

可以直接在DW的代碼區(qū)域輸入相應(yīng)代碼即可解決：

背景圖片hover 很簡(jiǎn)單的

#globalNavi {

width: 908px;

margin: 0 auto 18px;

height: 42px;

overflow: hidden;

}

#globalNavi li {

float: left;

}

#globalNavi li a {

display: block;

}

#globalNavi li.gnavi01 a {

width: 97px;

background: url(../img/template/globalnavi01_out.jpg) no-repeat;

}

#globalNavi li.gnavi02 a {

width: 158px;

background: url(../img/template/globalnavi02_out.jpg) no-repeat;

}

#globalNavi li.gnavi03 a {

width: 118px;

background: url(../img/template/globalnavi03_out.jpg) no-repeat;

}

#globalNavi li.gnavi04 a {

width: 118px;

background: url(../img/template/globalnavi04_out.jpg) no-repeat;

}

#globalNavi li.gnavi05 a {

width: 128px;

background: url(../img/template/globalnavi05_out.jpg) no-repeat;

}

#globalNavi li.gnavi06 a {

width: 128px;

background: url(../img/template/globalnavi06_out.jpg) no-repeat;

}

#globalNavi li a:hover {

background-color: #FFFFFF;

}

#globalNavi li a:hover img {

visibility: hidden;

}

上面是css樣式，下面是代碼：

ul id="globalNavi"

li class="gnavi01"a href="/"img src="common/img/template/globalnavi01_out.jpg" alt="Top Page" //a/li

li class="gnavi02"a href="/"img src="common/img/template/globalnavi02_out.jpg"alt="30" //a/li

li class="gnavi03"a href="/"img src="common/img/template/globalnavi03_out.jpg" alt="竣" //a/li

li class="gnavi04"a href="/"img src="common/img/template/globalnavi04_out.jpg" alt="原" //a/li

li class="gnavi05"a href="/"img src="common/img/template/globalnavi05_out.jpg" alt="住" //a/li

li class="gnavi06"a href="/"img src="common/img/template/globalnavi06_out.jpg" alt="計(jì) //a/li

/ul

如果是矩形區(qū)域，可以直接用CSS

比如原HTML標(biāo)簽為

a href="#"博客/a

然后CSS部分加上代碼 a {background:blue} 然后 a:hover {background:red} 這樣可以實(shí)現(xiàn)背景色的轉(zhuǎn)換，如果想要變色的區(qū)域不是矩形，那就得準(zhǔn)備好原圖和激活圖了，然后也用 a:hover {background:url()}來(lái)實(shí)現(xiàn)了，很簡(jiǎn)單。

上面的是一個(gè)背景圖片

是用js改變樣式

div style="" onmouseover=“aa(this);” onmouseout="aaa(this);" 鼠標(biāo)放上來(lái)試試/div

script

function aa(obj)

{

obj.style.background="blue";//你也可以把后面的值換成圖片

//obj.style.background="url(圖片路徑)";

}

function aaa(obj)

{

obj.style.background="red";

}

/script

也可以復(fù)制下面代碼保存成html即可：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " "

html xmlns=" "

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title無(wú)標(biāo)題文檔/title

style type="text/css"

!--

img{border:0;}

#nav {height:32px;list-style:none;float:left;}

#nav li{float:left;font-size:14px; line-height:32px;}

#nav li a{color:#FFF;text-decoration:none;display:block;width:78px;height:32px;text-align:center; background-color:#ccc;}

#nav li a:hover{ background-color:#F00;color:#FFF;}

--

/style

/head

body

ul id="nav"

lia href="#"首 頁(yè)/a/li

lia href="#"我的相冊(cè)/a/li

lia href="#"照片沖印/a/li

lia href="#"禮品定制/a/li

lia href="#"精彩畫廊/a/li

lia href="#"中華空間/a/li

/ul

/body

/html

上面的那個(gè)是更換圖片的

要更換背景的話在字體所在的單元格寫上：onMouseOver="this.bgColor='想改變的顏色'"

td onMouseOver="this.bgColor='想改變的顏色'" onMouseOut="this.bgColor=''原來(lái)的顏色"導(dǎo)航文字/td

網(wǎng)頁(yè)設(shè)計(jì)導(dǎo)航條

下面的代碼，你去看看，不好用再說(shuō)。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title無(wú)標(biāo)題文檔/title

style type="text/css"

!--

body {

background-color: #0099FF;

}

#navigation {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

#navigation ul {

margin: 0px;

padding: 0px;

list-style-type: none;

}

#navigation li {

border-bottom-style: none;

border-bottom-color: #ed9f9f;

border-top-style: none;

border-right-style: none;

border-left-style: none;

border-top-color: #ed9f9f;

border-right-color: #ed9f9f;

border-left-color: #ed9f9f;

float: left;

}

#navigation li a {

text-decoration: none;

display: block;

padding-top: 5px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 0.5em;

border-right-width: 1px;

border-left-width: 12px;

border-right-style: solid;

border-left-style: solid;

border-right-color: #711515;

border-left-color: #711515;

border-top-style: none;

border-bottom-style: none;

width: 50px;

text-align: center;

margin: 0px;

}

#navigation li a:link, #navigation li a:visited {

color: #FFFFFF;

background-color: #c11136;

}

#navigation li a:hover {

color: #ffff00;

background-color: #990020;

}

#navigation ul li:hover ul,#navigation ul a:hover ul {

visibility: visible;

}

#navigation ul ul {

visibility: hidden;

}

#navigation ul ul li {

clear: both;

}

#navigation ul ul li a {

border: 1px solid #CCCCCC;

}

#navigation ul ul li a:link, #navigation ul ul li a:visited {

color: #000000;

background-color: #FFCC66;

}

#navigation ul ul li a:hover {

color: #006699;

background-color: #99CC00;

}

.nav {

border: 1px solid #0099CC;

position: absolute;

width: 357px;

left: 112px;

top: 34px;

}

.nav ul {

margin: 0px;

padding: 0px;

list-style-type: none;

font-size: 12px;

}

.nav li {

float: left;

}

.nav li a {

border: 1px solid #FF3333;

display: block;

padding: 5px;

background-color: #FFCC33;

text-decoration: none;

}

--

/style

/head

body

div id="navigation"

ul

lia href="#"首頁(yè)/a/li

lia href="#"關(guān)于我們/a/li

lia href="#"產(chǎn)品展示/a

div

ul

lia href="#"產(chǎn)品1一/a/li

lia href="#"產(chǎn)品2一/a/li

lia href="#"產(chǎn)品3一/a/li

lia href="#"產(chǎn)品4一/a/li

lia href="#"產(chǎn)品5一/a/li

lia href="#"產(chǎn)品6一/a/li

/ul

/div

/li

lia href="#"聯(lián)系電話/a

div

ul

lia href="#"產(chǎn)品1一/a/li

lia href="#"產(chǎn)品2一/a/li

lia href="#"產(chǎn)品3一/a/li

lia href="#"產(chǎn)品4一/a/li

lia href="#"產(chǎn)品5一/a/li

lia href="#"產(chǎn)品6一/a/li

/ul

/div

/li

lia href="#"公司介紹/a/li

/ul

/div

/body

/html

網(wǎng)頁(yè)設(shè)計(jì) 制作導(dǎo)航條 如何制作

一, 鍵盤上可以直接輸 |

二, 如果是一條虛線的話, 那么是這樣做的:

用Fireoworks新建一個(gè)1*3PX的圖片, 在中間畫一個(gè)點(diǎn),然后將其導(dǎo)出,再在DW里建一個(gè)單元格,將其背景設(shè)為這個(gè)圖片(注意,讓它垂直方向重復(fù),水平方向不重復(fù) -- CSS),大功告成

三,CSS

a href="#" style="border-right:1px solid #000"鏈接/a

動(dòng)態(tài)網(wǎng)站!顯示網(wǎng)頁(yè)當(dāng)前位置的那種導(dǎo)航條是怎么做的?

當(dāng)然是用函數(shù)寫好的。

給你說(shuō)一下我的吧，辦法有點(diǎn)笨，希望能夠拋夸引玉大家分享一下更好的。

?php

$key='about';

$key_text='關(guān)于我們';

include('top.php');

?

table width="772" align="center" border="0" cellspacing="0" cellpadding="0"

tr

td align="center"

?php include('where.php')?

/td

/tr

trtd?/td/tr

where.php的代碼：

!--標(biāo)題始--

table width="100%" border="0" cellspacing="0" cellpadding="0"

tr

td align="right" width="106"img alt="?=$key_text?標(biāo)題" src="img/?=$key?_title.jpg"/td

td vAlign="bottom" align="right"

!--顯示當(dāng)前位置=始--

A href="index_cn.php"

img height="19" alt="首頁(yè)鏈接" src="img/indexLink.gif" width="30" align="absMiddle" border="0"/A

?

span class="whereFont"/span

?A class="whereLink" href="?=$key?.php"?=$key_text?/A

span class="whereFont" id="key_text_makeup"

!--顯示當(dāng)前位置=終--

/td

/tr

tr

td align="right" height="6"/td

td/td

/tr

tr

td align="right" bgColor="#006600" height="4"/td

td bgColor="#cccccc"/td

/tr

/table

!--標(biāo)題終--

關(guān)于網(wǎng)頁(yè)制作導(dǎo)航條代碼和如何繪制網(wǎng)頁(yè)導(dǎo)航條的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。