| 01 |
Часто возникает необходимость оформить содержание в «книжном» стиле, т. е. хотелось бы чтобы информация была представлена следующим образом: |
|
| 02 |
|
|
| 03 |
Обратите внимание, что перенос строки осуществляется корректно. Предложенный мною способ используется в любом из моих рецептов — так оформляется список ингредиентов. Вот HTML-верстка: |
|
| 04 | HTML |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 < >
<>
< >Рубрикация</>
< >1</>
</>
<>
< >Названия (употребление прописных букв, кавычек, слитное, дефисное, раздельное написание)</>
< >13</>
</>
<>
< >Числа и знаки</>
< >152</>
</>
</> |
|
| 05 |
Поскольку точки рисуются стилем границы элемента li, то задавать тип и цвет точек можно в стилях. Вот CSS: |
|
| 06 | CSS |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ul.oglavl {
padding: 0;
margin: 0;
list-style-type: none;
}
ul.oglavl li {
border-bottom: 1px dotted #C2C2C2; /* Необязателен. Здесь задается толщина, тип и цвет точек */
position: relative;
padding: 0;
margin-bottom:5px; /* Необязателен. Задается для установки расстояния между блоками li */
}
ul.oglavl li span {
background-color: #FFF; /* Это необходимо, чтобы перекрыть точки фоном */
margin: 0;
}
ul.oglavl li span.text, ul.oglavl li span.page {
bottom: -5px; /* Смещаем значимые блоки, чтобы они перекрыли точки */
}
ul.oglavl span.text {
position :relative;
margin-right:7em; /* Задается чтобы текст не заходил на номера страниц */
padding-right:2px; /* Необязателен. Задается чтобы точки не подходили вплотную к концу текста */
}
ul.oglavl span.page {
position: absolute;
right: 0;
padding-left:2px; /* Необязателен. Задается чтобы точки не подходили вплотную к номерам страниц */
} |
|
| 07 |
Похожие запросы:
|
|