Добавляем анимацию на лендинг

Standard

Иногда, при создании лендинга, требуется его не много оживить и придать динамичности. Это очень просто сделать с помощью анимации. Для этого, умные люди создали специальные библиотеки, которые подключаются к сайту и далее с помощью классов можно задавать нужную анимацию для блоков на странице. В первую очередь – это файл animate.css – библиотека, в которой прописаны…

Read More

Как скрывать или отображать нужные элементы в Bootstrap

Standard

Иногда при верстке возникает необходимость скрывать некий блок на маленьких экранах, но наоборот отображать на больших. Сделать это нам помогут нам в этом классы .hidden и .visible Вот, как они работают: Скрываем блок: .hidden-xs Скрывать блок только на устройствах с экраном меньше 768px .hidden-sm Скрывать блок только на устройствах с экраном 768px-992px .hidden-md Скрывать блок…

Read More

Виды контейнеров в Bootstrap

Standard

Разберем какие виды контейнеров существуют в фреймворке Bootstrap. #1 Контейнер с фиксированной шириной — <div class=»container»></div> Данный контейнет имеет горизонтальное выравнивание по центру с помощью свойств margin-left:auto и margin-right:auto Плюс к этому контейнер имеет внутренние отступы слева и справа по 15px с помощью свойств padding-left:15px и padding-right:15px Ширина контейнера зависит от ширины окна браузера: 1170px…

Read More

Выравнивание меню по центру div блока в css

Standard

Допустим у нас есть блок <div>, который отцентрован по горизонтали и имеет ширину 600px. В этом блоке у нас располагается горизонтальное меню, которое сделано посредством списка <ul>. Чтобы выравнять по горизонтали меню, относительно родительского блока <div>, нужно просто к списку меню <ul> применить точно такое же выравнивание, как и у родительского блока. HTML-разметка:

Таблица…

Read More

Горизонтальное меню с помощью тега ul (3 способа)

Standard

Сейчас мы разберемся, как из тега маркированного списка <ul> и его элементов списка <li> создать простое горизонтальное меню для сайта. Тег <ul> используется для создания неупорядоченного списка, это как раз, то что нам нужно, поскольку меню, как раз таки состоит из списка пунктов. <ul> это блочный элемент, поумолчанию его ширина равна 100%, т.е. занимает всю…

Read More

Блочная верстка простейшего макета

Standard

Для того, чтобы разобраться с некоторыми свойствами блоков <div> создадим простейшую разметку сайта, в котором имеется хедер, левая колонка, колонка под контент и футер. Получаем такую разметку:

Здесь наглядно видно, что: <div class=wrapper> — див обертка, в который мы завернули остальные блоки, для того, чтобы их можно было выровнять по центру <div class=left> —…

Read More

Заготовка для проекта с минимальной HTML разметкой

Standard

Для того, чтобы каждый раз при создании нового сайта или верстке макета, не создавать с нуля всю структуру вашего будущего сайта, я советую создать заготовку для проекта. Файловая структура проекта может выглядеть следующим образом: -css //папка со стилями — -fonts // папка со шрифтами — -img // картинки для подключения из css — -style.css //…

Read More