Шаблон:Тест список — различия между версиями
Материал из Викип
Diogen (обсуждение | вклад) |
Diogen (обсуждение | вклад) |
||
| Строка 1: | Строка 1: | ||
| − | < | + | <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> | ||
<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>
Контакты
