網(wǎng)頁制作導(dǎo)航條代碼（如何繪制網(wǎng)頁導(dǎo)航條）
今天給各位分享網(wǎng)頁制作導(dǎo)航條代碼的知識(shí)，其中也會(huì)對(duì)如何繪制網(wǎng)頁導(dǎo)航條進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！
本文目錄一覽：
- 1、求一段網(wǎng)頁中左側(cè)導(dǎo)航條的代碼,要求如下:
- 2、用DW怎樣制作網(wǎng)頁導(dǎo)航條？鼠標(biāo)經(jīng)過的時(shí)候和鼠標(biāo)離開兩種背景效果，和兩種字體顏色
- 3、網(wǎng)頁設(shè)計(jì)導(dǎo)航條
- 4、網(wǎng)頁設(shè)計(jì) 制作導(dǎo)航條 如何制作
- 5、動(dòng)態(tài)網(wǎng)站!顯示網(wǎng)頁當(dāng)前位置的那種導(dǎo)航條是怎么做的?
求一段網(wǎng)頁中左側(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)頁導(dǎo)航條？鼠標(biāo)經(jīng)過的時(shí)候和鼠標(biāo)離開兩種背景效果，和兩種字體顏色
可以直接在DW的代碼區(qū)域輸入相應(yīng)代碼即可解決：
背景圖片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="計(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()}來實(shí)現(xiàn)了，很簡單。
上面的是一個(gè)背景圖片
是用js改變樣式
div style="" onmouseover=“aa(this);” onmouseout="aaa(this);" 鼠標(biāo)放上來試試/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無標(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="#"首 頁/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=''原來的顏色"導(dǎo)航文字/td
網(wǎng)頁設(shè)計(jì)導(dǎo)航條
下面的代碼，你去看看，不好用再說。
!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無標(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="#"首頁/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)頁設(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)頁當(dāng)前位置的那種導(dǎo)航條是怎么做的?
當(dāng)然是用函數(shù)寫好的。
給你說一下我的吧，辦法有點(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="首頁鏈接" 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)頁制作導(dǎo)航條代碼和如何繪制網(wǎng)頁導(dǎo)航條的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
