‘壹’ 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>
‘拾’ 求一些前端开发的框架，比如说可以简单操作设计出优秀导航栏的效果（中文最好）
去网站或者网络找吧，一大堆，都是现成的样式，你只要引用进来就可以了。给你些提示吧，比如虾米站长，素材中国，模板无忧等，希望能帮助到你。