]]>eTXT]]>

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

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

]]>]]>

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

Для того, чтобы получился отступ слева, нужно добавить свойство margin-left к селектору ul или ol.

 

Изменим немного этот код и сделаем вывод списка с отступом от края страницы:

 

 ul { list-style-type: circle;
 list-style-image: url(images/red_marker.jpg);
 padding: 0; /* Убираем поля */
    margin-left: 200px; /* Отступ слева */
	}
 

Получаем смещенный список от левого края. Это вертикальный список css.

Посмотрите скрин:

Отступ списка css слева

 

Если нужно вывести список справа веб-страницы, то используйте свойство float для селектора ul  - ul {float:right;}

 

Например, так выглядит список, если вставим в лист стилей эти строки:

 

ul {float:right;  }
li {list-style-type: square; color: #FF0000; }
span { color: #0000FF;}
  

Вывод списка на веб-странице справа

Нужно увеличить расстояние от маркера до текста

 

Для этого между маркером списка и текстом применяется свойство padding-left для селектора li.

Прописываем стили:

 

 ul {list-style-type: square;   }
li {color: #FF0000; padding-left: 10px;}
span { color: #0000FF;}
 

И смотрим результат с расстоянием между маркером и текстом в 10 px:

Пример расстояния между маркером и текстом

 

Как выводить список в рамке

 

В селектор ul добавить стилевое свойство list-style-position: inside; и цвет, толщину рамки через сво-во border. Пример:

 

 ul {list-style-type: square; width: 300px;
 border: 2px solid #0000FF;
list-style-position: inside; }
li {color: #FF0000; padding-left: 10px;}
span { color: #0000FF;}
 

Посмотрите на внешний вид:

Список, оформленный в рамку.

Свойство list-style-position может иметь два значения:

inside — внутри блока;

outside — снаружи блока.

 

Для закругления углов и использования теней в селектор ul нужно добавить свойства border-radius и box-shadow.

Например:

 border-radius: 5px;
box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;
 

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

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

 

 

 

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

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

 

Прочтите еще статьи на эту тему:

Как изменить маркер списка CSS. 

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

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

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

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

 

Tags: 
Все для сайтов: 

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

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

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

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

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

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

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

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

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

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

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





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