CSS 不在母版页上呈现答案

【问题标题】：CSS Not rendering on Master PageCSS 不在母版页上呈现
【发布时间】：2021-12-25 05:02:51
【问题描述】：

我有一个正在处理的学校项目，但我对以下事实感到困惑：经过十几次搜索后，我无法在母版页上呈现 CSS。其他页面工作正常，没有任何问题，但由于某种原因，我找不到解决问题的方法。

我试过了

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

还有

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

然而他们没有产生任何结果

母版页


<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Auth.master.cs" Inherits="Task_3.User.Auth.Auth" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title><%: Page.Title %> || Course Manager</title>
    <link href="~/Content/Master.css" rel="stylesheet" type="text/css" runat="server"/>
</head>
<body>
    <form runat="server">

        <div>
            <div id="mySidenav" class="sidenav">
                <span>Course Manager</span>
                <div class="container">
                    <a href="#">Dashboard</a>
                    <a href="#">Add Modules</a>
                    <a href="#">View Modules</a>
                    <a class="logout" href="#">Log Out</a>
                </div>
            </div>

            <asp:ContentPlaceHolder ID="Content" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form> 
</body>
</html>

Master.css 文件

* {
    margin: 0;
    padding: 0;
    font-family: 'Microsoft Yahei';
}

body {
    background-color: #EEF2F5;
}


/* The side navigation menu */
.sidenav {
    height: 100%;
    width: 249px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    padding-top: 20px;
}

/* The navigation menu links */
.sidenav .container a {
    width: 100%;
    padding: 8px 20px 8px 0px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;  
}

.sidenav span {
    width: 100%;
    padding: 8px 8px 8px 15px;
    text-decoration: none;
    font-size: 25px;
    display: block;
    font-family: 'Microsoft Yahei';
    font-weight: bold;
}

/* When you mouse over the navigation links, change their color */
.sidenav .container a:hover {
    color: #343434;
}

.main .topbar {
    width: 80%;
    height: 210px;
    background: transparent;
    margin: 25px auto;
    border-radius: 5px;
}

.sidenav .container a:focus {
    border-left: 5px solid #563c5c;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.sidenav .container {
    width: 100%;
    margin: 150px auto;
    text-align: center;
}

.sidenav .container .logout {
    margin: 85px auto;
}

#Content {
    margin-left: 250px;
}

使用样式的登录页面


<asp:Content runat="server" ContentPlaceHolderID="MainContent">
    <link href="../Content/Site.css" rel="stylesheet" type="text/css"/>
    <div id="form">
        <div class="login">
            <div class="login col1">
                <div class="login icon">
                    <asp:Image runat="server" ImageUrl="~/Img/studying.png" />
                </div>
                <h2>Login</h2>
                <div class="login stack">
                    <asp:TextBox type="email" ID="txtEmail" runat="server" placeholder="Email" />                    
                    <br />
                    <asp:TextBox type="password" runat="server" ID="txtPassword" placeholder="Password" />
                    <br>
                    <p class="login forgot-pas">Forgot Password?</p>

                    <asp:Button ID="btnLogin" CssClass="button" Text="Login" OnClick="btnLogin_Click" runat="server"></asp:Button>
                    <div id="error" runat="server"></div>


                    <div class="login no_account">
                        <p runat="server">Don't Have An Account Yet?</p>
                        <p runat="server" class="link"><a href="Register.aspx">Create one!</a></p>
                    </div>
                </div>
            </div>
            <div class="login col2">
                <div class="login icon">
                    <asp:Image runat="server" ImageUrl="~/Img/studying.png" />
                </div>
                <h2>Course Manager</h2>
                <h3>Course Management Made Easy!</h3>
                <div class="login info">
                    <ul>
                        <li><span>Manage Study information</span></li>
                        <li><span>Store Module Information</span></li>
                        <li><span>Auto Self Study Calculations</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

登录样式

@import url(https://fonts.googleapis.com/css?family=Roboto:700);

* {
    padding: 0;
    margin: 0;
    font-family: 'Microsoft YaHei';
}

body {
    background-image: url("../Img/background.png");
}

#form {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 1280px;
    height: 750px;
    border-radius: 8px 8px 8px 8px;
    background-color: #252B35;
}

.login .col1 {
    background-color: transparent;
    float: right;
    width: 730px;
    height: 750px;
    justify-items: self-start;
    text-align: center;
}

