如何让ASP.NET(c#)中的menu控件做的像苹果官网一样，当鼠标经过菜单栏的时候会有一块变黑
如何让ASP.NET(c#)中的menu控件做的像苹果官网一样，当鼠标经过菜单栏的时候会有一块变黑http://www.apple.com.cn/ipad/头上的菜单栏很...
如何让ASP.NET(c#)中的menu控件做的像苹果官网一样，当鼠标经过菜单栏的时候会有一块变黑 http://www.apple.com.cn/ipad/ 头上的菜单栏很好很强大...。不知怎么用
展开
4个回答
展开全部
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Top.aspx.cs" Inherits="Top" %>
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
body{
font-family: Verdana, Helvetica, sans-serif;
margin: 5px;
text-align: center;
font-size: 12px;
background-image: url(images/top.jpg);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 30px;
background-position: center top;
scroll="no";
}
#nav{
height: 44px;
width:640px;
background: none;
margin: 0 auto;;
align="center";
text-decoration: center;
valign="middle";
}
.vline{
background: #999;
}
#nav ul{
margin:0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
font-family: Arial;
font-weight: bold;
font-size: 15px;
color: #FFF;
vertical-align: middle;
}
#nav li a{
display: block;
width: 120px;
line-height: 20px;
color: #000;
text-decoration: none;
border-top-style: none;
}
#nav li a:hover{
color: #FFF;
border-top-style: none;
border-bottom-style: none;
}
#nav a:link,#nav a:visited{display:block;}
#nav a:hover,#nav a:active{display:block;text-decoration:none;color:#FFF;font-weight:700;}
</style>
</head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
function startRequest()
{
// $.ajax({
// type:"post",
//url:"Top.aspx/ThreadEmail",
// contentType:"application/json",
// dataType:"json",
//success:function(data){
// }
// });
}
// $(document).ready(function() {
// var timer = setInterval("startRequest();",10000);
// });
</script>
<script type="text/javascript">
$(function(){
$(document.body).css("text-align","center");
});
</script>
<%--style="background-image:url(images/top.jpg)"--%>
<body style="color: #9966cc; font-style: normal; font-variant: normal"><div id="nav"><ul>
<li class="n01"><a href="Chart1/Chart2.aspx" target="frmDrawing" style="text-indent: 10pt">Live<br /><span id="span1" style="font-size: 13px;font-weight: normal;">[Meter View]</span></a></li><li class="vline"></li>
<li class="n02"><a href="Chart1/Chatr1.aspx" target="frmDrawing">Live<br /><span id="span2" style="font-size: 13px;font-weight: normal;">[Chart View]</span></a></li><li class="vline"></li>
<li class="n03"><a href="chartRerort/ReportModules/Line List.aspx" target="frmDrawing">History<br /><span id="span3" style="font-size: 13px;font-weight: normal;">[Chart View]</span></a></li><li class="vline"></li>
<li class="n04"><a href="chartRerort/ReportModules/Data List.aspx" target="frmDrawing">History<br /><span id="span4" style="font-size: 13px;font-weight: normal;">[List View]</span></a></li><li class="vline"></li>
<li class="n05"><a href="chartRerort/ReportModules/Alert History.aspx" target="frmDrawing">History<br /><span id="span5" style="font-size: 13px;font-weight: normal;">[Alert View]</span></a></li><li class="vline"></li>
<%--<li class="n06"><a href="Email/EmailSetup.aspx" target="frmDrawing" style="width: 152px; height: 41px; text-align: center;">Email<br /><span id="span6" style="font-size: 13px;font-weight: normal;">[Setup Server List]</span></a></li><li class="vline"></li>--%>
</ul></div>
</body>
</html>
这个是我现在项目上用到的，给你参考
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
body{
font-family: Verdana, Helvetica, sans-serif;
margin: 5px;
text-align: center;
font-size: 12px;
background-image: url(images/top.jpg);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 30px;
background-position: center top;
scroll="no";
}
#nav{
height: 44px;
width:640px;
background: none;
margin: 0 auto;;
align="center";
text-decoration: center;
valign="middle";
}
.vline{
background: #999;
}
#nav ul{
margin:0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
font-family: Arial;
font-weight: bold;
font-size: 15px;
color: #FFF;
vertical-align: middle;
}
#nav li a{
display: block;
width: 120px;
line-height: 20px;
color: #000;
text-decoration: none;
border-top-style: none;
}
#nav li a:hover{
color: #FFF;
border-top-style: none;
border-bottom-style: none;
}
#nav a:link,#nav a:visited{display:block;}
#nav a:hover,#nav a:active{display:block;text-decoration:none;color:#FFF;font-weight:700;}
</style>
</head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
function startRequest()
{
// $.ajax({
// type:"post",
//url:"Top.aspx/ThreadEmail",
// contentType:"application/json",
// dataType:"json",
//success:function(data){
// }
// });
}
// $(document).ready(function() {
// var timer = setInterval("startRequest();",10000);
// });
</script>
<script type="text/javascript">
$(function(){
$(document.body).css("text-align","center");
});
</script>
<%--style="background-image:url(images/top.jpg)"--%>
<body style="color: #9966cc; font-style: normal; font-variant: normal"><div id="nav"><ul>
<li class="n01"><a href="Chart1/Chart2.aspx" target="frmDrawing" style="text-indent: 10pt">Live<br /><span id="span1" style="font-size: 13px;font-weight: normal;">[Meter View]</span></a></li><li class="vline"></li>
<li class="n02"><a href="Chart1/Chatr1.aspx" target="frmDrawing">Live<br /><span id="span2" style="font-size: 13px;font-weight: normal;">[Chart View]</span></a></li><li class="vline"></li>
<li class="n03"><a href="chartRerort/ReportModules/Line List.aspx" target="frmDrawing">History<br /><span id="span3" style="font-size: 13px;font-weight: normal;">[Chart View]</span></a></li><li class="vline"></li>
<li class="n04"><a href="chartRerort/ReportModules/Data List.aspx" target="frmDrawing">History<br /><span id="span4" style="font-size: 13px;font-weight: normal;">[List View]</span></a></li><li class="vline"></li>
<li class="n05"><a href="chartRerort/ReportModules/Alert History.aspx" target="frmDrawing">History<br /><span id="span5" style="font-size: 13px;font-weight: normal;">[Alert View]</span></a></li><li class="vline"></li>
<%--<li class="n06"><a href="Email/EmailSetup.aspx" target="frmDrawing" style="width: 152px; height: 41px; text-align: center;">Email<br /><span id="span6" style="font-size: 13px;font-weight: normal;">[Setup Server List]</span></a></li><li class="vline"></li>--%>
</ul></div>
</body>
</html>
这个是我现在项目上用到的，给你参考
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个是css设置的。 很简单的 一般网站导航都有的吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css设置 有机会还是参考魅族的官网
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用javaScript写的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
