『壹』 UI設計網頁時，導航欄尺寸規格一般是多少
當前最流行的解析度是1920*1080，在該解析度下，頁面中心區域為1200px以內都可以。在800*600解析度下，導航欄尺寸規格保持在778px以內；在1024*768解析度下，網頁寬度保持在1002px以內。
如果沒有指定的要求，以1920尺寸設計就好（這是目前最普遍的尺寸大小），前端開發人員會自行適配其他的解析度。
(1)前端導航欄擴展閱讀：
UI設計網頁方法
一、呈現更新穎的內容
設計師在進行網頁ui設計的過程中需要注意的是，想要讓自己的網頁看起來更加與眾不同，但也不必過於誇大，可以用一些新鮮的理念和不同的布局來吸引用戶訪問。比如以一種動態的方式，將信息呈現給用戶，以此來贏得用戶更多的關注。
二、增強元素的設計感
相對於普通的網頁ui設計而言，具有較強的設計感的網頁往往會更容易吸引用戶的注意。任何一個具有創意的網站開發設計方案，都會把目光更聚焦在網頁的基本布局和色彩搭配上，而這也意味著網頁上一般存在很多種不同的元素。
三、激勵用戶更多操作
網站開發的設計製作的類型有很多種，面對不同的類型，要有特定的網頁ui設計方案。給用戶提供一個尋找目標的簡易方法，這樣用戶就容易沉浸到頁面中來，同時也增加了用戶操作的幾率。
『貳』 前端寫一個網頁導航欄要多久
快的10分鍾左右
『叄』 關於html公用導航欄
1.這種一般是後台來進行處理的，如果前端進行處理的話可以用嵌套框架iframe;把需要公用導航獨立出來，然後用內聯框架引用就可以了。
<iframesrc=」你的公用路徑.html」width=」100%″height=」30″frameborder=」no」border=」0″marginwidth=」0″marginheight=」0″scrolling=」no」allowtransparency=」yes」></iframe>
『肆』 html導航欄,這種類型的怎麼寫！
這個只是一個圖標字體，一般要結合js點擊或者經過觸發事件。
代碼：
<head>
<metacharset='utf-8'/>
<title>HTML調試</title>
<scripttype="text/javascript"src="js/jquery-1.8.0.min.js"></script>
<scriptsrc='js/zui.min.js'type='text/javascript'charset='utf-8'></script>
<linkrel='stylesheet'type='text/css'href='css/zui.css'/>
<styletype="text/css">
body,
div,
ul,
li{
margin:0;
padding:0;
}
body{
font-family:"微軟雅黑",Arial,Helvetica,sans-serif;
color:#333333;
line-height:25px;
font-size:14px;
}
a:link,
a:visited{
text-decoration:none;
color:#333333;
}
a:hover{
text-decoration:underline;
color:#08A5E0;
text-decoration:none;
}
ul,
ulli{
list-style-type:none;
}
.cl{
zoom:1;
}
.navbg{
height:40px;
width:100%;
background:#08A5E0;
box-shadow:1px1px7px#999;
position:absolute;
z-index:99;
left:0;
}
#navulli{
float:left;
margin-right:1px;
width:100px;
height:40px;
position:relative;
text-align:center;
line-height:40px;
}
#navulli.navhome{
text-align:left;
padding:00px040px;
width:100px;
}
#navullia:link,
#navullia:visited{
color:#FFFFFF;
}
#navulliul{
display:none;
position:absolute;
z-index:10000;
top:38px;
left:-1px;
background:#006D96;
border:#004E6C1pxsolid;
border-bottom:none;
}
#navulliulli{
display:block;
width:98px;
float:none;
margin-right:0px;
height:28px;
position:relative;
line-height:28px;
border-bottom:#004E6C1pxsolid;
font-size:12px;
}
#navulli.navmoon{
background:#006D96;
border:#004E6C1pxsolid;
width:98px;
height:38px;
line-height:38px;
}
#navulli.navmoona{
color:#FFFFFF;
}
#navulli.navhomea:hover{
color:#FCFF00;
}
#navulli.navmoonul{
display:block;
}
#navulli.navmoonula{
display:block;
width:98px;
height:28px;
line-height:28px;
}
#navulli.navmoonula:hover{
background:#000000;
}
</style>
</head>
<body>
<divclass="navbg">
<ulid="navul"class="cl">
<liclass="navhome">
<ahref=""target="_blank">HOME</a>
</li>
<li>
<ahref=""title="Html">Html</a>
<ul>
<li>
<ahref=""title="HTML">HTML</a>
</li>
<li>
<ahref=""title="HTML5">HTML5</a>
</li>
</ul>
</li>
<li>
<ahref=""title="CSS">CSS</a>
<ul>
<li>
<ahref=""title="CSS入門">CSS入門</a>
</li>
<li>
<ahref=""title="CSS工具">CSS工具</a>
</li>
<li>
<ahref=""title="CSS技巧">CSS技巧</a>
</li>
<li>
<ahref=""title="CSS實例">CSS實例</a>
</li>
<li>
<ahref=""title="CSS3">CSS3</a>
</li>
<li>
<ahref=""title="CSShack">CSShack</a>
</li>
<li>
<ahref=""title="CSS2.0手冊">CSS2.0手冊</a>
</li>
</ul>
</li>
<li>
<ahref=""title="網頁特效">網頁特效</a>
<ul>
<li>
<ahref=""title="導航菜單">導航菜單</a>
</li>
<li>
<ahref=""title="表單按鈕">表單按鈕</a>
</li>
<li>
<ahref=""title="表格圖層">表格圖層</a>
</li>
<li>
<ahref=""title="圖片特效">圖片特效</a>
</li>
<li>
<ahref=""title="滾動特效">滾動特效</a>
</li>
<li>
<ahref=""title="文字特效">文字特效</a>
</li>
<li>
<ahref=""title="時間日期">時間日期</a>
</li>
<li>
<ahref=""title="窗口特效">窗口特效</a>
</li>
<li>
<ahref=""title="滑鼠特效">滑鼠特效</a>
</li>
</ul>
</li>
<li>
<ahref=""title="前端資訊">前端資訊</a>
<ul>
<li>
<ahref=""title="用戶體驗">用戶體驗</a>
</li>
<li>
<ahref=""title="前端觀察">前端觀察</a>
</li>
<li>
<ahref=""title="職業生涯">職業生涯</a>
</li>
</ul>
</li>
<li>
<ahref=""title="前端技巧">前端技巧</a>
<ul>
<li>
<ahref=""title="布局技巧">布局技巧</a>
</li>
<li>
<ahref=""title="網頁字體">網頁字體</a>
</li>
<li>
<ahref=""title="flash">flash</a>
</li>
</ul>
</li>
<li>
<ahref=""title="雜七雜八">雜七雜八</a>
<ul>
<li>
<ahref=""title="帝國cms">帝國cms</a>
</li>
<li>
<ahref=""title="電腦技巧">電腦技巧</a>
</li>
<li>
<ahref=""title="隨筆雜談">隨筆雜談</a>
</li>
</ul>
</li>
<li>
<ahref=""title="Javascript">Javascript</a>
<ul>
<li>
<ahref=""title="Jquery">Jquery</a>
</li>
<li>
<ahref=""title="Js學習">Js學習</a>
</li>
<li>
<ahref=""title="Js教程">Js教程</a>
</li>
</ul>
</li>
<li>
<ahref=""title="網站優化">網站優化</a>
<ul>
<li>
<ahref=""title="SEO雜談">SEO雜談</a>
</li>
<li>
<ahref=""title="站長工具">站長工具</a>
</li>
<li>
<ahref=""title="經驗分享">經驗分享</a>
</li>
</ul>
</li>
<listyle="width:50px;">
<ahref=""title="更多"><iclass="iconicon-align-justify"></i></a>
<ul>
<li>
<ahref=""title="SEO雜談">更多1</a>
</li>
<li>
<ahref=""title="更多2">更多2</a>
</li>
<li>
<ahref=""title="更多3">更多3</a>
</li>
</ul>
</li>
</ul>
</div>
<scripttype="text/javascript">
$(window).load(function(){
$(".navbg").capacityFixed();
});
$(function(){
$("#navul>li").not(".navhome").hover(function(){
$(this).addClass("navmoon")
},function(){
$(this).removeClass("navmoon")
})
varmaxwidth=580;
$(".news_textimg").each(function(){
if($(this).width()>maxwidth){
$(this).width(maxwidth);
}
});
});
function$tomato(id){
returndocument.getElementById(id);
}
functionrunCode(obj){
varwinname=window.open('',"_blank",'');
winname.document.open('text/html','replace');
winname.document.writeln(obj.value);
winname.document.close();
}
(function($){
$.fn.capacityFixed=function(options){
varopts=$.extend({},$.fn.capacityFixed.deflunt,options);
varFixedFun=function(element){
vartop=opts.top;
element.css({
"top":top
});
$(window).scroll(function(){
varscrolls=$(this).scrollTop();
if(scrolls>top){
if(window.XMLHttpRequest){
element.css({
position:"fixed",
top:0
});
}else{
element.css({
top:scrolls
});
}
}else{
element.css({
position:"absolute",
top:top
});
}
});
element.find(".close-ico").click(function(event){
element.remove();
event.preventDefault();
})
};
return$(this).each(function(){
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt={
right:0,
top:25
};
})(jQuery);
</script>
</body>
結果：
『伍』 web前端導航條怎麼做
導航條一般用ul li標簽+css樣式來做，具體導航內容根據你的需求來加，一般來說直接加後台欄目的調用碼，這樣方便你後面後台操作
『陸』 求助，網頁前端設計問題，下圖導航欄源碼（HTML、CSS），使用框架的話最好用Bootstrap，不用也行學習一下
顏色質感什麼我就不說了,自己調去
顯示有很多種,點擊顯示的話用JS或者JQuery做動態,$("#[菜單ID]").click(function(){
$("#[菜單下拉框ID]").show();})就行.
如果是滑鼠移上去顯示的話 建議寫成ul和li的list形式.
樣式就這樣寫:
ul:hover ul li{
visible: true;
}
本身的visible設置成false就行.效果是你移動到ul上面時ul下面的li元素會變為可見.
注意position要設置成relative防止錯位,然後display改成block這樣你的li元素會像div一樣顯示出來
『柒』 各位web前端開發的大神們，問一下，僅div+css如何實現，點左邊導航欄，右邊出現內容
正常來講js、jquery都可以實現的
但是要用html 和css來做的話 需要使用到框架
<html>
<framesetcols="25%,50%,25%">
<framesrc="frame_a.htm"/>
<framesrc="frame_b.htm"/>
<framesrc="frame_c.htm"/>
</frameset>
</html>
『捌』 HTML5如何才能讓導航欄固定頂部不動，且！且！且！不遮擋住下面的DIV
HTML5讓導航欄固定頂部不動且不遮擋住下面的DIV方法如下：
1，首先在html中，添加良好的導航內容。
『玖』 web前端入門，導航欄右側放什麼按鈕合適
要看是企業站還是電商網站每個網站不同，設計規劃也不同，這是屬於UI設計師的工作
按鈕的話放什麼按鈕都可以主要還是看要什麼效果
按鈕直接用<buttom></buttom>就可以做
鏈接用<a></a>
『拾』 求一些前端開發的框架，比如說可以簡單操作設計出優秀導航欄的效果（中文最好）
去網站或者網路找吧，一大堆，都是現成的樣式，你只要引用進來就可以了。給你些提示吧，比如蝦米站長，素材中國，模板無憂等，希望能幫助到你。