Создание списков в HTML

Для того чтобы на странице интернет ресурса можно было отобразить маркированный список, в HTML предусмотрены теги <ul> и <li>. Между тегами <ul> помещаются элементы списка начинающиеся с тега <li>.

Пример простого списка


HTML

<ul>
	<li>маркированный список</li>
	<li>выравнивание списка</li>
	<li>маркеры с помощью тегов</li>
</ul>

Примеры списков заданных стилями

Маркеры в виде диска


HTML

<div class="list-disc">
	<ul>
		<li>маркеры в виде диска</li>
		<li>маркеры списков</li>
		<li>списки с дисковыми маркерами</li>
	</ul>
</div>

Маркеры в виде окружности


HTML

<div class="list-circle">
	<ul>
		<li>создание списков</li>
		<li>кольцевые маркеры</li>
		<li>оформление списка</li>
	</ul>
</div>

Маркеры квадратные


HTML

<div class="list-square">
	<ul>
		<li>списки с маркерами</li>
		<li>квадратные маркеры</li>
		<li>списки с квадратными маркерами</li>
	</ul>
</div>

Маркеры в виде картинки


HTML

<div class="list-marker">
	<ul>
		<li>маркеры  списков в виде картинки</li>
		<li>картинки в виде маркеров</li>
		<li>оформление списка красивыми маркерами</li>
	</ul>
</div>


CSS

.list-disc,
.list-circle,
.list-square,
.list-marker
{
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 2px;
	padding-top: 17px;
	padding-bottom: 17px;
}
.list-disc li {
	list-style-type: disc;
	margin-left: 48px;
}
.list-circle li {
	list-style-type: circle;
	margin-left: 48px;
}
.list-square li {
	list-style-type: square;
	margin-left: 48px;
}
.list-marker li{
	text-indent: 24px;
	margin-left: 28px;
	list-style-type: none;
	background-repeat: no-repeat;
	background-image: url(arrow.png);
}

CSS стили для создания списков