Question

我正在开发我的第一个.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。

我们将不胜感激任何帮助

Answer 1

尝试像这样导入您的css link

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

样式表代码未反映在剃须刀页面上

1 个答案: