导航:首页 > 万维百科 > 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如何设计网站菜单栏相关的知识