文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS不连接到HTML (Django)

问CSS不连接到HTML (Django)
EN

Stack Overflow用户

提问于 2022-05-08 12:07:25

回答 1查看 65关注 0票数 1

我的静态css文件没有一个连接到html。但是，所有静态图片都正常工作。

settings.py

DEBUG = True
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'main'
]
import os
STATIC_DIR = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

base.html (父母)

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/png" href="{% static 'img/favico.png' %}">
  <title>{% block title %}{% endblock %}</title> 
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel = 'stylesheet' href = "{% static 'css/main.css' %}">
</head>
<body>
  <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
    <font style="font-size: 20px; opacity: 0.9; font-weight: lighter;">
      <a href="{% url 'home' %}" class="d-flex align-items-center text-dark text-decoration-none">
        <img class="main_img" width="25px" height="30px" src="{% static 'main/img/favico5.png' %}">
        <span class="logo" style="padding: 5px"><font style="font-family: Arial">Teach me</font></span>
      </href>
   </font>
      <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
        <a class="me-3 py-2 link-secondary text-decoration-none" href="{% url 'home' %}"><font style="padding-right: 10px;">Главная</font></a>
        <a class="me-3 py-2 link-secondary text-decoration-none" href="{% url 'tutors' %}"><font style="padding-right: 10px;">Репетиторы</font></a>
        <a class="me-3 py-2 link-secondary text-decoration-none" href="{% url 'articles' %}"><font style="padding-right: 21px;">Статьи</font></a>
        <a class="me-3 py-2 link-secondary text-decoration-none" href="{% url 'login' %}"><font style="background-color:#FFEFDF; border: 10px solid #FFEFDF; color: black; border-radius: 10px; border-width: 3px 20px 7px 20px; box-shadow: 1px 3px 1px #A9A9A9;">Войти</font></a>
      </nav>

  </div>
    {% block content %}{% endblock %}
</body>
</html>

index.html

{% extends 'main/base.html' %}
{% load static %}
<head>
  {% block title %}
  {{title}}
  {% endblock %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
{% block content %}
<main>
  <h1>GHBDTN</h1>
  <body>
    <div class="grid-wrapper">
      <header class="grid-header">
          <img class="circles" src="{% static "main/img/main8.jpg" %}" alt="main pic">
          <p>Предоставим качественное образование, <br>
          поможем понять школьную программу, <br>
          улучшить оценки и <br>
          подготовиться к экзаменам</p>
      </header>
    </div>
  </body>
</main>
{% endblock %}

style.css (与index.html相关)

.grid-wrapper {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: 1 fr;
    grid-template-areas: 'header header';
}

.circles {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: relative;
    width: 100%;
}

p {
    color: red;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
}

main.css (与base.html相关)

nav {
    font-family: Montserrat;
    font-size: 20px;
}

nav a:hover {
    color: red;
    transition: all .6s ease;
    transform: scale(1.10);
}

我已经将BASE_DIR更改为documentation，但什么也没有改变。显示所有html。我用css创建了html文件，没有django，工作正常。

我的项目的结构看起来像：

/project 
//taskmanager
///main 
////static 
/////css
//////main.css and style.css
////templates
/////main
//////base.html
//////index.html

django

django-templates

django-staticfiles

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-08 14:06:28

就像这样

base.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <!--- Add all your meta tags css files --->
  <title>{% block title %}{% endblock %}</title> 
  {% block extra_head_links %}
  {% endblock %}
</head>
<body>
 
    {% block content %}{% endblock %}
</body>
</html>

在您的index.html

{% extends 'main/base.html' %}
{% load static %}

{% block title %}
  {{title}}
{% endblock %}

{% block extra_head_links %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
{% endblock %}

{% block content %}
<main>
  <h1>GHBDTN</h1>
  <body>
    <div class="grid-wrapper">
      <header class="grid-header">
          <img class="circles" src="{% static "main/img/main8.jpg" %}" alt="main pic">
          <p>Предоставим качественное образование, <br>
          поможем понять школьную программу, <br>
          улучшить оценки и <br>
          подготовиться к экзаменам</p>
      </header>
    </div>
  </body>
</main>
{% endblock %}

以上代码将从base.html扩展所有css，并在index.html上添加额外的css链接。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72160835

复制

相似问题

问CSS不连接到HTML (Django)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS不连接到HTML (Django)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS不连接到HTML (Django)
EN