CSS-код не работает в MVC отдельно от фонового изображения - PullRequest
1 голос
/ 12 мая 2019

некоторые css-коды не работают с моим веб-сайтом mvc

Я создал макет, связанный с файлом css.Страница просмотра использует этот макет.Когда я загружаю страницу, она знает, как получить фоновое изображение, но какой-то простой код не работает.Я также обнаружил, что добавление заголовков в мой текстовый класс из css работает, но другие классы этого не делают.Пытался использовать файл css напрямую без разметки, результат такой же.Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.Я благодарен за любую помощь, спасибо

Код CSS не работает

h2{
 font-size: 35px
}

nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

рабочий код CSS

body {
    font-family: verdana, sans-serif;
    background-image: url('/Images/pawwallpaper.jpg')
}

.text {
    text-align: center;
    font-size: 35px;
    padding: 10px 16px;
    position: absolute;
    bottom: 10px;
    color: #FC5A37;
    font-weight: bold;
}

представление, использующее Layout

@model ToysListViewModel

    <h1>@Model.CurrentCategory</h1>
    @foreach (var toy in Model.Toys)
    {
    <nav> <!--change this to <div class="text"> worked -->
        <center>
            <img src="@toy.ImageUrl" alt="" height="420" width="420" />
            <h2>@toy.Name</h2>
            <h3>@toy.Price.ToString("c")</h3>
            <h4>@toy.Category.CategoryName</h4>
            <p>@toy.ShortDescription</p>
        </center>
    </nav>

    }

Макет

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap.4.1.3/css/bootstrap.min.css">
    <link href="~/Content/site.css" type="text/css" rel="stylesheet" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=dive-width, initail-scale=1" />
    <title>Tigerpaw</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 12 мая 2019

ваш css бесполезен из-за использования библиотеки начальной загрузки, но если вы хотите использовать их без добавления класса или идентификатора в ваши атрибуты, вам нужно добавить!

h2
{
    font-size: 35px !important;
}
0 голосов
/ 13 мая 2019

Вы пытаетесь добавить идентификатор?

<div id="test">
<h1>@Model.CurrentCategory</h1>
@foreach (var toy in Model.Toys)
{
<nav> <!--change this to <div class="text"> worked -->
    <center>
        <img src="@toy.ImageUrl" alt="" height="420" width="420" />
        <h2>@toy.Name</h2>
        <h3>@toy.Price.ToString("c")</h3>
        <h4>@toy.Category.CategoryName</h4>
        <p>@toy.ShortDescription</p>
    </center>
</nav>

}
</div>

#test h2{
 font-size: 35px
}

#test nav {
    margin: 0px auto;
    width: 100% ;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

Если вы не хотите, чтобы какие-либо новые значения были повреждены, вам следует использовать! Important.

0 голосов
/ 12 мая 2019

Вы не можете видеть стиль для своего элемента, потому что вы используете bootstrap, и вы определяете тот же элемент, что и nav и h2, и эти элементы уже находятся в библиотеке начальной загрузки, поэтому, если вы хотите, чтобы ваш стиль влиял, вы должны установить id или класс для вашего элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...