Шаблон:Тест список — различия между версиями
Материал из Викип
Diogen (обсуждение | вклад) |
Diogen (обсуждение | вклад) |
||
| (не показана 1 промежуточная версия этого же участника) | |||
| Строка 1: | Строка 1: | ||
| − | <div | + | <style> |
| − | + | .treeHTML { | |
| − | + | line-height: normal; | |
| − | + | } | |
| − | + | .treeHTML details { | |
| − | < | + | display: block; |
| − | + | } | |
| − | + | .treeHTML div { | |
| + | position: relative; | ||
| + | margin: 0 0 0 .5em; | ||
| + | padding: 0 0 0 1.2em; | ||
| + | } | ||
| + | .treeHTML div:not(:last-child) { /* необязательно */ | ||
| + | border-left: 1px solid #ccc; | ||
| + | } | ||
| + | .treeHTML div:before { /* необязательно */ | ||
| + | content: ""; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | width: 1.1em; | ||
| + | height: .5em; | ||
| + | border-bottom: 1px solid #ccc; | ||
| + | } | ||
| + | .treeHTML div:last-child:before { /* необязательно */ | ||
| + | border-left: 1px solid #ccc; | ||
| + | } | ||
| + | .treeHTML summary { /* стилями можно задать любую форму, например, тот же плюс. Я специально не стала усложнять, чтобы можно было проще разобраться в коде */ | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | .treeHTML details[open] summary { /* убрать рамку при фокусе */ | ||
| + | outline: none; | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | <div class="treeHTML">Сайт | ||
| + | <div>Блог | ||
| + | <details><summary></summary> | ||
| + | <div>HTML</div> | ||
| + | <div>CSS</div> | ||
| + | <div>JavaScript</div> | ||
| + | </details> | ||
</div> | </div> | ||
| + | <div>Контакты</div> | ||
</div> | </div> | ||
<noinclude> | <noinclude> | ||
[[Категория:Шаблоны]] | [[Категория:Шаблоны]] | ||
</noinclude> | </noinclude> | ||
Текущая версия на 15:51, 31 января 2021
<style> .treeHTML {
line-height: normal;
} .treeHTML details {
display: block;
} .treeHTML div {
position: relative; margin: 0 0 0 .5em; padding: 0 0 0 1.2em;
} .treeHTML div:not(:last-child) { /* необязательно */
border-left: 1px solid #ccc;
} .treeHTML div:before { /* необязательно */
content: ""; position: absolute; top: 0; left: 0; width: 1.1em; height: .5em; border-bottom: 1px solid #ccc;
} .treeHTML div:last-child:before { /* необязательно */
border-left: 1px solid #ccc;
} .treeHTML summary { /* стилями можно задать любую форму, например, тот же плюс. Я специально не стала усложнять, чтобы можно было проще разобраться в коде */
position: absolute; top: 0; left: 0; cursor: pointer;
} .treeHTML details[open] summary { /* убрать рамку при фокусе */
outline: none;
} </style> </head> <body>
Сайт
Блог
<details><summary></summary>
HTML
CSS
JavaScript
</details>
Контакты
