На следующем шаге сделаем наш вложенный список не только невидимым, но и несуществующим, а также определим ему относительное расположение в родительском списке в первом элементе. Запишем также в стиле top нулевое значение, чтобы между элементами родительского списка не оказалось какого-либо расстояния большего, чем допустимо. Это будет выглядеть примерно так:
В селекторе ul первая строчка со стилем list-style-image подключает наше собственное изображение в виде крестика, что украсит создаваемый список. А стиль width устанавливает ширину списка. Далее, нам необходимо создать готовый вложенный список в родительском списке. На изображении, поданном ниже, отображена часть нашего списка, иллюстрирующая предлагаемый подход. В первом элементе родительского списка находится вложенный список из восьми элементов. Вложенный список также сделаем неупорядоченным, однако для него в файле стилей мы пропишем none в list-style-image и в list-style-type.
Чтобы создать такой список нам потребуется неупорядоченный список, который создается при помощи тега P<ul>. В этом списке вместо номеров используются обычно маркеры в виде диска, квадратика или окружности. Однако такой маркер можно заменить на собственное изображение. В этом случае в файле стилей с расширением .css надо записать следующее:
У нас должно получиться примерно следующее:
Давайте создадим выпадающий список без использования JavaScript, придав некоторой динамики сайту. Для этого нам понадобятся знания всего лишь основ html и css. Снабдим наш список также небольшими однотипными изображениями, вместо обычных номеров пунктов списка.
12 декабря 2012 года, Размещено в категории:
Делаем выпадающий список с помощью html и css
Делаем выпадающий список с помощью html и css
Комментариев нет:
Отправить комментарий