2

我正在创建一个 asp.net 网页，一些自动生成的 CSS 超出了我的样式表。我不确定属性将在哪里正确设置值，或者如何禁用我的 Web 应用程序自动生成的 CSS。这是代码。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FrontEnd.master.cs"     Inherits="pigninja.FrontEnd" %>

<!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 id="Head1" runat="server" >
<title>Title</title>
<link href="../Styles/Styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="pageWrapper">
<div id="header"></div>
<div id="navigation">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
        Width="100%"   StaticItemFormatString="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; {0} &nbsp">
    <Items>
        <asp:MenuItem NavigateUrl="../Default.aspx" Text="Home" Value="Home">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="../About.aspx" Text="About Me" Value="About Me">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="../Programming.aspx" Text="Programming" 
            Value="Programming"></asp:MenuItem>
        <asp:MenuItem NavigateUrl="../Rants.aspx" Text="Rants" Value="Rants">
        </asp:MenuItem>
    </Items>
</asp:Menu></div>
<div id ="content"><asp:ContentPlaceHolder ID="Content" runat="server"> 
</asp:ContentPlaceHolder></div>
<div id="footer"><p>Footer</p></div>
</div>
</form>
</body>
</html>

这是CSS

*
{
font-family: Arial, Sans-Serif;
}

body
{
margin: 0;
background-color:Black;
}

a
{
text-decoration: none;
color: #b30707;
} 

a:hover
{
text-decoration: underline;
}

#header
{
background-image: url(../img/header.jpg);
position:relative;
margin:auto;
height: 250px;
}

#pageWrapper
{
width:844px;
margin: auto;
background-color:#ccc;
}

#navigation
{
width: auto;
text-align:center;
height: 36px;
padding-top: 15px;
padding-left: 17px;
background-color: #9C989A
}

#content
{
border-style:solid;
border-width: 2px;
border-color: #b30707;
padding: 15px;
}

#footer
{
text-align:center;
}

我添加了这一行来规避我的菜单控件没有正确跨越父元素的问题。一旦 CSS 按预期工作，我计划将其删除。

StaticItemFormatString="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; {0} &nbsp"

这是按要求呈现的代码。

<!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 id="Head1"><title>
Title
</title><link href="Styles/Styles.css" rel="Stylesheet" type="text/css" /><style   type="text/css">
/* <![CDATA[ */
#Menu1 { width:100%; }
#Menu1 img.icon { border-style:none;vertical-align:middle; }
#Menu1 img.separator { border-style:none;display:block; }
#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
#Menu1 ul.dynamic { z-index:1; }
#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
#Menu1 a.popout { background-image:url("/WebResource.axd?  d=xjCds24on9XfE0DBajC4vRjqPwEZnPWc2oYtv118cqG5ViUhvTqbbGX-  kFRHBgPTk01twuHMnUgYwxiSOFVm4FdDFd1DRzkQC6dPTjhsTD81&t=634773918900000000");background-  repeat:no-repeat;background-position:right center;padding-right:14px; }
/* ]]> */
</style></head>
<body>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"     value="/wEPDwULLTEwMDUyNjYzMjhkZMqkGL/k2S4bUfDNJETNEEgreeQwj//8qMPH/3Jfp1j8" />
</div>


<script src="/WebResource.axd?d=JhWUzx8WLq0au7xqJj_xdb8v-NEKpWcJ1R4twSIpfaW-Hg2- LRc2Fqrqmb31NCEsThyJFzieaKJwGQI8BjHNp9tN4M8jNjJ1fHS70aQkb681&amp;t=634773918900000000"   type="text/javascript"></script>
 <div id="pageWrapper">
<div id="header"></div>
<div id="navigation"><a href="#Menu1_SkipLink"><img alt="Skip Navigation Links"  src="/WebResource.axd? d=uVlrphLtejMyCQfMUd5MSwr7OFiIQBNYbtiTqDgsAQmI5_6XjhY8AFmAwPz4RAV7D87YEb3m48XzVHtpmam77PhCI6     AVXXVAbALWvpCcB1w1&amp;t=634773918900000000" width="0" height="0" style="border- width:0px;" /></a><div id="Menu1">
<ul class="level1">
    <li><a class="level1"  href="Default.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Home &nbsp</a>   </li><li><a class="level1"  href="About.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  About Me  &nbsp</a></li><li><a class="level1"  href="Programming.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Programming  &nbsp</a></li><li><a class="level1"  href="Rants.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Rants &nbsp</a>   </li>
</ul>
</div><a id="Menu1_SkipLink"></a></div>
<div id ="content">
<p>Content</p>
</div>
 <div id="footer"><p>Footer.</p></div>
</div>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
4

3 回答 3

3

我最终做的是关闭通过属性窗口内联应用的 CSS。更具体地说，我将“IncludeStyleBlock”属性设置为 false。在我这样做之前，我从我的视图源中获取了自动生成的 CSS 并将它放在我的样式表中。然后我能够更好地控制 CSS，但它并没有解决我的问题。为了解决我的问题，我必须像这样在我的 asp:Menu 块中包含一个 CssClass="menuClass" 。

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
        IncludeStyleBlock="False" StaticEnableDefaultPopOutImage="False"    CssClass="menuClass">

然后我依次设置我的 CSS 属性。

.menuClass a.static.highlighted
{
color:Red !important;
text-decoration:underline !important;
}
于 2012-11-09T09:10:29.960 回答
0

ASP.NET 放入的锚标记会自动在菜单上方添加额外的垂直空间。一个锚标记会自动放在菜单上方，这会破坏 Internet Explorer 和 Google Chrome 中的呈现。即使使用带有图像的锚点，它也可以在 Mozilla Firefox 中正常工作。

要解决此问题，请将 SkipLinkText="" 属性添加到您的 ASP.NET 菜单控件，这将解决呈现问题。

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">
于 2013-05-30T16:05:05.477 回答
0

众所周知，默认的 Menu 控件对 CSS 不友好。
您可以通过使用 CSS 友好的菜单控制适配器来解决此问题。

看看asp.net 团队提供的这个Menu 控件适配器。
它将帮助您摆脱在设置 asp.net 菜单样式时需要的大量 CSS hack。

如果您不知道控制适配器，您应该参考演练开始。

于 2012-11-09T07:26:40.863 回答