logo标签列表

ASP.NET页面未加载CSS样式

c#asp.netcssvisual-studio-2010
16
这是一个使用VS 2010、C#和ASP.NET创建的简单网站。该项目的目录结构如下图所示：

enter image description here

起始页面为 Default.aspx，可以正常加载。但当我从默认页面打开Interface/SystemAdminLogin.aspx页面时，它没有任何CSS样式。我已经在Master Page中导入了CSS样式表。以下是我在两个.aspx文件中引用MasterPage文件的方式： Default.aspx:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

SystemAdminLogin.aspx:

：
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SystemAdminLogin.aspx.cs" Inherits="_Default" %>

我认为我的代码没有问题，但是为什么界面文件夹中的页面没有加载CSS样式？请帮忙。

这里是主页代码，我在这里导入CSS文件：

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Facial Recognition Bank System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>

以下是CSS文件代码的一部分：

body {
margin: 0;
padding: 0;
background: #fff url(../images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
2
请粘贴主页文件的部分，其中包含CSS链接。 - Marek Musielak
你可能会发现使用ASP.Net主题更容易 - 这将为您处理所有这些问题。请参阅http://stackoverflow.com/a/8564035/1073107或MSDN页面http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx。 - dash
@AshwinSingh 不，没有使用IIS。 - Azeem
2
@Azeem 尝试在不使用缓存数据的情况下加载页面，按下CTRL+F5。 - antonio
5个回答
30

你的母版页中包含的样式表使用相对路径。

使用runat=server指定你的样式表链接，并在前面加上虚拟网络根路径（~）：

<link href="~/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

或者：

<link href="/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

请注意，第一种选项是建议使用的。当您在虚拟目录中发布站点时，第二种选项将无法使用。

在最后的评论之后...

CSS中的图像URL也应该被更新，以避免使用相对路径或进行任何路径遍历（../）。

background: #fff url(images/img01.jpg) repeat-x left top;

对于这个选项，您需要将 images 文件夹移动到 Styles 文件夹中（这是一个好习惯）。

最终更新：

看起来 head 元素也需要设置为 runat=server 才能使 ASP.NET 相对路径（~）在带有 runat=server 的 link 元素中工作。

嗨，当我使用第一个选项时，Default.aspx也没有加载CSS样式...我已经在帖子中添加了部分CSS代码。请查看一下。谢谢 - Azeem
如果仍然无法正常工作，请更新您的帖子，说明标记现在的样子，并描述发生了什么。 - Marcel N.
我按照您的建议更新了代码，并将图像文件夹放置在Styles中，但问题仍然存在！！！Default.aspx可以很好地加载css，但SystemAdminLogin.aspx无法...我在帖子中附上了项目文件，这将让您更好地了解我所做的和需要做的事情... - Azeem
请从链接下载。感谢您的帮助。 - Azeem
好的，问题已解决。我会更新我的答案。你可以从这里下载它：http://sdrv.ms/KTy1xN - Marcel N.
2
这对于我的母版页有效：
```html

这适用于我的母版页：

```
<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server">
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" />
</asp:Content>'
谢谢！我花了好几个小时来尝试让我的DNN模块使用自定义CSS文件，除了在<style>标签中包含CSS之外，这是我找到的唯一有效的方法！ - Mmm
1
将runat="server"添加到head属性中，并确保链接以根目录为目标，例如("~/path to css")。
<head runat="server">
    <title>Page Title Here</title>
    <link href="~/css/main.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
0

在你的路径中加入 (~) 后尝试：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Facial Recognition Bank System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="~/Styles/style.css" runat="server" rel="stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
那样行不通。link元素必须带有runat=server，才能使ASP.NET虚拟路径正常工作。 - Marcel N.
是的，@the coon 是正确的。无论是否使用 runat server 属性，~ 都无法正常工作... - Azeem
0

我发现在调试时，ASPNETCORE_ENVIRONMENT被设置为Development。而在_Layout.cshtml中，我缺少了asp-append-version。

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

我修复了它，现在一切都好了：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接