efros, "обернуть" оглавление в отдельный блок со своим стилем в котором и прописать рамку.

Например:
HTML:

<div id="oglavlenie">
  <p>Из этой статьи вы узнаете:</p>
  <a href="#a1"><li>Сухая чистка ковролина</a><br>
  <a href="#a2"><li>Влажная чистка ковролина</a><br>
  <a href="#a3"><li>Как очистить ковролин от пятен с помощью народных средств?</a>
</div>

CSS:

#oglavlinie {border:1px solid black;}
#oglavlinie p{font-weight:bold;}

Что-то вроде этого...

Впихнул это в css, но что-то не работает. Это в определенное место нужно или в любое? 

efros, просмотрел сразу, а что там теги <li> делают?

И исправь (очепятался: написал "i" вместо "e") CSS:

#oglavlenie {border:1px solid black;}
#oglavlenie p{font-weight:bold;}

PS Теги списка наверное можно убрать, тем более что объявления списка не нашел в коде при поверхностном изучении фрагмента


Сообщение отредактировал ShowPrint - 11.1.2016, 18:25

ShowPrint, ShowPrint, Теги li для списка как я понял. 

Вот вставил между этим и все ровно не получается. 

Попробуйте тогда без CSS, просто в HTML:

<div style="border: 1px solid black;">
  <p style="font-weight:bold;">Из этой статьи вы узнаете:</p>
  <a href="#a1">Сухая чистка ковролина</a><br>
  <a href="#a2">Влажная чистка ковролина</a><br>
  <a href="#a3">Как очистить ковролин от пятен с помощью народных средств?</a>
</div>

efros, а зачем внутри фигурных скобок вставили????

Надо было так сделать:

}
.breadcrumb, .breadcrumb> div, .breadcrumb .fa-caret-right, .breadcrumb .root a {
float: none;
}
#oglavlenie {border:1px solid black;}
#oglavlenie p{font-weight:bold;}
.breadcrumb .root {
padding: 0;
}

А так как вы написали - в одни стили вписали другие, а никак не "между"... )))
Они должны быть обернуты в пару тегов ul... 


Сообщение отредактировал ShowPrint - 11.1.2016, 18:41

ShowPrint, спасибо, получилось, буду теперь настраивать. Но вот не понял как правильно список сделать. Это в начале должны быть теги li, а в конце ul?

efros, зря поставили фиксированную ширину блока - адаптивность нарушается... Можно попробовать вместо задания ширины поставить 

display:inline-block;

а также поиграть стилями margin и padding как самого блока, так и вложенных элементов...

И совет: пытайтесь разбираться как с css, так и с html - очень полезное знание при сайтостроительстве.

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

<ul>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

Ссылка на матчасть: ...тынц...

И стили прописывать лучше всё-таки через css (когда возможно), чтоб код был "чистый", без style...

ShowPrint, Про блок я понял как делать, а вот с вложенными элементами, особенно с ссылками вообще не понял, вот хотел отступить от края и прописал 

<p style="margin: 5px;"<a href="#a1">Сухая чистка ковролина</a><br></p> 

Но ссылка убралась и ничего не произошло

Аааа, докумекал.  padding ))
ShowPrint, хотел еще поинтересоваться, а закрывать это все в noindex или nofollow нужно? А то как бы повторяются заголовки. Как думаете? 


Сообщение отредактировал efros - 11.1.2016, 19:26

efros, а зачем ссылку обернули в тег <p>?

Экспериментируйте и изучайте - опыт вещь бесценная...