Skip to main content

Лекция 1

Начнем с главной страницы. Главная страница будет состоять из нескольких блоков.

  1. Верхний уровень. В котором присутствует навигационное меню.
  2. Заголовок.
  3. Основная часть, состоящая из нескольких постов.
  4. Нижний колонтитул

В файле index.html это будет выглядеть так:

<!DOCTYPE html>
<script src="https://cdn.tailwindcss.com"></script>

<section>
    
<nav></nav>

<header></header>

<main></main>

<footer></footer>

</section>

Добавим логотип в блок nav. Для этого разместим внутри изображение. Так как изображение у нас будет отображаться в верхнем левом углу, как и весь дальнейший контент, сделаем небольшой отступ для всей секции. px и py делают отступ слева и справа и соответственно сверху и снизу на 1.5 и 1 rem. Если вы работаете в vs code и используете live server, то для автоматического применения изменений при сохранении необходимо добавить теги head или body.

Обратите внимание, что px (padding x) и py (padding y) это классы библиотеки tailwind.

Режим отладки браузера

logo_small_html.pngrem.png

<!DOCTYPE html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<section class="px-6 py-4">

<nav>
    <img src="/images/logo_small.png" alt="My logo">
</nav>

<header></header>

<main></main>

<footer></footer>

</section>

В навигационном меню у нас будет ссылка на какую либо страницу и дополнительная кнопка. Разместим эти два элемента в одном меню, где логотип будет слева, а все остальное справа. Вынесем логотип в div. Div это блочный элемент и он будет занимать все доступное ему пространство (содержимое тега nav):

<div>
    <a href="/">
    <img src="/images/logo_small.png" alt="My logo">
    </a>
</div>

<div>
<a href="/">Home Page</a>
<a href="#">Subscribe For Updates</a>
</div>

Добавив классы мы выровняем div в одну строку и разделим их между собой:

<nav class="flex justify-between items-center">

Для текста ссылки используем заглавные буквы, выделение и размер текста. Ссылку на подписку изменим так, чтобы у нее был синий фон, отступ слева, закругленный фон, размер текста, толщину, цвет, заглавные буквы и отступ со всех сторон, что даст возможность увеличить эффект закругленной кнопки, а точнее ее "размер".

<nav class="flex justify-between items-center">

<div>
    <a href="/">
    <img src="/images/logo_small.png" alt="My logo">
    </a>
</div>

<div>
<a href="/" class="text-xs font-bold uppercase">Home Page</a>
<a href="#" class="bg-blue-500 ml-3 rounded-full text-xs font-semibold text-white uppercase px-3 py-4">Subscribe For Updates</a>
</div>

</nav>

Следующим разделом будет header.

mt-10 (margin-top, отступ сверху).

mx-auto (автоматический отступ слева и справа) 

text-4xl Размер (шрифта)

inline-flex (выровнять текст и картинку в одну строку)

<header class="mt-10 text-center"> 

    <div class="max-w-4xl mx-auto">
            <h1 class="text-4xl">
                Добро пожаловать на <span class="text-blue-500">новый</span> блог!
            </h1>
            <h2 class="inline-flex items-center">
                Тестовая версия блога. <img src="./images/logo_small.png">
            </h2>
    </div>

</header>

 

Back to top