今天给各位分享网页制作导航条代码的知识，其中也会对如何绘制网页导航条进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
- 1、求一段网页中左侧导航条的代码,要求如下:
- 2、用DW怎样制作网页导航条？鼠标经过的时候和鼠标离开两种背景效果，和两种字体颜色
- 3、网页设计导航条
- 4、网页设计 制作导航条 如何制作
- 5、动态网站!显示网页当前位置的那种导航条是怎么做的?
求一段网页中左侧导航条的代码,要求如下:
!--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怎样制作网页导航条？鼠标经过的时候和鼠标离开两种背景效果，和两种字体颜色
可以直接在DW的代码区域输入相应代码即可解决：
背景图片hover 很简单的
#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="计 //a/li
/ul
如果是矩形区域，可以直接用CSS
比如原HTML标签为
a href="#"博客/a
然后CSS部分加上代码 a {background:blue} 然后 a:hover {background:red} 这样可以实现背景色的转换，如果想要变色的区域不是矩形，那就得准备好原图和激活图了，然后也用 a:hover {background:url()}来实现了，很简单。
上面的是一个背景图片
是用js改变样式
div style="" onmouseover=“aa(this);” onmouseout="aaa(this);" 鼠标放上来试试/div
script
function aa(obj)
{
obj.style.background="blue";//你也可以把后面的值换成图片
//obj.style.background="url(图片路径)";
}
function aaa(obj)
{
obj.style.background="red";
}
/script
也可以复制下面代码保存成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无标题文档/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="#"首 页/a/li
lia href="#"我的相册/a/li
lia href="#"照片冲印/a/li
lia href="#"礼品定制/a/li
lia href="#"精彩画廊/a/li
lia href="#"中华空间/a/li
/ul
/body
/html
上面的那个是更换图片的
要更换背景的话在字体所在的单元格写上：onMouseOver="this.bgColor='想改变的颜色'"
td onMouseOver="this.bgColor='想改变的颜色'" onMouseOut="this.bgColor=''原来的颜色"导航文字/td
网页设计导航条
下面的代码，你去看看，不好用再说。
!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无标题文档/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="#"首页/a/li
lia href="#"关于我们/a/li
lia href="#"产品展示/a
div
ul
lia href="#"产品1一/a/li
lia href="#"产品2一/a/li
lia href="#"产品3一/a/li
lia href="#"产品4一/a/li
lia href="#"产品5一/a/li
lia href="#"产品6一/a/li
/ul
/div
/li
lia href="#"联系电话/a
div
ul
lia href="#"产品1一/a/li
lia href="#"产品2一/a/li
lia href="#"产品3一/a/li
lia href="#"产品4一/a/li
lia href="#"产品5一/a/li
lia href="#"产品6一/a/li
/ul
/div
/li
lia href="#"公司介绍/a/li
/ul
/div
/body
/html
网页设计 制作导航条 如何制作
一, 键盘上可以直接输 |
二, 如果是一条虚线的话, 那么是这样做的:
用Fireoworks新建一个1*3PX的图片, 在中间画一个点,然后将其导出,再在DW里建一个单元格,将其背景设为这个图片(注意,让它垂直方向重复,水平方向不重复 -- CSS),大功告成
三,CSS
a href="#" style="border-right:1px solid #000"链接/a
动态网站!显示网页当前位置的那种导航条是怎么做的?
当然是用函数写好的。
给你说一下我的吧，办法有点笨，希望能够抛夸引玉大家分享一下更好的。
?php
$key='about';
$key_text='关于我们';
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的代码：
!--标题始--
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td align="right" width="106"img alt="?=$key_text?标题" src="img/?=$key?_title.jpg"/td
td vAlign="bottom" align="right"
!--显示当前位置=始--
A href="index_cn.php"
img height="19" alt="首页链接" 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"
!--显示当前位置=终--
/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
!--标题终--
关于网页制作导航条代码和如何绘制网页导航条的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
