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

網頁菜單欄設計

發布時間:2020-08-22 12:28:00

1、製作網頁菜單欄

給a設置float:left

2、網頁設計問題:如何製作下拉菜單式導航欄?

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

<!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">
*{ margin:0; padding:0;}
body{ font:14px "宋體"; color:#333;}
#nav{ width:800px; height:30px; margin:50px auto; background:#ccc; line-height:30px; }
#nav li{ list-style:none; float:left; font-weight:bold; vertical-align:middle;}
#nav li a{ display:block; width:100%; text-align:center; color:#000; text-decoration:none;}
#nav li a:hover{ color:#fff; background:#f00; text-decoration:none;}
#nav li ul{ display:none; position:absolute; background:#999; line-height:25px;}
#nav li.show ul{ display:block;}
#nav li.show ul li{ float:none; font-size:12px;}
#nav li.show ul li a{ text-align:left; padding-left:10%; width:90%;}
#nav li.show ul ul{ display:none;}
#nav li li.show ul{ display:block;}
</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>

3、怎樣顯示網頁的菜單欄

所有的菜單欄都沒有了, 按F11能找回來

如果還有一排菜單,那就在這排菜單上點右鍵,在標准按鈕和地址欄上打對號! 或者,電擊「工具」-查看-工具欄,在標准按鈕和地址欄上點右鍵!

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

要實現這個功能其實非常簡單,下面的思路希望對你有用。步驟如下:
一般WEB開發把頁面分成3個模塊:header.tpl content.tpl footer.tpl。head和footer一般都是固定不變的,唯一變化的部分是content。你說的菜單應該是header部分的導航部分。例如主頁的代碼可以這樣寫:
<html>
<head></head>
<body>
{include file="head.tpl"} <!-- 導航部分 -->

{include file="content.tpl"} <!-- 變化內容 -->

{include file="footer.tpl"} <!-- 版權內容 -->

</body>

</html>

5、左側頁面菜單欄樣式設計

俺做過類似的功能, 左邊固定一個treeview,右邊放一個容器控制項, 點擊左邊的treeview節點的時候根據節點的不同,用反射機制創建一個你要的控制項(就是右邊的那一部分,你事先已經做成用戶控制項),然後調用 右邊容器的Controls.Add方法,把你剛才的創建那個控制項放進去並顯示出來就OK了。

6、網站設計時需要考慮各瀏覽器菜單欄所佔的高度嗎?

肯定 不用考慮,瀏覽器菜單欄!

頁面高度 不用考慮 ,因為有滾動條 ,頁面可以無限長度! 

只需要定好寬度 便可以, 參考: 可以去主流網站例如 某寶 ,某東,某博 等門戶網站 !

利用開發者工具F12 查看頁面最大元素寬度!

您是 做平面設計的吧?? 

如果 只顯示一屏幕! 你的設計搞 就先按照你的電腦解析度高度 設計!因為 無論你怎麼設計 ,用戶在瀏覽網頁的時候窗口大小 是未知的!

後期 前端 會利用 javascript語言監聽瀏覽器寬高 ,自適應網頁內容! 

也可以用css 設置 html,body{ width:100%; height:100%; }

然後內容 用百分比 布局,或用媒體查詢 @media 控制瀏覽器頁面的內容

javascript監聽瀏覽器 寬高 代碼:

window.onresize=function(){
var curheight=document.documentElement.clientHeight||document.body.clientHeight;
var curwidth=document.documentElement.clientWidth||document.body.clientWidth;
console.log(curheight,curwidth)
}

7、在設計用div+css設計網頁時 菜單菜單,欄之間的空隙怎麼都不平均 怎麼來實現

<style>
*{margin:0;padding: 0;}
.nav{ background:#000; color:#fff; height:30px; line-height:30px;}
.nav li{ float:left;}
.nav li a{ display:block; padding:0 15px; color:#fff; text-decoration:none;}
.nav li a:hover{ background:#fff; color:#000;}
</style>
<div class="nav">
<ul>
<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><a href="#">導航欄目</a></li>
<li><a href="#">導航欄目</a></li>
<li><a href="#">導航欄目</a></li>
<li><a href="#">導航欄目</a></li>
</ul>
</div>

你好,做導航建議用li來做.如果文字都是一樣多的可以固定寬度 不一樣的直接用 padding屬性實現就好了  如果用margin的話容易不兼容瀏覽器

上現代碼有詳細說明 你看一下 就明白怎麼回事了

希望可以幫到你、

有不明白的可以聯系我哦~~

望採納  謝謝~~

8、網頁導航欄的設計方式有哪些

導航欄的設計方式有很多種,通過專業的PS設計軟體,可以結合自己的靈感設計,網上有很多可以做為參考或欣賞。

9、網頁導航菜單欄製作

導航菜單的實現

首先定義導航外圍容器的樣式:

#left {
width: 178px;
}

現在外圍容器我們只要簡單版的定義其寬度,並權賦予left的id名。在left容器中,我們添加一個名為navcontainer的子容器來放置導航菜單。實現導航的標簽推薦使用無序列表ul,通過CSS我們可以改變其外觀和形式。HTML結構如下:

< div id="navcontainer">
< ul>
< li>< a href="#">Home< /a>< /li>
< li>< a href="#">About me< /a>< /li>
< li>< a href="#">ximicc< /a>< /li>
< li>< a href="#">Articles< /a>< /li>
< li>< a href="#">Photo roll< /a>< /li>
補充
< /ul>
< /div>
ul和li標簽構建了一個簡單的項目列表,其項目符號默認為小圓點,這是我們不需要的。利用CSS可以去掉那些小圓點,並用背景圖片的形式替換以我們製作好的圖標:

與網頁菜單欄設計相關的知識