导航:首页 > 万维百科 > 网页菜单栏设计

网页菜单栏设计

发布时间: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可以去掉那些小圆点,并用背景图片的形式替换以我们制作好的图标:

与网页菜单栏设计相关的知识