導航:首頁 > 萬維百科 > 網頁設計二級導航條

網頁設計二級導航條

 發布時間：2020-10-14 22:44:42

1、網頁設計 製作導航條 如何製作

一, 鍵盤上可以直接輸 |
二, 如果是一條虛線的話, 那麼是這樣做的:
用Fireoworks新建一個1*3PX的圖片, 在中間畫一個點,然後將其導出,再在DW里建一個單元格,將其背景設為這個圖片(注意,讓它垂直方向重復,水平方向不重復 -- CSS),大功告成
三,CSS
<a href="#" style="border-right:1px solid #000">鏈接</a>

2、網頁設計導航條

下面的代碼，你去看看，不好用再說。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">產品展示</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">聯系電話</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介紹</a></li>
</ul>
</div>

</body>
</html>

3、網頁製作中，導航條通常包括幾種狀態。分別是什麼

1.滑鼠經過
2.滑鼠按下
3.滑鼠松開
4.滑鼠離開

4、網頁設計`:導航條」存在幾種狀態，分別是什麼？

滑鼠經過

滑鼠按下

滑鼠松開

滑鼠離開

5、用CSS樣式製作的網頁二級導航！

<style> body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } </style> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首頁 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首頁</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社區圈子 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首頁</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的簡訊 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">賬戶管理 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首頁</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> </div> </li> </ul> </div>

採納哦

6、dw網頁二級菜單代碼怎麼做！很著急把它放在一級導航底下！

方法和詳細的操作步驟如下：

1、第一步，打開dw軟體並創建一個新文件，見下圖，轉到下面的步驟。

2、第二步，執行完上面的操作之後，單擊「常用」選項，選擇「布局」按鈕，然後繪制一個圖層，見下圖，轉到下面的步驟。

3、第三步，執行完上面的操作之後，再次單擊該層並繪制另一個，看到第一層是layer1，第二層是layer2，見下圖，轉到下面的步驟。

4、第四步，執行完上面的操作之後，將游標放在layer1上，然後單擊「插入表格」，建立一個具有一行三列且寬度為288的表，見下圖，轉到下面的步驟。

5、第五步，執行完上面的操作之後，在表格中輸入百度經驗，百度知道，百度文庫，可以在屬性欄中設置以下屬性，見下圖，轉到下面的步驟。

6、第六步，執行完上面的操作之後，在第2層中輸入經驗首頁，個人中心，小測首頁，幫幫首頁，然後設置以下屬性，見下圖。這樣，就解決了這個問題了。

7、如何製作網頁首頁導航菜單顯示二級菜單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.sever{ margin-top:4px;}
.sever_menu{ width:213px; background:#99ABB9;}
.sever_menu a{ display:block; }
.sever_menu img{ *margin-bottom:-2px;}

.help_menu,.help_menu_main{ line-height:25px; }
.help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}
.help_menu a{ background:url(../images/help_arr.jpg) no-repeat 43px center;}
#sever_left .help_menu:hover a{ color:#fff;}
.help_menu .hover{ background:url(../images/help_hover_arr.jpg) no-repeat 43px center; color:#FFFFFF;}
.help_menu_main ul{ text-indent:63px;}
.help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}
.help_menu_main ul li a{ color:#fff;}

</style>
<script>
// JavaScript Document

function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>

<body>
<div class="sever">
<div class="sever_menu L" id="sever_left">
<img src="images/sever_help.jpg" />
<div class="help_menu"><a id="help1" onclick="setTab('help',1,9)" class="hover">新手上路</a></div>
<div id="con_help_1" class="help_menu_main">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help2" onclick="setTab('help',2,9)">如何銷售</a></div>
<div id="con_help_2" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help3" onclick="setTab('help',3,9)">如何采購</a></div>
<div id="con_help_3" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help4" onclick="setTab('help',4,9)">交易安全</a></div>
<div id="con_help_4" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help5" onclick="setTab('help',5,9)">操作指南</a></div>
<div id="con_help_5" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服務</a></div>
<div id="con_help_6" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help7" onclick="setTab('help',7,9)">商業資訊</a></div>
<div id="con_help_7" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help8" onclick="setTab('help',8,9)">展會幫助</a></div>
<div id="con_help_8" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help9" onclick="setTab('help',9,9)">廣告幫助</a></div>
<div id="con_help_9" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>

</div>

</div>
</body>
</html>

這個拿去參考一下吧~~

8、網頁設計導航是怎麼做的

1、打開Deamweaver8，新建一網頁文件。接著輸入以下導航菜單的內容：

<html xmlns="網址">

<head>

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

<title>導航欄示例</title>

</head>

<body>

<ul id="navigation">

<li></li>

<li><a href="#">首  頁</a></li>

<li><a href="#">我的博客</a></li>

<li><a href="#">互動交流</a></li>

<li><a href="#">開心一刻</a></li>

<li><a href="#">懸 賞 令</a></li>

<li></li>

</ul>

</body>

</html>

2、此時對應效果如圖：

3、接下來准備相關的導航按鈕圖片（可以事先利用PS製作好）。

4、然後將以下CSS代碼加入到<head></head>之間：

<style type="text/css">

body {text-align:center;}

#navigation

{ list-style-type:none; height:auto;}

#navigation li { width:154px; height:60px; text-align:center;

float:left; padding-top:18px;font-size:20px; font-family:"微軟雅黑", "宋體", "隸書";

background-image:url(images/noactive.jpg);}

a {width:154px; height:72px;}

a:link { text-decoration:none; color:#FFFF00;}

a:visited { text-decoration:none; color:#FFFF00; }

#navigation li:hover { color:#CC0000; text-decoration:underline;

background-image:url(images/active.jpg);}

a:hover{ color:#CC0033;}

#left {background-image:url(images/left.jpg); width:22px;}

</style>

5、在加入CSS代碼之間，網頁此時的效果如圖：

9、網頁設計 導航欄問題

這段代碼比較經典的下拉菜單，不過沒有美化，自己要美化的話，對列的項a a:hover的屬性進行定義即可，比如定義一個好的背景等。

<!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
#nav
#nav li
#nav li a
#nav li a:hover
#nav li ul
#nav li.show ul
#nav li.show ul li
#nav li.show ul li a
#nav li.show ul ul
#nav li li.show ul
</style>
<script type="text/javascript">
function getCss(elem,property){
if(elem.style[property]){
return elem.style[property];
}
else if(elem.currentStyle){
return elem.currentStyle[property];
}
else if(document.defaultView && document.defaultView.getComputedStyle){
property = property.replace(/([A-Z])/g,'-$1').toLowerCase();
var s = document.defaultView.getComputedStyle(elem,'');
return s&&s.getPropertyValue(property);
}
else{
return null;
}
}
window.onload = function() {
var obj = document.getElementById("nav");
var lis = obj.getElementsByTagName("li");
var arr = new Array();
var uls = obj.getElementsByTagName("ul")[0];
for(var i=0; i<lis.length; i++){
if(lis[i].className.indexOf("firstLevel")>=0){
arr.push(lis[i]);
}
}
for(var i=0; i<lis.length; i++){
lis[i].style.width = obj.offsetWidth/arr.length - 1 + "px";
if(lis[i].className.indexOf("thirdLevel")>=0){
lis[i].parentNode.style.marginLeft = obj.offsetWidth/arr.length - 1 + "px";
lis[i].parentNode.style.marginTop = -parseInt(getCss(uls,"lineHeight")) + "px";
}
lis[i].onmouseover=function(){
this.className+=(this.className.length>0?" ":"") + "show";
}
lis[i].onmouseout=function(){
this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
}
}
}

</script>
</head>

<body>
<ul id="nav">
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>

</li>
<li>
<a href="#">二級欄目</a>

</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</body>
</html>
網頁設計 導航欄問題

10、什麼是網頁設計導航條

上面有各個欄目，例如百度，新聞，網頁，知道，這一橫向就是導航條，放的位置比較明顯，導向的作用！

與網頁設計二級導航條相關的知識