Css список красивый: Оформление списков ul li для информационных блоков

Нашли ошибку в тексте? Напишите нам.

Типовые решения в вёрстке. Как сверстать простую шапку страницы с меню

Типовые решения в вёрстке

• Вёрстка простой шапки

• Подключение шрифтов

• Обёртка для страницы

• Почему не стоит использовать float

• Простой рецепт колоночной раскладки

Типовые решения в вёрстке

• Вёрстка простой шапки

• Подключение шрифтов

• Обёртка для страницы

• Почему не стоит использовать float

• Простой рецепт колоночной раскладки

Я решил выпустить цикл советов по мотивам работ студентов Школ бюро. Мы рассмотрим решение типовых задач в вёрстке и найдём ответы на самые простые вопросы, возникающие у новичков.

В сегодняшнем совете сверстаем простую шапку «в линию», которая встречается на огромном количестве сайтов, в том числе на сайте бюро.

Макет шапки в Фигме:

Мы будем постепенно разбирать шапку на общие блоки и идти вглубь, к отдельным элементам.

На самом верхнем уровне у нас есть три сущности: логотип, меню и телефон. Логотип всегда лучше делать картинкой, даже если это просто какая‑нибудь надпись. Это нужно, чтобы избежать проблем, например с незагрузившимися шрифтами логотипа.

Накидаем каркас будущей шапки в ХТМЛ:

<header>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</header>

Идём вглубь. Ставим изображение в СВГ с логотипом и делаем его ссылкой на главную страницу:

<header>
  <div>
    <a href="/">
      <img src="logo.svg" />
    </a>
  </div>
  <div>
  </div>
  <div>
  </div>
</header>

Меню по смыслу — вытянутый в линию список.

<header>
  <div>
    <a href="/">
      <img src="logo.svg" />
    </a>
  </div>
  <div>
    <ul>
      <li><a href="/products">Продукция</a></li>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/blog">Блог</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
  <div>
  </div>
</header>

Номер телефона — тоже ссылка, по которой можно позвонить:

<header>
  <div>
    <a href="/">
      <img src="logo.svg" />
    </a>
  </div>
  <div>
    <ul>
      <li><a href="/products">Продукция</a></li>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/blog">Блог</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
  <div>
    <a href="tel:88004000500">8 800 4000 500</a>
  </div>
</header>

Располагаем все три основных блока шапки в линию с помощью флекса:

header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

Теперь разберёмся с меню. Чтобы привести его в порядок, нужно:

• обнулить левый отступ у списка (по умолчанию он всегда задан встроенными стилями браузера),

• вытянуть пункты меню в линию,

• задать отступы между пунктами меню,

• предусмотреть красную плашку под активным пунктом,

• убрать стандартные точки перед пунктами списка,

• стилизовать ссылки.

Ещё нужно заставить меню занимать всё свободное место и прижимать номер телефона к правому краю страницы.

Изучим макет. Отступы между пунктами меню — 40 пикселей:

Ширина отступов от краёв плашки активного пункта меню до текста внутри неё — 10 пикселей по бокам и по 8 пикселей сверху и снизу. Плашку я специально сделал полупрозрачной, чтобы разглядеть красные цифры разметки:

Расстояние от логотипа до меню — 40 пикселей:

Вытягиваем пункты меню в линию, убираем точки, обнуляем отступы со всех сторон — они нам не нужны. Само меню должно занимать всё доступное место — добавляем flex-grow:

. menu {
  flex-grow: 1;
}
.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

В примере мы добавляем плашку с помощью padding со всех сторон — это увеличивает область нажатия ссылки. Если такой эффект не нужен, можно использовать

Задаём отступы между пунктами меню. Ставим 20 пикселей, а не 40, потому что по 10 с каждой стороны отъедает плашка каждого пункта меню. Нам нужно это учесть, чтобы ничего не дёргалось при переключении. У последнего пункта нужно убрать отступ справа, чтобы он не мешался. Саму плашку будем делать у ссылки:

