ASP.NET页面未加载CSS样式

Aze*_*eem 13 css c# asp.net visual-studio-2010

这是一个使用VS 2010的C#中的一个简单网站.我有这个项目的以下目录结构:

在此输入图像描述

起始页面是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" %>
Run Code Online (Sandbox Code Playgroud)

SystemAdminLogin.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SystemAdminLogin.aspx.cs" Inherits="_Default" %>
Run Code Online (Sandbox Code Playgroud)

我没有看到我的代码有任何错误,但为什么Page在Interface文件夹中没有加载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>
Run Code Online (Sandbox Code Playgroud)

这是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;
}
Run Code Online (Sandbox Code Playgroud)

Mar*_* N. 24

主页面中包含的样式表使用相对路径.

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

<link href="~/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />
Run Code Online (Sandbox Code Playgroud)

要么:

<link href="/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />
Run Code Online (Sandbox Code Playgroud)

但请记住,建议使用第一个选项.当您在虚拟目录中发布站点时,第二个将不起作用.

在最后评论之后......

CSS中的图像URL也应该更新,以便不使用相对路径或进行任何路径遍历(../).

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

对于此选项,您需要移动Styles文件夹中的images文件夹(这是一个很好的做法).

最后更新:

看起来head元素也需要runat=server按顺序让ASP.NET相对路径(〜)在link元素中工作runat=server.