<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как сделать аккордион на чистом CSS3.

Как сделать аккордион на чистом CSS3.

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

Нам понадобятся всего лишь 2 файла: index.html и style.css

Давайте откроем файл index.html и пропишем следующее:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css target</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
   <ul class="accordion">
    <li>
     <a href="#first" class="accordion-header">Первый</a>
     <div class="accordion-content" id="first">
      <p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p>
     </div>
    </li>
    <li>
     <a href="#second" class="accordion-header">Второй</a>
     <div class="accordion-content" id="second">
      <p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p>
     </div>
    </li>
    <li>
     <a href="#third" class="accordion-header">Третий</a>
     <div class="accordion-content" id="third">
      <p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p>
     </div>
    </li>
   </ul>
  </div>
</body>
</html>

Итак, что это все значит? Давайте разбираться. В начале файла мы, конечно же, подключаем наши стили. Дальше мы создаем блок с классом .container, который будет содержать ненумерованный список с 3 элементами. Эти 3 элемента и будут наш аккордион. Внутри каждого из них есть ссылка(заголовок), при клике по которой будет показываться наш текст из блока с классом .accordion-content.

Разметка довольно простая, думаю, тут все понятно.

Переходим к самому интересному - стилям.

Тут у нас тоже ничего сложного нет, однако требует понимания.

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
}

.accordion {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.accordion-header {
  display: block;
  padding: 15px 20px;
  background: #bbb;
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,.1);
  margin-bottom: 5px;
  font-family: sans-serif;
}

.accordion-content p {
  margin: 0 0 20px 0;
}

.accordion-content {
  padding: 0;
  height: 0;
  overflow: hidden;
}

.accordion-content:target {
  height: auto;
  padding: 20px;
}

В начале мы убираем отступы у тега body.

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

Нашему списку указываем ширину, отступы и убираем кружки.

Начинаем делать заголовок. Делаем его блочным, задаем отступы, цвет, шрифт, тени и т.д.

Для лучшей читабельности задаем отступ у нашего параграфа.

А вот теперь самое интересное. По умолчанию мы убираем все отступы, делаем высоту равную 0px и добавляем свойство overflow, чтобы скрыть контент, а когда на наш блок начинают ссылаться, мы все возвращаем на место, используя псевдокласс target.

Вот так все просто. Теперь откройте страницу в браузере и после имени файла введите один из трех наших тегов. Например:

http://site.local/index.html#first

И у вас откроется первый блок с контентом.

Понятно, что пользователь так делать не будет, поэтому в html коде мы сделали ссылки такого вида: #first, #second, #third и задали им соотвествующие идентификаторы в атрибуте id у блоков с контентом.

Думаю, вы поняли, какие возможности нам дает HTML5 и CSS3, поэтому его нужно срочно изучать прямо сейчас, чтобы не отстать от времени, а в этом вам поможет видеокурс HTML5 и CSS3 с Нуля до Гуру

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.