Все о HTML и CSS

Здесь вы найдете много полезной информации о том как построить собственный сайт, как правильно верстать Web страницы, а также освоите множество приемов и трюков которые можно выполнить при помощи CSS, без использования Java-скриптов. Данный сайт будет полезен как новичку, так и опытному Web Мастеру.

Приветствую Вас Гость | Регистрация | Вход
МЕНЮ
КАЛЕНДАРЬ
«  Апрель 2009  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
27282930
КАТЕГОРИИ УРОКОВ
HTML [8]
Тут уроки только по HTML
CSS [15]
Уроки только по CSS
Верстка дизайнов [0]
Верстка собственных дизайнов
Статьи [9]
Статьи о веб дизайне и не только
Скрипты [82]
Скрипты CSS
Ставим в начало <li> свои картинки
Наверняка вы часто видили, как на сайтах, в списках, типа меню, построенных на тегах ul и li стоят не некрасивые кружки, а какие то симпотичные иконочки.
Сейчас я расскажу как вы можете легко и быстро изменить некрасивый кружок (либо просто спрятать его вовсе).
Напишем стандартный код:

Code

<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>

Эти самые кружки меняются очень просто:
В ваш файл с CSS пишем следующее:

Code

ul.ur {
  list-style: none;
  margin: 0 0 0 0;
  padding-left: 0px;
}

Определим для нашего списка класс:
Code

<ul class="ur">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>

Этим мы пока лишь только убрали этот черный кружек и убрали отступ от левого края (margin и padding).
Для того, чтобы появилась наша картинка, пишем в CSS это:

Code

li.mli {
  margin: 0;
  padding: 3px 3px 3px 25px;
  background: url('libg.png') left no-repeat center;
}

В значении padding ключевым является последнее число, т.к. оно отвечает за отступ слова (Главная, Внетренняя) от нашей иконки. left и no-repeat отвечает за прижатие иконки к левой стороне и запрещает повторятся иконке во всех плоскостях.
Для наших тегов li припишим класс:
Code

<ul class="ur">
<li class="mli">Пункт 1</li>
<li class="mli">Пункт 2</li>
</ul>

Вот и все.

ДЕМО

Всем спасибо за внимание и спасибо за ваши коментарии smile

Категория: CSS | Просмотров: 1085 | Добавил: Red_Line666x | 02:00 | Рейтинг: 1.0/1 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 2008-2017 Школа HTML и CSS. Все права защищены.
При копировании материалов с данного сайта, гиперссылка на http://school-html-css.3dn.ru/ ОБЯЗАТЕЛЬНА! Вся информация защищена законами о защите авторских правах.
Полную информацию о копировании материалов читайте в разделе "Правила копирования информации"