Question

我正在使用Visual Studio 2013和asp.net，我正在尝试学习如何编写基本的网站。 Unfortunatley我很难将外部css样式表中包含的样式属性应用于asp.net应用程序母版页上的<a>元素。我很欣赏这个问题，但我似乎无法让任何解决方案适合我。

我的应用程序的一些文件结构是;

- MyApplication
    -Content
        Site.css
    -Images
        nav_bgrnd.gif
        nav_divider.gif

我的母版页头部分中有以下“link”元素;

<head runat="server">

<link rel="stylesheet" type="text/css" href="~/content/Site.css" runat="server"/>

</head>

我在母版页的html主体中有以下菜单项;

 <nav id="navformenu" style="width:910px; height:32px; position: relative; top:-5px; background:none;" >
        <ul id="menu" class="menu">
            <li class="menuli" >
                <a id="about" runat="server" class="menulia"  href="~/Home"  >Home</a>
            </li>
            <li  class="menuli">
                <a id="about" runat="server" class="menulia"  href="~/About"  >About</a>
            </li>
            <li  class="menuli">
                <a id="contact" runat="server" class="menulia" href="~/Contact">Contact</a>
            </li>
            <li  class="menuli">
                <a id="mynewpage" runat="server" class="menulia" href="~/WebForm1" >MyNewPage</a>
            </li>              
        </ul>
    </nav>

最后，Site.css看起来像;

.menu
{
    width:910px; 
    background: #fff url(/Images/nav_bgrnd.gif) top repeat-x;
    height:32px; 
    position:relative; 
    z-index:1000;
}

.menuli
{
    margin:0 2px 0 -3px; 
    font-size:11px; 
    line-height:21px; 
    padding:0 16px 0 0; 
    display:inline; 
    height:32px; 
    display:block;
    float:left;    
}

.menulia
{     
   background: transparent url(/images/nav_divider.gif) left 9px no-repeat;   
   font-family:serif;
   font-weight:normal;
   padding: 6px 0 10px 15px; 
   color:#010304; 
   font-size:18px;
   display:block; 
   height: 41px; 

}

主页正确引用了css文件，因为如果我更改了字体大小，例如在.menulia类中，那么这将反映在visual studio设计器和firefox的Default.aspx网页中。但图像没有显示出来。相比之下，当我使用style =“LOTS OF CODE”将所有css样式代码直接放在html代码中时，就会找到图像。

非常感谢任何帮助。

Answer 1

您还需要更改图片的路径：您有

/Images/nav_bgrnd.gif

但你需要做一个setpback来搜索正确的文件夹，所以为此改变它

../图像/ nav_bgrnd.gif

您正在设置与其他元素相关的路径而不是CSS，您可以查看更多here和here

Answer 2

您需要设置如下所示的完整路径：

(MyApplication/Images/nav_bgrnd.gif)

我平常的asp -VS我总是这样：

assets / images / image.jpg并且永远不会有问题。

在ASP.NET中使用外部CSS文件显示背景图像的问题

2 个答案: