path: root/files/ru/learn/css/styling_text/стилизация_списков/index.html

---
title: Стилизация списков
slug: Learn/CSS/Styling_text/Стилизация_списков
translation_of: Learn/CSS/Styling_text/Styling_lists
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>

<p class="summary"><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Списки</a>, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные натройки CSS, о которых вы должны знать. В этой статье они все описываются.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Требования:</th>
   <td>
    <p>Базовая компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS основы по тексту и шрифтам.</a></p>
   </td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Познакомиться с лучшими практиками и свойствами по стилизации списков.</td>
  </tr>
 </tbody>
</table>

<h2 id="Пример_простого_списка">Пример простого списка</h2>

<p>Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступен на Github</a> (проверьте также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">источник кода</a>.)</p>

<p>HTML для нашего примера списка представлен ниже:</p>

<pre class="brush: html">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Hummus&lt;/li&gt;
  &lt;li&gt;Pita&lt;/li&gt;
  &lt;li&gt;Green salad&lt;/li&gt;
  &lt;li&gt;Halloumi&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;Ingredient description list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;dl&gt;
  &lt;dt&gt;Hummus&lt;/dt&gt;
  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
  &lt;dt&gt;Pita&lt;/dt&gt;
  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
  &lt;dt&gt;Halloumi&lt;/dt&gt;
  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
  &lt;dt&gt;Green salad&lt;/dt&gt;
  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
&lt;/dl&gt;</pre>

<p>Если вы перейдете к живому примеру прямо сейчас и изучите элемент списка используя <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика браузера</a>, то вы заметите несколько стилей установленных по умолчанию:</p>

<ul>
 <li>Элементы {{htmlelement("ul")}} и {{htmlelement("ol")}} имеют верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>) и {{cssxref("padding-left")}} <code>40px</code> (<code>2.5em</code>.)</li>
 <li>Объекты списка (элементы {{htmlelement("li")}}) не имеют заданных значений по умолчанию для интервалов.</li>
 <li>Элемент {{htmlelement("dl")}} имеет верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>), но padding не задан.</li>
 <li>Элементы {{htmlelement("dd")}} имеют {{cssxref("margin-left")}} <code>40px</code> (<code>2.5em</code>.)</li>
 <li>Элементы {{htmlelement("p")}} которые мы включили для ссылок (сноски) имеют верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>), точно так же, как и различные типы списков.</li>
</ul>

<h2 id="Управление_интервалами_списков">Управление интервалами списков</h2>

<p>При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">законченный стилизированный пример</a> на Github, а также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">найти исходный код</a>.)</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">CSS, используемый для оформления текста и интервалов, выглядит следующим образом:</span></span></p>

<pre class="brush: css">/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Description list styles */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}</pre>

<ul>
 <li>Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.</li>
 <li>Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.</li>
 <li>Правило 4 задает одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.</li>
 <li>Правила 5 и 6 применяются к списку описаний — мы задаем одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! <span class="tlid-translation translation" lang="ru"><span title="">Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.</span></span> <span id="cke_bm_126E" style="display: none;"> </span></li>
</ul>

<h2 id="Стили_специфичные_для_списков">Стили специфичные для списков</h2>

<p>Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов {{htmlelement("ul")}} или {{htmlelement("ol")}}:</p>

<ul>
 <li>{{cssxref("list-style-type")}}: задает тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.</li>
 <li>{{cssxref("list-style-position")}}: управляет будет ли маркер появляется внутри пунктов списка или <span class="tlid-translation translation" lang="ru"><span title="">вне их перед началом каждого элемента.</span></span></li>
 <li>{{cssxref("list-style-image")}}: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.</li>
</ul>

<h3 id="Стили_маркеров">Стили маркеров</h3>

<p>Как указано выше, свойство {{cssxref("list-style-type")}} позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:</p>

<pre class="brush: css">ol {
  list-style-type: upper-roman;
}</pre>

<p>Это дает нам следующий вид:</p>

<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.</span></span></p>

<h3 id="Позиция_маркера">Позиция маркера</h3>

<p>Свойство {{cssxref("list-style-position")}} устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — <code>outside</code>, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.</p>

<p>Если вы установите значение на <code>inside</code>, то маркеры будут находиться внутри строк:</p>

<pre class="brush: css">ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}</pre>

<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>

<h3 id="Использование_пользовательского_изображения_как_маркер">Использование пользовательского изображения как маркер</h3>

<p>Свойство {{cssxref("list-style-image")}} позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:</p>

<pre class="brush: css">ul {
  list-style-image: url(star.svg);
}</pre>

<p><span class="tlid-translation translation" lang="ru"><span title="">Однако это свойство немного ограничено с точки зрения управления позициями</span></span>, размерами (и т.д.) маркеров. <span class="tlid-translation translation" lang="ru"><span title="">Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле </span></span><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">А пока вот вам образец для дегустации!</span></span></p>

<p>В нашем законченном примере мы оформили неупорядоченный список следующим образом (<span class="tlid-translation translation" lang="ru"><span title="">поверх того, что вы уже видели выше</span></span>):</p>

<pre class="brush: css">ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}</pre>

<p>Мы сделали следующее:</p>

