CSS Стиль не применяется к частям моего html файла - PullRequest
Новая
       0

CSS Стиль не применяется к частям моего html файла

0 голосов
/ 29 апреля 2020

Я использую тег flask {% extends%} для создания страницы индекса HTML и расширения стилей из base.html; однако, кажется, что стиль не применяется к определенным частям страницы.

Ранее я использовал HTML и CSS, но я впервые использую его с flask при создании приложения python.

Я пытаюсь стилизовать нижнюю часть страницы, но стилизация не применяется.

Вот моя база. html код: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Taster Day Booking System</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
rel="stylesheet">

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs- 
example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand topnav" href="{{ url_for('home.homepage') }}">Home</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
             {% if current_user.is_authenticated %}
              {% if current_user.is_admin %}
                <li><a href="{{ url_for('home.admin_dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url_for('admin.list_tasterdays') }}">Taster Days</a></li>
                <li><a href="{{ url_for('admin.list_courses') }}">Courses</a></li>
                <li><a href="{{ url_for('admin.list_students') }}">Students</a></li>
              {% else %}
                <li><a href="{{ url_for('home.dashboard') }}">Dashboard</a></li>
              {% endif %}
                <li><a href="{{ url_for('auth.logout') }}">Logout</a></li>
                <li><a><i class="fa fa-user"></i>  Hi, {{ current_user.username }}!</a></li>
              {% else %}
                <li><a href="{{ url_for('home.homepage') }}">Home</a></li>
                <li><a href="{{ url_for('auth.register') }}">Register</a></li>
                <li><a href="{{ url_for('auth.login') }}">Login</a></li>
              {% endif %}
          </ul>
      </div>
    </div>
</nav>
<div class="wrapper">
  {% block body %}
  {% endblock %}
  <div class="push"></div>
</div>
<div class="splitscroll">{% block content %}{% endblock %}</div>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <ul class="list-inline">
                 <li><a href="{{ url_for('home.homepage') }}">Home</a></li>
                    <li class="footer-menu-divider">⋅</li>
                    {% if current_user.is_authenticated %}
                    <li><a href="{{ url_for('auth.logout') }}">Logout</a></li>
                     {% else %}
                     <li><a href="{{ url_for('auth.register') }}">Register</a></li>
                     <li class="footer-menu-divider">⋅</li>
                     <li><a href="{{ url_for('auth.login') }}">Login</a></li>
                    {% endif %}
                </ul>
                <p class="copyright text-muted small">Copyright © 2020</p>
            </div>
        </div>
    </div>
</footer>

вот мой индекс. html код: 

{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block body %}

<div class="intro-header">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="intro-message">
                <h1>Foundation year in Computing and Computing BSc Taster Day Booking</h1>
                <h3>Ff - For Females!</h3>
                <hr class="intro-divider">
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}
{% block content %}
<section class="splitscroll">
<div id="courses" class="info">
  <h2>Courses</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis lorem nunc, vitae 
sollicitudin massa fringilla sit amet. Aenean ac bibendum nibh, in viverra est. Etiam mattis 
elementum ligula et maximus. Sed sit amet quam vehicula, feugiat tellus non, finibus felis. 
Suspendisse nec elit quis quam auctor sollicitudin.</p>

</div>
<div class="full-picture image-1">

</div>
</section>
<section>
<div id="essential" class="info">
  <h2>Essential Information</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis lorem nunc, vitae 
sollicitudin massa fringilla sit amet. Aenean ac bibendum nibh, in viverra est. Etiam mattis 
elementum ligula et maximus. Sed sit amet quam vehicula, feugiat tellus non, finibus felis. 
Suspendisse nec elit quis quam auctor sollicitudin.</p>

</div>
<div class="full-picture image-2">

</div>
</section>
<section>
<div id="tips" class="info">
  <h2>Tips</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis lorem nunc, vitae 
sollicitudin massa fringilla sit amet. Aenean ac bibendum nibh, in viverra est. Etiam mattis 
elementum 
ligula et maximus. Sed sit amet quam vehicula, feugiat tellus non, finibus felis. Suspendisse nec 
elit 
quis quam auctor sollicitudin.</p>
</div>
<div class="full-picture image-3">

</div>
</section>
{% endblock %}

и вот мой css: 

 body, html {
 width: 100%;
 } 

body, h1, h2, h3 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}

a, .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a {
color: #FFC0CB;
}

a:hover, .navbar-default .navbar-brand:hover, .navbar-default .navbar-nav>li>a:hover {
color: #687430;
}

footer {
padding: 50px 0;
background-color: #f8f8f8;
}

p.copyright {
margin: 15px 0 0;
}

.alert-info {
width: 50%;
margin: auto;
color: #687430;
background-color: #e6ecca;
border-color: #aec251;
}

.btn-default {
border-color: #aec251;
color: #aec251;
}

.btn-default:hover {
background-color: #aec251;
}

.center {
margin: auto;
width: 50%;
padding: 10px;
}

.content-section {
padding: 50px 0;
border-top: 1px solid #e7e7e7;
}

.footer, .push {
clear: both;
height: 4em;
}

.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../images/intro-bg.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}

.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}

.intro-message > h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
font-size: 5em;
}  

.intro-message > h3 {
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

.lead {
font-size: 18px;
font-weight: 400;
}

.topnav {
font-size: 14px;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

.outer {
display: table;
position: absolute;
height: 70%;
width: 100%;
}

.middle {
display: table-cell;
vertical-align: middle;
}

.inner {
margin-left: auto;
margin-right: auto;
}

/* Split scroll section*/
.splitscroll {
display: flex;
flex-direction: row;
}

section div {
width: 50%;
}

section:nth-child(odd) {
flex-direction: row-reverse;
}

.info {
padding: 60px;
}

.info p {
font-size: 50px;
}

#courses {
background-color: #004687;
}

#courses p {
color: #C0BFBF;
}

#essential {
background-color: #9099A2;
}

#essential p {
color: #004687;
}

#tips {
background-color: #004687;
}

#tips p {
color: #C0BFBF;
}

.full-picture {
height: 100vh;
background-image: url(../images/intro-bg.jpg);
background-size: cover;
background-position: center;
position: sticky;
top: 0;
}

section div.image-2 {
background-image: url('../images/map.jpg');
}

section div.image-3 {
background-image: url('../images/recomendations.jpg');
}

<section class="splitscroll"> в индексе. html Файл, где стили не применяются. Стиль для этого в css начинается с /* Split scroll section*/

Извините, если мое форматирование неверно, у меня всегда возникает проблема с этим здесь.

Может кто-нибудь объяснить мне почему стайлинг не применяется?

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

Нет похожих вопросов

...