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

Как создать 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 (часть 1)

CSS код

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

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


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;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 (часть 1)

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 (часть 1)

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 (часть 1)

Источник

Читайте также