<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

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

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

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

Как создать To Do List на чистом CSS (часть 1)

Как создать To Do List на чистом CSS (часть 1)

Данный To Do List (список дел) на CSS нацелен не на практическое использование, а чтобы показать возможности поля checkbox. Все таки для создания полноценного списка дел, одним CSS не обойтись.

HTML разметка

Разметка состоит из маркированных списков, внутри которых метки с полем типа checkbox, наименования пункта списка и пустой тег span.

<div class="list">
  <h2>To Do List</h2>
  <ul>
    <li>
      <label>
        <input type="checkbox" name="">
        <p>Eat</p>
        <span></span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="">
        <p>Walk</p>
        <span></span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="">
        <p>Work</p>
        <span></span>
              </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="">
        <p>Bath</p>
        <span></span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="">
        <p>Drink</p>
        <span></span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="">
        <p>Sleep</p>
        <span></span>
    </label>
    </li>
  </ul>
</div>


Как создать To Do List на чистом CSS.

CSS код

1) Список в центре

Используя технологию флексбоков для тега body, у нас есть возможность разместить список в центре по вертикали и по горизонтали.

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700;800;900&display=swap');
*{
    margin: 0; / * обнуление отступов * /
    padding: 0; / * обнуление полей * /
    font-family: 'Poppins', sans-serif; / * название шрифта * /
}
body{
    display: flex; / * отображать как flexbox * /
    justify-content: center; / * горизонтальное выравнивание * /
    align-items: center; / * вертикальное выравнивание * /
    min-height: 100vh; / * минимальная высота * /
    background: #C8E6C9; / * цвет фона * /
}


Как создать To Do List на чистом CSS.

2) Оформление списка

.list{
    position: relative; / * относительное позиционирование * /
    background: #fff; / * цвет фона * /
    width: 350px; / * ширина белого блока * /
}
.list h2{
    background: #03a9f4; / * цвет фона для заголовка * /
    color: #fff; / * вертикальное выравнивание * /
    padding: 10px 20px; / * поля для вокруг текста * /
    font-weight: 600; / * толщина шрифта * /
}
.list ul{
    position: relative; / * относительное позиционирование * /
    padding: 20px;
}


Как создать To Do List на чистом CSS.

3) Рисование разделительных линий

.list ul li{
    position: relative; / * относительное позиционирование * /
    list-style: none; / * убираем черные точки * /
    padding: 15px 0; / * отступы между линиями * /
    border-bottom: 1px solid rgba(0,0,0,0.1); / * разделительные линии * /
}
.list ul li:last-child{
    border-bottom: none; / * убираем нижнюю линию * /
}


Как создать To Do List на чистом CSS.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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