CSS 不适用于母版页

问题描述 投票：0回答：5

我一生都无法弄清楚为什么我尝试应用的 CSS 不起作用，希望有人可以帮助我。

索引.大师

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <meta charset="utf-8" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; }
    ul.nav a { zoom: 1; }
    </style>
    <![endif]-->
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="container">
        <div class="header">
            <asp:ContentPlaceHolder ID="HeaderContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="sidebar1">
            <asp:ContentPlaceHolder ID="LeftNavBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="content">
            <asp:ContentPlaceHolder ID="MainContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="footer">
            <asp:ContentPlaceHolder ID="FooterContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

默认.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="IGS._default"
    MasterPageFile="Index.Master" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <title>Site Index</title>
</asp:Content>
<asp:Content ID="HeaderContentBar" runat="server" ContentPlaceHolderID="HeaderContentBar">
    Header
</asp:Content>
<asp:Content ID="LeftNavBar" runat="server" ContentPlaceHolderID="LeftNavBar">
    <ul class="nav">
        <li><a href="news.aspx">News</a></li>
        <li><a href="admin/default.aspx">Administration</a></li>
    </ul>
</asp:Content>
<asp:Content ID="MainContentBar" runat="server" ContentPlaceHolderID="MainContentBar">
    <h1>
        Latest News</h1>
    <asp:Repeater ID="newsRepeater" runat="server">
        <ItemTemplate>
            <div class="newsHeadline">
                <b>
                    <%# Server.HtmlEncode(Eval("newsHeadline").ToString())%></b>
                <div class="newsStory">
                    <%# Server.HtmlEncode(Eval("newsStory").ToString())%>
                </div>
                <div class="newsFooter">
                    Posted By:
                    <asp:HyperLink ID="newsSubmittedBy" runat="server" NavigateUrl='<%# string.Format("User.aspx?id={0}", Eval("id")) %>'
                        Text='<%# Server.HtmlEncode(Eval("newsSubmittedBy").ToString())%>' />
                    - Submitted By:
                    <%# Server.HtmlEncode(Eval("newsDate").ToString())%>
                </div>
                <div style="text-align: right;">
                    <asp:HyperLink ID="newsReadMore" runat="server" CssClass="newsReadMore" NavigateUrl='<%# string.Format("News.aspx?id={0}", Eval("id")) %>'
                        Text="Read More..." />
                </div>
                <hr />
        </ItemTemplate>
    </asp:Repeater>
    <p class="newsDaySelector">
        <asp:TextBox ID="TextBox1" runat="server" Width="30" Text="7"></asp:TextBox>
        days</p>
</asp:Content>
<asp:Content ID="FooterContentBar" runat="server" ContentPlaceHolderID="FooterContentBar">
</asp:Content>

编辑：多么不幸。我做了下面推荐的所有操作，但它仍然不起作用。这很奇怪。该页面之前已部分样式化，因此看起来至少正确地抓住了它。如果其他人有任何想法，我很想听听。

这是我的 CSS。正如我所说，非常基本，而且只起到了一半作用。主要问题是页脚不会沿着底部延伸，而是与内容区域的左侧对齐。

body
{
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
.container
{
    width: 960px;
    background-color: #FFF;
    margin: 0 auto;
}

.header
{
    background-color: #ADB96E;
}

.sidebar1
{
    float: left;
    width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content
{
    padding: 10px 0;
    width: 780px;
    float: left;
}

.footer
{
    padding: 10px 0;
    background-color: #6F7D94;
    position: relative;
    clear: both;
}
asp.net css
5个回答
1
投票

当链接到母版页中的样式表时，最好使用 asp.net 链接而不是 html 链接。这可确保 asp.net 解析根目录中的路径。为此，您所需要做的就是添加属性 

runat="server"
。

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

现在即使您的母版页与 aspx 页面不在同一目录中，CSS 也会正确加载。

1
投票

我不知道你把你的CSS文件放在哪里，所以这是必须工作的东西

1- <link href="..css/main.css" rel="stylesheet" type="text/css" />
2- <link href="/css/main.css" rel="stylesheet" type="text/css" />
3-<link href="../css/main.css" rel="stylesheet" type="text/css" />

如果它们都不起作用，则第 4 步是 100% 的方法，您只需将 css 文件拖到您的头上，这将自动构建正确的 css 链接，如果这没有帮助，您需要检查所有你id的所有css文件都写错了

我建议从第 4 步开始，这是获得 scc 的写入链接的 100% 方法

0
投票

试试这个[我假设 css 文件夹位于根目录，css 文件路径可能不正确。]

<link href="~/css/main.css" rel="stylesheet" type="text/css" />

而不是 

<link href="css/main.css" rel="stylesheet" type="text/css" />

并将 

<!DOCTYPE
放在 
<html>
标签之前。

0
投票

您的代码似乎没有错误。我可以假设的唯一可能性是路径中的问题。 根据您的样式表位置使用以下之一：

/     -Site root
~/   -Root directory of the application

尝试添加：

runat="server"

也在你的道路上。

祝你好运！

0
投票

如果设计页面显示应用的 CSS，但只是不显示在您的网络浏览器上

尝试 ctrl + f5

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.