Невозможно реализовать плавающую кнопку в шаблоне Django - PullRequest
Новая
       2

Невозможно реализовать плавающую кнопку в шаблоне Django

1 голос
/ 16 февраля 2020

Я пытаюсь создать плавающую кнопку, как показано в этом видео . Однако я не могу реализовать то же самое. Я в основном пытаюсь добавить это в один из моих django шаблонов.

Вот код HTML: 

{% extends "base.html" %}
{% load bootstrap4 %}
{% block content %}
<button  class="material-icons floating-btnz">Add</button>

Some more code here

{% endblock %}
<style>
    .floating-btnz{
        width: 80px;
        height: 80px;
        background: #009879;
        display: flex;
        border-radius: 50%;
        color: #ffffff;
        font-size: 40px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
        outline: blue;
        border: none;
        cursor: pointer;
    }
</style>

Я включил значок материала CDN в свою базу . html. Мне кажется, что CDN не работает. После проверки в веб-консоли css загружается, но не отображается на кнопке. Куда я иду не так? Любая помощь приветствуется.

1 Ответ

1 голос
/ 16 февраля 2020

Если вы написали <style> за пределами блоков, то он не будет отображаться, поэтому вы должны отобразить его внутри блока.

Обратите внимание, что до в можно поместить только тег <style> в блок <head>. Начиная с HTML 5.2 разрешено помещать это и в тег <body>, но все же может быть лучше сделать это в <head>, поскольку некоторые старые браузеры могут не принять это. 

{% extends "base.html" %}
{% load bootstrap4 %}
<b>{% block header %}</b>
<style>
    .floating-btnz{
        width: 80px;
        height: 80px;
        background: #009879;
        display: flex;
        border-radius: 50%;
        color: #ffffff;
        font-size: 40px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
        outline: blue;
        border: none;
        cursor: pointer;
    }
</style>
<b>{% endblock %}</b>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...