时间戳

首页 > 解决方案 > 样式表代码不会反映在剃须刀页面上

css - 样式表代码不会反映在剃须刀页面上

问题描述

我正在开发我的第一个 .net 核心 Web 应用程序。我正在尝试将我的公司徽标放在 _layout.cshtml 页面中，但 _layout 页面似乎无法识别样式表 site.css。下面是我的 _layout.cshtml 页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - VitalRecords</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />

</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="headerDiv">
                <div class="headerTopBanner"></div>
                <div class="headerLogo">
                    <div class="logo"></div>
                </div>
                <h1 class="display-4">Welcome</h1>

            </div>
            </nav>

    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - test - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

我的 site.css 定义了以下内容：

.headerDiv {
    background-color: white;
}

.headerTopBanner {
    background-color: $header-top-banner-color;
    height: 5px;
    width: 100%;
}

.headerLogo {
    padding: 5px;
    padding-left: 10px;
    vertical-align: middle;
}

.logo {
    background: url(../../images/LogoWithDesc) 0 0;
    min-height: 70px;
    vertical-align: middle;
}

$header-top-banner-color: #FD810A;

输出的屏幕截图如下所示：

在此处输入图像描述

我在 Index.cshtml 中有类似的代码：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}


<div class="headerDiv">
    <div class="headerTopBanner"></div>
    <div class="headerLogo">
        <div class="logo"></div>
    </div>
    <h1 class="display-4">Welcome</h1>

</div>

这就是为什么欢迎在我的页面上出现两次，但徽标和其他一些颜色没有出现。似乎 site.css 根本无法识别。

任何帮助将不胜感激，

标签： cssasp.net-corerazor-pages

解决方案

尝试css link像这样导入你的

<link href="@Url.Content("~/css/site.css")" rel="stylesheet" type="text/css" />

推荐阅读