В примере мы добавляем плашку с помощью padding со всех сторон — это увеличивает область нажатия ссылки. Если такой эффект не нужен, можно использовать margin у ссылок, а у активного элемента padding

.menu li {
  margin-right: 20px;
}
.menu li:last-child {
  margin-right: 0;
}
. menu a {
  padding: 8px 10px;
}

Добавляем отступ справа от логотипа в 30 пикселей. В сумме с левым

.logo {
  margin-right: 30px;
}

Добавляем стили плашки активного пункта меню. Тут можно пойти разными путями: поставить класс active у li или у самого элемента с плашкой. Мы пойдём вторым путём. Подразумеваем, что внутри li находится либо ссылка, либо какой‑нибудь элемент с классом active:

.menu a,
.menu .active {  
  display: block;
  padding: 8px 10px;
}
.menu .active {
  color: #fff;
  background-color: #ff3d00;
  border-radius: 8px;
}

Стилизуем ссылки:

.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 18px;
  list-style: none;
}
.menu a,
.menu .active {
  display: block;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: .
 
  27em;
}
.menu a {
  color: #000;
  text-decoration: none;
}

Теперь приведём в порядок номер телефона:

.tel {
  font-size: 20px;
  line-height: 24px;
}
.tel a {
  color: #000;
  text-decoration: none;
}

Всё отлично, кроме одной вещи —  базовые линии текста меню и номера телефона не совпадают из‑за разной высоты блоков:

Опустим меню на пару пикселей, чтобы совпадали:

.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 2px 0 0;
  padding: 0;
  font-size: 16px;
  line-height: 18px;
  list-style: none;
}

В блоке menu у нас нет ничего, кроме самого списка ul. Можно избавиться от лишнего div и дать класс menu сразу списку. Но мне больше нравится вариант заменить div.menu на nav.menu, так будет семантичнее.

С логотипом и телефоном примерно та же история, но ссылки — строчные элементы и ставить их рядом с блочными не стоит. Поэтому оставим обёртки логотипа и телефона как есть.

Мы пока не выбрали и никак не настроили шрифты. В следующем совете разберём разные варианты подключения своих шрифтов к странице.

Что ещё почитать

• Block‑level elements

• Inline elements

• HTML5 Semantic Elements

• <nav>: The Navigation Section element

• The current state of telephone links

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Свежак

Форматирование списка определений

С возвращением «семантической разметки» люди снова ищут какой правильный тег использовать для разных типов информации. Например, неупорядоченные списки для навигации и таблицы только там, где абсолютно необходимо. Один из часто упускаемых из виду вариантов разметки глоссарии и списки определений — это сам атрибут dl.

Список определений (DL)

Мы знаем, как выглядит основной вывод DL — не очень привлекательный — именно поэтому они редко используются веб-мастерами. Здесь вы можете увидеть неформатированный список с примерным содержимым:

первый элемент

определение для первого элемента в списке

второй предмет

определение второго элемента в списке
, занимающее более одной строки

третий предмет

определение для третьего элемента в списке

Есть два варианта добавления форматирования. Во-первых, начните добавлять теги HTML, такие как , для термина данных (dt) и, возможно, меньший размер шрифта или курсив для «данных определение» (дд). Но мы можем сделать все это и многое другое намного лучше с помощью CSS.

Пример 1

Давайте начнем с простых стилей CSS:

дт { вес шрифта: полужирный; оформление текста: подчеркивание; } дд { маржа: 0; заполнение: 0 0 0. 5em 0; }

Наш простой список теперь выглядит немного иначе. Отступ был удалены, некоторые вертикальные отступы вставлены, а термины данных были полужирный и подчеркнутый:

первый элемент

определение для первого элемента в списке

второй предмет

определение второго элемента в списке
, занимающее более одной строки

третий предмет

определение для третьего элемента в списке

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

Пример 2

