15

这是一个在 ASP.NET 中使用 VS 2010 使用 C# 的简单网站。我对该项目有以下目录结构：

在此处输入图像描述

起始页面是Default.aspx并且它加载完美。但是当我Interface/SystemAdminLogin.aspx从默认页面打开页面时，它加载时没有 CSS 样式。我在母版页中导入了 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;
}
4

5 回答 5

29

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

runat=server使用虚拟 Web 根路径 ( )指定样式表链接并为其添加前缀~：

<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 也应该更新，以便不使用相对路径或进行任何路径遍历(../)。

背景：#fff url(images/img01.jpg) 重复-x 左上角；

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

最终更新：

看起来该head元素还需要runat=server为 ASP.NET 相对路径 (~) 在link带有runat=server.

于 2012-06-23T10:18:14.027 回答
2

这适用于我的母版页：

<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server">
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" />
</asp:Content>'
于 2014-08-05T15:34:09.123 回答
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>
于 2012-06-23T10:25:15.937 回答
0

添加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>
于 2016-02-15T11:49:39.927 回答
0

我发现它是 ASPNETCORE_ENVIRONMENT 设置为开发进行调试。在 _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>

于 2019-02-08T15:17:04.763 回答