CSS Не отображается на главной странице

ProgramBox

CSS Не отображается на главной странице

Post author:admin
Запись опубликована:7 января, 2022
Post category:Вопросы по программированию

#css #asp.net #webforms

Вопрос:

У меня есть школьный проект, над которым я работаю, и я озадачен тем фактом, что после дюжины поисков я не могу заставить 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;
        }
}

1. Покажите код для рабочих страниц. Это может помочь разобраться в этом. Когда вы будете отлаживать это, обязательно обновите браузер с помощью Ctrl-F5. Следует заставить его перезагрузить кэшированные стили… они могут быть довольно настойчивыми. Также в инспекторе браузера вы должны иметь возможность щелкнуть левой кнопкой мыши по ссылке css. Если это не показывает вашу таблицу стилей, вы знаете, что это проблема с путем. (либо файла там нет, либо путь указан неверно…)

2. Вопрос @pcalkins был обновлен

3. разница, похоже, не работает в заголовке… может быть предварительная обработка, удаляющая его… или используется макет… попробуйте просто переместить его за пределы тега заголовка.

4. попробуйте «~/Content/Master.css» без атрибута runat=»сервер».

5. @pcalkins Это работает сейчас, но я уже пробовал раньше, и это не сработало? Можете ли вы опубликовать свой недавний комментарий в качестве ответа, пожалуйста.

Ответ №1:

Попробуйте использовать «~/Content/Master.css» без атрибута runat=»сервер».

Метки: CSS Не отображается на главной странице

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Перенаправление пользователя на домашнюю страницу без перезагрузки страницы

Процесс форка Python внутри ноутбука Jupyter

Компоновщик gtag не работает в JS form.submit()