<ul>
 <li>Установили {{cssxref("padding-left")}} элемента {{htmlelement("ul")}} с <code>40px</code> по умолчанию на <code>20px</code>, затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.</li>
 <li>Установили {{cssxref("list-style-type")}} на <code>none</code>, для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства {{cssxref("background")}} для управления маркерами.</li>
 <li>Вставили маркер в каждый пункт неупорядоченного списка. <span class="tlid-translation translation" lang="ru"><span title="">Соответствующие свойства, следующие:</span></span>
  <ul>
   <li>{{cssxref("background-image")}}: <span class="tlid-translation translation" lang="ru"><span title="">Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.</span></span></li>
   <li>{{cssxref("background-position")}}: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим <code>0 0</code>, что значит что маркер будет появляться в самом верху слева каждого пункта списка.</li>
   <li>{{cssxref("background-size")}}: Задает размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер <code>1.6rem</code> (<code>16px</code>), <span class="tlid-translation translation" lang="ru"><span title="">что очень хорошо сочетается с отступом (padding) </span></span><code>20px</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><span class="tlid-translation translation" lang="ru"><span title="">который мы позволили разместить внутри маркера </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.</span></span></li>
   <li>{{cssxref("background-repeat")}}: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение <code>no-repeat</code>.</li>
  </ul>
 </li>
</ul>

<p>Это дает нам следующий результат:</p>

<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>

<h3 id="короткая_запись_list-style">короткая запись list-style</h3>

<p>Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, {{cssxref("list-style")}}. Например, следующий CSS:</p>

<pre class="brush: css">ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}</pre>

<p>Может быть заменен этим:</p>

<pre class="brush: css">ul {
  list-style: square url(example.png) inside;
}</pre>

<p>Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — <code>disc</code>, <code>none</code>, и <code>outside</code>). Если указаны и <code>type</code> и <code>image</code>, <span class="tlid-translation translation" lang="ru"><span title="">тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.</span></span></p>

<h2 id="Контроль_счета_списка">Контроль счета списка</h2>

<p>Иногда вам может понадобиться вести счет в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счет с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.</p>

<h3 id="start">start</h3>

<p>Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счет списка с цифры отличной от 1. Например:</p>

<pre class="brush: html">&lt;ol start="4"&gt;
  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>что даст вам такой результат:</p>

<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>

<h3 id="reversed">reversed</h3>

<p>Атрибут {{htmlattrxref("reversed","ol")}} начнет отсчет по убыванию вместо возрастания. Например:</p>

<pre class="brush: html">&lt;ol start="4" reversed&gt;
  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>что даст вам такой результат:</p>

<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>

<div class="note">
<p><strong>Обратите внимание</strong>: Если пунктов в списке в обратном списке больше, чем значение атрибута <code>start</code>, счет продолжится до нуля и далее отрицательные значения.</p>
</div>

<h3 id="value">value</h3>

<p>Атрибут {{htmlattrxref("value","ol")}} позволит вам установить специфичные цифровые значения к пунктам списка. Например:</p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li value="2"&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li value="8"&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>что даст вам такой результат:</p>

<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>

<div class="note">
<p><strong>Обратите внимание</strong>: Даже если вы используете нечисловой {{cssxref("list-style-type")}}, вам все равно надо использовать эквивалентное цифровое значение в атрибуте <code>value</code>.</p>
</div>

<h2 id="Активное_изучение_Стилизация_вложенного_списка">Активное изучение: <span class="tlid-translation translation" lang="ru"><span title="">Стилизация вложенного списка</span></span></h2>

<p>В этой сессии активного изучения, мы хотим, чтобы вы взяли все что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:</p>

<ol>
 <li>Задали неупорядоченному списку квадратные маркеры.</li>
 <li>Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.</li>
 <li>Задали упорядоченному списку маркеры в виде строчных букв.</li>
 <li>Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдете.</li>
</ol>

<p>Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку <em>Reset</em>. Если вы застрянете, нажмите кнопку <em>Show solution </em>чтобы посмотреть возможный ответ.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
  &lt;h2&gt;HTML Input&lt;/h2&gt;
  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
  &lt;li&gt;First, light the candle.&lt;/li&gt;
  &lt;li&gt;Next, open the box.&lt;/li&gt;
  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
    &lt;ol&gt;
      &lt;li&gt;The book of spells&lt;/li&gt;
      &lt;li&gt;The shiny rod&lt;/li&gt;
      &lt;li&gt;The goblin statue&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
&lt;/ul&gt;&lt;/textarea&gt;

  &lt;h2&gt;CSS Input&lt;/h2&gt;
  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;

  &lt;h2&gt;Output&lt;/h2&gt;
  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
  &lt;div class="controls"&gt;
    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Счетчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы рекомендуем изучить это, если вы захотите размяться. Смотрите</span></span>:</p>

<ul>
 <li>{{cssxref("@counter-style")}}</li>
 <li>{{cssxref("counter-increment")}}</li>
 <li>{{cssxref("counter-reset")}}</li>
</ul>

<h2 id="Заключение">Заключение</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдем к методам стилизации ссылок.</span></span></p>

<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы стилизации текста и шрифта</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
 <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Верстка домашней страницы общественной школы</a></li>
</ul>