]]>eTXT]]>

Сервис анализа и проверки траста xt сайтов в Яндексе

]]>Анализ сайта:]]> Проверка Траста

]]>]]>

Графические маркеры для списка

Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.

Заливаем наш художественный маркер на сервер и запоминаем путь. Пусть это будет images/pulka.jpg

Для формирования нашей картинки вместо дефолтного маркера в файле стилей добавим свойство list-style-image:

 

 ul { list-style-type: circle;
 list-style-image: url(images/pulka.jpg);
	}
 

Получим такой вид списка вместо стандартного:

Использование графических элементов в маркерах

 

В данном примере мы указали стиль типа кружок list-style-type: circle; - это для тех пользователей, у которых браузер не показывает изображения.

Обратите внимание на размер картинки пульки – он не должен быть слишком большим, обычно 10-25 пикселей.

 

В некоторых случаях графическое изображение добавляется через background.

Пример кода:

 

 background:url(images/pulka.jpg) no-repeat; 

 

 

Полный код ul li для вставки пользовательской картинки в качестве маркера:

 

  ul li{border-top:1px solid #c8c8c8; list-style-type:none; padding:10px 0px 0px 12px; background:#fff url(images/pulka.jpg)  no-repeat} 

 

Свойства списков css:

border-top – линия вокруг рамки (толщина, цвет, стиль – solid);

list-style-type – внешний вид., тип маркера.

Padding – отступы от содержимого сверху, снизу, справа, слева.

Background – фон в списке.

 

Не обязательно использовать их все.

 

Код для большого изображения в качестве маркера списка. Как убрать маркеры списка css.

 

          ul {
	  margin-left:10px;
	  padding-left:0px;
	  list-style:none;
	}
	li {
	  padding:0.5em 0 0.5em 54px;
	  font: 1.3em/1.6 Verdana, Arial, sans-serif;
	  background:url(maxpulka.png) no-repeat;
	}

 

Для того, чтобы в листе стилей css убрать точки в списке, используем list-style:none;.

В этом примере в качестве маркера используется большая картинка, к примеру 50 на 50 пикселей. Принцип такой: удаляем дефолтный маркер (list-style:none;), готовим место для большого изображения при помощи задания отступов, вставляем свой маркер (background:url(maxpulka.png) no-repeat;).

 

Если вас заинтересовали уроки css, то потренируйтесь с  расширенным вариантом курса от Евгения Попова.

 


Полный курс «Css практика»

]]>Видеокурс]]>

 

 

 

Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы. 

Для тех, кто хочет очень быстро научиться трюкам css стилей, ]]>рекомендую]]> расширенный курс "CSS практика" Евгения Попова.

 

 

 


На эту тему вы можете прочитать следующие обучающие статьи:

Отступ списка css.

Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.

Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.

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

 

Tags: 

Обновления SEO-руководств "SEO Винчестер" и "SEO Коллайдер" на момент июня 2018 года с учетом всех последних изменений алгоритмов ПС.

Предлагаю для своих читателей  50% скидку на любую книгу без ограничения по времени!

Для получения скидки и обеих книг пишите напрямую Михаилу Шакину на globatorseo@gmail.com С КОДОМ master-live.ru  

Обе книги по 80 страниц каждая практики. Всего 160 страниц. 

Винчестер - это эффективные методы оптимизации коммерческих сайтов. 

Коллайдер - 20 методов продвижения, которые использует на практике Михаил Шакин. Очень подробно про ссылочное. При этом о многих наработках он нигде не писал для открытого доступа.

Навигатор по интернету

Узнать простую, но эффективную систему для наращивания трафика. Плюс эта книга с правами перепродажи. 

Узнать подробнее!

Создание сайта

Сделать веб-сайт по приемлемым ценамЗаказать создание сайта под ключ. Цена: недорого.





* Нажимая на кнопку "Отправить" я соглашаюсь с политикой конфиденциальности