На данный момент наш сайт выглядит очень плохо. У него нет ни стилей, ни картинок, ни корректного HTML кода. В уроке мы это исправим. Мы добавим Bootstrap, пропишем HTML и создадим красивые стили для всего нашего сайта.
Ссылка для подключения FontAwesome: https://use.fontawesome.com/releases/v5.8.2/css/all.css
Язык стилей CSS
Для создания стилей в HTML разметке существует язык CSS. Он является основным языком стилей и без знаний CSS очень сложно создавать дизайн сайта. Если вы ещё не знаете CSS, то рекомендуем посмотреть наш урок по изучению CSS за 45 минут.
Помимо CSS можно использовать различные фреймворки, что предоставляют набор готовых стилей и скриптов для создания сайта. Одной из таких технологий является библиотека Bootstrap, которая содержит большой набор готовых стилей для объектов на сайте. Скачать библиотеку можно с их официального сайта.
В Jinja для добавления статических файлов существует специальная команда load static. Команду необходимо прописывать перед подключением статического файла или же в начале HTML документа перед всеми тегами.
Среди статических файлов могут быть любые файлы, что находятся у вас на сервере: картинки, стили, JavaScript файлы, документы и прочее.
Все статические файлы важно помещать в папку «static». Работает она по принципу папки «templates», но служит для хранения статических данных.
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Исходный код
Файл «index.html»
{% extends 'main/layout.html' %}
{% block title %}Главная страница{% endblock %}
{% block content %}
<div class="features">
<h1>Главная страница</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deleniti doloribus officia officiis quam quasi rerum tempore ut voluptates voluptatibus.</p>
<button class="btn btn-warning">На страницу про нас</button>
</div>
{% endblock %}
Посмотреть остальной код можно после подписки на проект!
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию. PS: подобные задания доступны при подписке от 1 месяца
Изучение Python до профи / Основы, Django, TKinter
Комментарии (3)
Мы используем файлы cookie, чтобы улучшить работу и повысить эффективность сайта. Продолжая пользование данным сайтом, вы соглашаетесь с использованием файлов cookie.