添加“extends/base.html”后,某些CSS不起作用

2024-06-16 16:19:39 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在构建一个toggle button,我正在使用一些CSS,但是当我尝试运行代码时,one CSS command不起作用。当我删除{% extends 'base.html' %}时,它工作得很好,但添加后它不会加载函数

toggle.html

{% extends 'mains/base.html' %}
{% load static %}
{% block content %}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
  @media screen and (max-width: 700px) {
    body {
      padding: 170px 0 0 0;
      width: 100%
    }
  }
  
  a {
    color: inherit;
  }
  
  .menu-item,
  .menu-open-button {
    background: #EEEEEE;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    margin-left: -35px;
    margin-top: 230px;
    position: absolute;
    color: #FFFFFF;
    text-align: center;
    line-height: 3em;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
  }
</style>

base.html

{% load static %}


Other links.......

.......

......

{% block content %}
{% endblock %}

添加line-height: 100px;extends base.html无效,这是必需的

我到处都搜索过,我也尝试过删除base.html上的每个元素,然后我注意到在删除每个链接之后,它都在工作

任何帮助都将不胜感激。先谢谢你


Tags: basehtmltransformloadstaticbuttonoutwidth
2条回答

我在base.html中添加了这个:


<!DOCTYPE html>
<html>
    <head>
        <!  Required meta tags  >
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    </head>
<body>

它成功了

有一个CSS覆盖您的CSS,请确保指向您的CSS的链接是base.htnl中的最后一个链接

在“base.html”中,在“”和“”之间添加一个名为“head”的块</头>;还有你的风格标签

CSS只能应用于头部,而不能像JS一样应用于身体

相关问题 更多 >