CSS 不在母版页上呈现
Posted
技术标签:
【中文标题】CSS 不在母版页上呈现【英文标题】：CSS Not rendering on Master Page 【发布时间】：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 它现在可以工作了，但我之前尝试过但它没有工作？您能否发布您最近的评论作为答案。 【参考方案1】：尝试使用不带 runat="server" 属性的“~/Content/Master.css”。
【讨论】：
以上是关于CSS 不在母版页上呈现的主要内容，如果未能解决你的问题，请参考以下文章
Visual Web Developer - 母版页上带有登录视图的子页预览