В первом примере мы просто возились с краями того, что возможно с помощью CSS. В этом примере используется немного более сложный код для еще больше улучшите внешний вид списка:

дл { граница: 3px двойной #ccc; набивка: 0,5 см; } дт { плыть налево; ясно: слева; ширина: 100 пикселей; выравнивание текста: вправо; вес шрифта: полужирный; цвет: зеленый; } дт:: после { содержание: ":"; } дд { поле: 0 0 0 110 пикселей; заполнение: 0 0 0. 5em 0; }

Теперь список выглядит так, как если бы элементы были помещены в таблицу:

первый элемент

определение для первого элемента в списке

второй предмет

определение для второго элемента в списке
распространяется более чем на одну строку

третий предмет

определение для третьего элемента в списке

Даже самый скептически настроенный веб-мастер теперь должен начать переосмысливать их положение.

Преимущества форматирования CSS по сравнению с HTML

Так почему мы снова это делаем? Причин несколько:

отделение содержания от форматирования

это «Святой Грааль» для программистов css. Как показано на такие сайты как css Zen Garden, разделение означает, что внешний вид сайта может быть радикально изменен без изменений в основном HTML-коде.

оптимизирован для поисковых роботов

стоит быть дружелюбным с пауками, так как это единственный способ получить чтобы ваш сайт отображался на страницах результатов поисковых систем (SERP). Чем больше продвинутые пауки теперь начинают обращать внимание на как содержание размечены и как эта информация может быть включена в их алгоритмы поиска.

экономит пропускную способность

вы также уменьшаете количество HTML, требуемого каждый раз, когда список представлены. Если CSS получен из внешнего файла, то он имеет только загрузить один раз, а браузер может использовать кешированную версию для последующих страницы.

Может потребоваться некоторое время, чтобы «очистить» существующий код HTML и конвертировать списки и другие элементы в CSS, но преимущества теперь и продолжающиеся делают это стоящим.

Использование Flexbox

Вот еще два примера макета, на этот раз с использованием CSS Flexible Box Layout, который дает нам кое-что как ТАБЛИЦА, только более гибкая:

первый элемент

определение для первого элемента в списке

второй предмет

определение для второго элемента в списке
распространяется более чем на одну строку

третий предмет

определение для третьего элемента в списке

Стили CSS:

А здесь у нас горизонтальная раскладка. Это не так аккуратно, так как мы должны определить высоту для DL, а количество элементов, которые могут отображаться в виде столбцов, ограничено, если только вы не хотите, чтобы они прокручивались горизонтально:

первый элемент

определение для первого элемента в списке

второй предмет

определение второго элемента в списке
, занимающее более одной строки

третий предмет

определение для третьего элемента в списке

Стили CSS:

Во всех случаях разметка HTML идентична.

< CSS

17+ Красивые календари CSS [Примеры]

Календари чрезвычайно полезны для многих вещей. Мы постоянно видим их в наших учетных записях электронной почты, записываясь на встречи и назначая встречи. Как и в случае с некоторыми элементами ввода HTML, для полностью рабочего календаря не существует варианта по умолчанию, поэтому вам нужно создать его самостоятельно с помощью HTML и CSS.

К счастью, в этой статье мы подготовили для вас удивительный список готовых CSS-календарей. Вы можете использовать их бесплатно и адаптировать по своему усмотрению. Это коллекция из 90 155 календарей HTML и CSS 9.0156 с различными функциями и стилями.

Начинаем!

Все структурировано с использованием HTML, некоторые примеры ориентированы на разные решения, чем другие, поэтому ожидайте найти простые и более сложные календари CSS. Некоторые даже используют JavaScript для дополнительной функциональности.

1. Адаптивный календарь в темной тематике

См. перо на КодПене.

Открыть CodePen

Симпатичный CSS-календарь в темной тематике, обладающий некоторой функциональностью благодаря добавленному JavaScript.

Вы можете переключаться между месяцами года и наводить курсор на каждый день месяца. Он даже увеличивается с годами, когда вы переключаетесь между месяцами, и вы можете переходить туда и обратно.

CSS также имеет свои собственные именованные переменные, поэтому будет легко редактировать стиль и цвета, если вам нужно, чтобы они соответствовали вашему собственному брендингу.

2. Календарь CSS на основе событий

См. перо на КодПене.

Открыть CodePen

Календарь предстоящих событий, основанный на HTML и CSS, имеет несколько интересных функций. Во-первых, в календаре достаточно места, чтобы показать 3 месяца в целом, вы можете переключаться между другими 3 месяцами с помощью стрелок, и есть несколько примеров установленных событий.

Перейдя к следующим нескольким месяцам, вы можете увидеть несколько примеров событий в календаре, выберите их, чтобы увидеть подробности события внизу. В один день даже бывает несколько событий.

Легко прочитать код JavaScript и увидеть, как программно можно добавить больше собственных событий и как генерируется сам календарь.

3. Полноэкранный CSS-календарь, созданный с помощью Flexbox

См. перо на КодПене.

Открыть CodePen

Этот CSS-календарь намного больше, чем многие из приведенных здесь примеров, почти во весь экран и выглядит потрясающе. Очевидно, вы могли бы изменить фон градиента на что-то другое или просто взять сам календарь.

Не так много функций в этом, как в других, но структура и формат доступны для использования и отлично сочетаются с вашими собственными функциями JavaScript.

4. Шаблон календаря Tailwind CSS

См. перо на КодПене.

Открыть CodePen

Этот календарь основан на очень популярной и гибкой структуре CSS под названием Tailwind. Из примера видно, что имеется только чистая HTML-структура, а все стили выполняются непосредственно в строке с использованием классов CSS Tailwind.

Tailwind — это CSS-фреймворк внешнего интерфейса, который отлично подходит для создания пользовательского интерфейса и стилизации различных элементов. Как видно из этого примера, он выглядит очень профессионально.

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

5. Календарь HTML и CSS

См. перо на КодПене.

Открыть CodePen

Календарь только на чистом HTML и CSS. Функционала нет, но есть классные эффекты, к которым можно добавить функционал. Например, эффекты наведения на числа и тот факт, что вы также можете выбирать и отменять выбор чисел.

Вы можете получить другие идеи для эффектов наведения, просмотрев эти 10 эффектов наведения кнопок CSS.

В качестве примера выбрано число 18, и вы можете увидеть его по окружности, но вы также можете выбрать его снова.

Стрелки для переключения месяцев не работают, но они имеют тонкие эффекты наведения на них, что приятно видеть.

6. Полностью функциональный Tailwind CSS и календарь AlpineJS

См. перо на КодПене.

Открыть CodePen

Основанный на Tailwind и AlpineJS, у нас есть действительно прекрасный пример работающего календаря CSS с множеством встроенных замечательных функций.

Во-первых, вы можете переключаться между месяцами, текущий день предварительно выбран для вас, показывая вам, какой текущий день. Нажав на число, вы можете создать новое событие для этого дня.

При создании события оно сохраняется в HTML и отображается как событие. Нет кнопки редактирования, но вы можете легко добавить это. И не потребуется много времени, чтобы извлечь данные о событии и отправить их на сервер.

7. Годовой календарь Bootstrap

См. перо на КодПене.

Открыть CodePen

Bootstrap — это популярная среда пользовательского интерфейса CSS, и здесь у нас есть фантастический пример того, что вы можете с ней сделать.

Календарь на год, который использует весь экран для отображения всего. Годы можно переключать с помощью основных стрелок, и есть несколько примеров событий, на которые вы можете навести курсор, чтобы увидеть краткое описание.

Каждая дата имеет эффект наведения, но при клике нет никаких функций JavaScript. Однако вы можете легко добавить к этому JavaScript.

8. Значок календаря CSS

См. перо на КодПене.

Открыть CodePen

Что-то немного другое, но очень полезное и интересное. Все еще тип календаря, но он показывает только дату и месяц.

Этот тип календаря CSS удобен для отображения в начале сообщения в блоге или статьи, используя его как способ отображения даты публикации. Изменить дату и месяц в HTML очень просто.

9. Значок календаря попутного ветра

См. перо на КодПене.

Открыть CodePen

Значок календаря CSS, основанный на платформе Tailwind CSS.

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

10. Годовой календарь HTML и CSS

См. перо на КодПене.

Открыть CodePen

Годовой календарь на чистом HTML и CSS. Отлично подходит для отображения целого года в большом формате.

Каждый год отображается как отдельная секция, прокрутите вниз, чтобы увидеть больше лет. Имеет некоторый JavaScript для целей рендеринга.

11. Календарь CSS и JavaScript

См. перо на КодПене.

Открыть CodePen

Очевидно, что здесь используется HTML, но все это отображается с помощью JavaScript. Визуализируемая таблица создается кодом JavaScript при загрузке страницы.

Интересный подход к этому, но вы можете ясно видеть, как класс JS генерирует таблицы и превращает календарь в годовой календарь. Отличный ресурс для обучения!

12. Красочный календарь CSS

См. перо на КодПене.

Открыть CodePen

Замечательный и очень красочный календарь, созданный только с помощью HTML и CSS.

В нем есть очень интересные функции и эффекты, переходы и скользящая анимация между месяцами.

В целом очень впечатляет то, что для реализации всех эффектов используется только анимация CSS, дополнительный JavaScript не требуется. Щелкните даты и просмотрите список почасовых событий для данного дня.

13. Календарь на основе сетки CSS

См. перо на КодПене.

Открыть CodePen

Красивый календарь на основе столбцов, который использует сетку CSS в качестве решения для отображения этого по сравнению с чем-то вроде CSS flexbox.

Макет здесь отличный, и он напоминает что-то вроде Gmail и его календаря, без функциональности JavaScript, но вы можете легко добавить это, по крайней мере, у вас есть макет/шаблон, с которым вы можете работать.

В CSS даже есть приятные переменные, которые можно использовать для изменения стиля и цвета элементов.

14. Календарь с анимацией перелистывания

См. перо на КодПене.

Открыть CodePen

Прикольный полурабочий календарь с анимацией перелистывания, которая переходит в вид, и можно добавить событие календаря.

К этому нужно добавить некоторые дополнительные функции, такие как сохранение нового события и его отображение в календаре, но шаблон и структура уже есть.

15. Виджет календаря

См. перо на КодПене.

Открыть CodePen

Компактный календарь в виде виджета. Легко редактируйте параметры стиля в CSS с помощью переменных, чтобы они соответствовали вашему брендингу.

Не полностью функциональный, но хороший шаблон, щелкните по дате, и появится красивое маленькое текстовое поле, которое можно использовать для добавления события.

16. CSS-шаблон ежедневного календаря

См. перо на КодПене.

Открыть CodePen

Никакой функциональности, но это отличный шаблон и пользовательский интерфейс, к которому можно добавить функциональность. В нем есть много элементов, к которым вы можете добавить функциональность, например, переключатель года, индикатор событий дня и вся информация с левой стороны.

В целом, хороший шаблон, который вы можете использовать и добавить в него свои собственные функции JavaScript.

17. Значок календаря и часов

См. перо на КодПене.

Открыть CodePen

Современный и красивый значок календаря, отлично подходит для блогов и в начале статьи.

В этом примере даже рабочие часы, наведите указатель мыши на дату, а затем щелкните ее и удерживайте, чтобы увидеть время.

Аккуратный и полностью рабочий, что приятно видеть.

18. Материал Календарь на основе пользовательского интерфейса

См. перо на КодПене.

Открыть CodePen

Современный минималистичный календарь с причудливой анимацией CSS.

Щелкайте по стрелкам переключения месяцев и наблюдайте плавную смену анимации между месяцами.