堆棧內存溢出
  簡體   English   中英

如何改變身體的背景顏色？

[英]how to change background color for the body?

 原文  2022-03-17 11:35:13  5   2    c#/ asp.net-mvc

問題描述

我如何更改主布局中的背景顏色，它現在變暗了，我無法使用導航欄找到它我需要更改主體我找不到它是在引導程序文件中嗎？

另外如何更改文本字段大小和 colors？

這是布局代碼：

<!DOCTYPE html>
<html>
<head>
    <title> store system  </title>
    @RenderSection("head", required: false)

    <meta charset="utf-8">
    <title></title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&family=Nunito:wght@600;700;800&display=swap" rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href=@Url.Content("/Contents/lib/animate/animate.min.css") rel="stylesheet">
    <link href=@Url.Content("/Contents/lib/owlcarousel/assets/owl.carousel.min.css") rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href=@Url.Content("/Contents/css/bootstrap.min.css") rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href=@Url.Content("/Contents/css/style.css") rel="stylesheet">
</head>
<body style="background-color:darkgray ">
    <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->
    <!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg bg-white navbar-light shadow sticky-top p-0">
        <a href="#" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
            <h2 class="m-0 text-primary"><i class="fa fa-book me-3"></i>Store System</h2>
        </a>
        <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ms-auto p-4 p-lg-0">
                <a href="index.html" class="nav-item nav-link active">Home</a>
                <a href="about.html" class="nav-item nav-link">About</a>

                <a href="@Url.Action("Index", "Quantities")" class="nav-item nav-link">Quantity</a>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Setup</a>
                    <div class="dropdown-menu fade-down m-0">
                        <a href="team.html" class="dropdown-item">Our Team</a>
                        <a href="testimonial.html" class="dropdown-item">Testimonial</a>
                        <a href="404.html" class="dropdown-item">404 Page</a>
                    </div>
                </div>
                <a href="contact.html" class="nav-item nav-link">Contact</a>
            </div>
            <a href="" class="btn btn-primary py-4 px-lg-5 d-none d-lg-block">Join Now<i class="fa fa-arrow-right ms-3"></i></a>
        </div>
    </nav>
    <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src=@Url.Content("/Contents/lib/wow/wow.min.js")></script>
    <script src=@Url.Content("/Contents/lib/easing/easing.min.js")></script>
    <script src=@Url.Content("/Contents/lib/waypoints/waypoints.min.js")></script>
    <script src=@Url.Content("/Contents/lib/owlcarousel/owl.carousel.min.js")></script>

    <!-- Template Javascript -->
    <script src=@Url.Content("/Contents/js/main.js")></script>
    @RenderBody()
</body>
</html>

請看圖片：

在此處輸入圖像描述

這是查看代碼：

@model warehouse.Models.ITEMS_STOCK

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>ITEMS_STOCK</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.BATCH_NO, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BATCH_NO, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BATCH_NO, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PROD_DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PROD_DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PROD_DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.EXPIRY_DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EXPIRY_DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EXPIRY_DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.QUANTITY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.QUANTITY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.QUANTITY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.RECEIVEDBY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.RECEIVEDBY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.RECEIVEDBY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SENDBY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SENDBY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SENDBY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SUPPLYERID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SUPPLYERID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SUPPLYERID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SUPPLYID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SUPPLYID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SUPPLYID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.USER_ID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.USER_ID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.USER_ID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.item_code_id, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.item_code_id, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.item_code_id, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

更新：

我運行視圖然后 select 檢查和 select 主體樣式中有一行。css 主體部分：

/* 背景：線性漸變（#141e30，#243b55）；

我在文件 style.css 中更改了它，但始終在檢查中顯示這一行並且沒有更改？ 我可以保存檢查中的更改嗎？ 為什么不閱讀 style.css 的變化？

我從它的閱讀位置檢查了來源並更改了它，但它總是如此相同的顏色看到圖像請它的來源樣式。css 第 443 行我刪除它並保存但是當運行視圖時它仍然存在！

在此處輸入圖像描述

2 個解決方案

解決方案1
 1  2022-03-17 13:36:09

嘗試強制着色：

body{background-color:red !important;}

最多直接在 html，這是最高優先級：

...
<body style="background-color:red !important;">
...

解決方案2
 1 已采納  2022-03-17 15:18:04

1- 嘗試復制文件 style.css

2-粘貼然后改變顏色

<body style="background-color:red;">

3- 從新文件 style1.css 中讀取

 <!-- Template Stylesheet -->
 <link href=@Url.Content("/Contents/css/style1.css") rel="stylesheet">

4- 構建解決方案。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何更改DXTabControl背景顏色？ 如何更改文本框的背景顏色？ 如何更改數據網格的背景色 如何更改 ToolStripItems 的背景顏色？ 如何更改DataGridView背景顏色/單元格顏色 如何逐漸改變Monogame中的背景顏色 如何更改Outlook日歷的背景顏色 如何在ListView項目中更改背景顏色？ 如何更改項目控制StackPanel背景顏色 如何更改背景顏色
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM