чилка HTML
 
Каскадные таблицы стилей (CSS)

Стилевые параметры списка

 

Параметры стиля Значение Описание
list-style-image
(URL-адрес графического изображения маркера)
noneпо умолчанию или URL-адрес.
Пример:
ul {list-style-image: url(images/marker.gif);}
list-style-position
(положение маркеров элементов списка)
outsideпо умолчанию - вне тела списка
insideвнутри тела списка
list-style-type
(вид маркера)
noneпусто
Пример:
<ul style="list-style:none">
circleокружность
discпо умолчанию - темный круг
squareквадрат
decimalдесятичный номер
lower-alphaстрочные буквы
upper-alphaпрописные буквы
lower-romanмаленькие римские цифры
upper-romanбольшие римские цифры
list-style
(позволяет задать значения сразу всех или некоторых параметров, описанных выше)
значения указываются через пробелвад_маркера  положение  URL-адрес
Как увеличить расстояние между элементами списка?
Пример:   li { margin-top: 1em; }

 

Как разместить элементы списка горизонтально.
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню.
В таком случае к селектору <LI> следует добавить стилевое свойство display со значением inline, оно преобразует блочный элемент в строчный.

Пример 1

<style>
ul.meny {margin: 0; padding: 4px;}
ul.meny li {
display: inline;    /* Отображать как строчный элемент */
margin-right: 5px;
border: 1px solid #000000;
padding: 5px;
}
</style>

<ul class="meny">
<li>Ссылка 1</li> <li>Ссылка 2</li> <li>Ссылка 3</li> <li>Ссылка 4</li> <li>Ссылка 5</li>
</ul>

Результат

  • Ссылка 1
  • Ссылка 2
  • Ссылка 3
  • Ссылка 4
  • Ссылка 5

 

Как разместить элементы списка в колонки.
Чтобы разместить элементы списка в несколько колонок, надо использовать тэг <columns>

Пример 2
  1. Расположение ссылок в 4 колонки
  2. Расположение ссылок в колонки автоматически
  3. Расположение текста в 2 колонки



Результат

Сылки А: Сылки Б: Сылки С:
Текст:
Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript.

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.
Ссылка на статью >>>

 

 

 

Copyright © Москва
Училка HTML: сайт  u4ilka.kcbux.ru