Красивый список

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

Двухцветный список

Двухцветный список: код в html


Двухцветный список: код в CSS


Сначала придаем всему списку (тег ul с уточнением по block2 потому, что на странице предполагаются и другие блоки) голубой цвет фона. Голубой цвет захватит и маркеры списка. Ну а потом для элементов списка li пропишем красный фон, который окрасит только текстовое поле.
Вот так решается эта задача. На голубой сверху накладывается частично красный.

body{
font-family:’PT Sans’, sans-serif;
}

.block2 ul
{
background:#3498db;
}
.block2 li
{
background: #E74C3C;
}

Каждый элемент списка в рамочку


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

Каждый элемент списка в рамочку: код в html


Каждый элемент списка в рамочку: код в CSS


Сначала придадим рамочку и отступы обоим спискам сразу через свойства для тега ul. И потом пропишем наследование этих самых свойств элементам li второго списка second-list.

ul{
margin: 5px;
padding: 5px;
border: 1px solid #666;
list-style: none;
}
.second-list li
{
border: inherit;
margin: inherit;
padding: inherit;
}


Leave a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Загрузка...
Menu Title