.login .col1 img {
    display: none;
}

.login .col2 {
    float: left;
    width: 548px;
    height: 750px;
    text-align: center;
    color: #fff;
}



.login .col2 img {
    width: 150px;
    height: 150px;
    margin: 85px auto;
    object-fit: cover;
}

.login .col2 .icon {
    width: 150px;
    height: 150px;
    margin: 85px auto;
}

.login .col1 .icon {
    width: 150px;
    height: 50px;
    margin: 0px auto;
}


.login .col1 h2, p, a, label {
    color: #fff;
    text-decoration: none;
}

.login .col1 .stack {
    margin: 25px auto;
    height: 450px;
    width: 500px;
    justify-content: center;
    align-items: center;   
}

.login .col1 .stack .error {
    color: red;
    font-size: 14px;
    margin: 15px 0px 0px 0px;
    text-align: left;
}

.login .col1 .stack input[type=email], input[type=password] {
    width: 350px;
    height: 35px;
    color: #0c0c0c;
    margin: 10px 0px 0px 0px;
    padding: 7px 15px 7px 5px;
    border-radius: 8px;
    Font-size: 16px;
    outline: none;
    border: none;
}

.login .col1 .stack .button {
    width: 250px;
    height: 45px;
    margin: 15px auto;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: #fff;
    outline: none;
    transition: all 0.3s;
    position: relative;
}

.login .col1 .stack .button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(0.1, 1);
}

.login .col1 .stack .button:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: rgba(255,255,255,0.5);
    border-bottom-color: rgba(255,255,255,0.5);
    width: 250px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.login .col1 .stack .button:hover::before {
    opacity: 1;
    transform: scale(1, 1);
}

.login .col1 .stack .button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s;
    background-color: rgba(255,255,255,0.1);
}

.login .col1 .stack .forgot-pas {
    margin-top: 25px;
    cursor: pointer;
}

.login .col1 h2 {
    Font-Size: 36px;
    margin: 125px 0px 55px 0px;
}

.login .col2 .info {
    text-align: center;
    margin: 85px auto;
    display: inline-table;
    font-size: 22px;
    Font-weight: bold;
}

/* Allow Responsive design on Login */

@media screen and (max-width: 375px) {
    .login .col2 {
        display: none;
    }

    #form {
        width: 90%;
        height: 90%;
    }

    .login .col1 {
        width: auto;
        height: 100%;
        margin: auto;
    }

        .login .col1 img {
            width: 80px;
            display: inline;
            Height: 80px;
            margin: 45px auto;
        }

    .login .col1 {
        background-color: transparent;
        width: 100%;
        height: auto;
        justify-items: center;
        text-align: center;
        margin: auto;
    }

        .login .col1 h2 {
            Font-Size: 26px;
            margin: 85px 0px 55px 0px;
        }

        .login .col1 .stack input[type=email], input[type=password] {
            width: 200px;
            height: 25px;
            color: #0c0c0c;
            margin: 10px 0px 0px 0px;
            padding: 7px 15px 7px 5px;
            border-radius: 8px;
            Font-size: 14px;
            outline: none;
            border: none;
        }

        .login .col1 .stack {
            margin: auto;
            height: auto;
            width: 100%;
            text-align: center;
        }

            .login .col1 .stack .btn {
                margin: 55px 0px 0px;
            }

        .login .col1 .no_account {
            margin: 55px 0px 0px 0px;
        }
}

【问题讨论】：

显示正在运行的页面的代码。这可能有助于确定它。在调试时，请务必使用 Ctrl-F5 刷新浏览器。应该强制它重新加载缓存的样式......它们可能非常持久。同样在浏览器的检查器中，您应该能够左键单击 css 的 href。如果这没有显示您的样式表，您就知道这是一个路径问题。（要么文件不存在，要么路径错误...）
@pcalkins 问题已更新
差异似乎不起作用是在标题中...可能正在预处理删除它...或使用了布局...尝试将其移到标题标签之外。
在没有 runat="server" 属性的情况下尝试“~/Content/Master.css”。
@pcalkins 它现在可以工作了，但我之前尝试过但它没有工作？您能否发布您最近的评论作为答案。

标签： css asp.net webforms

【解决方案1】：

尝试使用不带 runat="server" 属性的“~/Content/Master.css”。

【讨论】：