導航:首頁 > 萬維百科 > html如何設計網站菜單欄

html如何設計網站菜單欄

 發布時間：2020-11-25 05:47:14

1、html5怎麼設計標題欄

&

2、如何用html代碼設計菜單

你首先插入一幅圖片，然後，選中圖片，點擊設計免辦/行為/顯示譚出菜單，就可以了，估計你能夠根據顯示的內容操作成功

3、html這種導航欄怎麼做

主要還是在樣式切換，我有個類似的案例，你可以看看，主要的代碼貼出來了，那就看你的自學能力了
<div class="nav_bg ma_auto">
<ul>
<Li class="on"><a href="#">首頁</a></Li>
<li><a href="online_service_center.htm">在線服務</a></li>
<Li><a href="Structure.htm">組織架構</a></Li>
<li><a href="work_list_center.htm">工作簡報</a></li>
<li><a href="zscq.htm">知識產權相關常識</a></li>
<Li><a href="zlzs.htm">專利知識培訓服務</a></Li>
<li><a href="case.htm">案件審理公開</a></li>
</ul>
</div>
樣式部分：
.nav_bg li {
float: left;
display: inline;
height: 26px;
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 0 20px;
margin: 0 5px;
line-height: 26px;
text-align: center;
border: 1px transparent solid;
border-radius: 5px;
behavior: url(css/PIE.htc);
position: relative;
}
.nav_bg li:hover, .nav_bg li.on {
cursor: pointer;
background: #fff;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
}

4、html+div設計網頁，需要實現導航菜單路徑跟蹤，怎麼做，比如我從主頁進入到產品也在到詳細信息頁，需要有

首頁代碼index.html

//script代碼，參數分別是，本頁地址，本頁名稱，跳轉頁地址
function redirect(u, n, g){
location.href = g + '?url=' + u + '&pn=' + encodeURI(n);
}

//html代碼，這里向下一個頁面傳的是本頁的頁面名稱和地址
<a href="#" onClick="redirect('index.html', '首頁', 'proct.html');">產品</a>

產品頁代碼proct.html

//script代碼
function GetRequest() {
   var url = location.search; //獲取url中"?"符後的字串
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}

var param = GetRequest();

window.onload = function(){
    //一般來說，當前所在頁面不需要加鏈接
    document.getElementById('d').innerHTML = '<a href="'+ param.url +'">'+ decodeURI(param.pn) +'</a> -> 產品頁';
}

//html代碼，導航所在容器
<div id="d"></div>


其他頁面大致相同

5、HTML5怎麼做導航欄

建議使用FF，Safari，舉個例子：
<!doctype html>
<html>
<head>
<title>HTML5+CSS3+JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<style type="text/css">
body {
behavior: url(ie-css3.htc);
}
* {margin:0 auto;padding:0;}
body {font-size:13px;font-family:Arial;}
ul li {list-style:none;}

#menu {
width:982px;
height:35px;
margin-top:20px;display:block;

background: #e3e3e3;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));

-moz-box-shadow: 1px 1px 3px #333;
-webkit-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;

-webkit-border-top-left-radius:4px;;
-webkit-border-top-right-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
text-shadow: 0 1px 0 white;
}
#menu ul {
margin-left:0;
}
#menu ul li {
display:inline;
}
#menu ul li a:link, a:visited {
text-align:center;float:left;width:6.8em;text-decoration:none;padding:7.5px 0.75em;font-size:16px;font-weight:bold;margin-top:0px;border-right:1px solid #ccc;color: #454545;
}
#menu ul li a:hover {
text-decoration:none;
background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc));
background: -moz-linear-gradient(top, #333, #ccc);
-webkit-background-size:0 35px;
color: #ddd;
text-shadow: 0 1px 0 black;

}
.text {
border:1px solid gray;width:150px;height:17px;position:relative;top:8px;left:13px;font-family:Arial;
-webkit-border-top-left-radius:90px;;
-webkit-border-top-right-radius:90px;
-moz-border-radius-topleft:90px;
-moz-border-radius-topright:90px;
-webkit-border-bottom-left-radius:90px;
-webkit-border-bottom-right-radius:90px;
-moz-border-radius-bottomleft:90px;
-moz-border-radius-bottomright:90px;
-o-border-radius:90px;
-khtml-border-radius:90px;
}
</style>
<script language="JavaScript" type="text/javascript">
(function()
{
if(!0)
return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length;
while(i<length)
{
document.createElement_x(e[i++])
}
})();
</script>
</head>
<body>
<menu id="menu"><form action="index.php" method="get">
<ul>
<li><a href="#" title="HomePage">HomePage</a></li>
<li><a href="#" title="Introuce">Introuce</a></li>
<li><a href="#" title="Procts">Procts</a></li>
<li><a href="#" title="My album">My album</a></li>
<li><a href="#" title="Shopping">Shopping</a></li>
<li><a href="#" title="Contact our">Contact our</a></li>
</ul>
<input type="search" class="text" value="search..." /></form>
</menu>
<body>

6、關於css，html的一個問題：如何把菜單欄固定在網頁的頂部？

把菜單欄寫成固定定位 position：fixed left：0 top：0

7、求助網站開發中菜單欄的HTML5視圖製作方法

響應式技術，根據可視窗口的大小顯示出對應的內容，用響應式做網頁，可以直接應用在手機上。不需要二次編寫

8、用HTML做一個帶下拉菜單的導航欄

你可以調整ul的高度，
將高度調至為「我要上傳」這一欄高度一致。然後ul添加overflow:hidden;就行了
滑鼠滑過，高度增加值所有顯示完，就行了

9、用html做一個通用的頁面菜單欄

淘寶的用的應該是框架的，盡量不要用js去添加頁面內容，很占資源的，專放大效果的話屬，把一個頁面都用js輸出，就知道對載入速度的影響了。
可以在一個頁面做出來菜單欄，然後用框架(FRAME)。
我用的是.net，可以用母版頁實現這個功能，html的話，用frame框架做比較好

10、HTML網頁如何設計下拉菜單？不要代碼，要方法拜託各位了 3Q

先定義一個div，設置成relative，然後把東西都寫在裡面。菜單列表用ul吧，li設置成float:left; 下拉菜單設置成absolute。靜態的設置好了，然後用js控制，js里寫個函數showIt(num)，加個形參，用來傳遞是第幾個菜單被點擊。 在第一個li標簽里寫onmouseover=「showIt(0)」，那個0，第二個標簽改成1，以此類推。 當然你還要寫個hideIt()函數，onmouseout="hideIt()" 這個不用加參數，因為你必須把所有的下拉菜單都隱藏一次。 這就是方法，上面看懂了的話可以做個簡單的了。當然如果想要更多功能的話，這里就說不清楚了

與html如何設計網站菜單欄相關的知識