Kelkfoje utilas prezenti datumojn per arba strukturo kiel tiu, kiun
kreas la tree
-programo. La tree
-programo kreas eligon de arbo de
dosierujoj kiel tiu ĉi:
✔ /var/www/html/Repos/Freak-Spot/freak-theme [master|✔] $ tree . ├── static │ ├── css │ │ └── style.css │ ├── genericons │ │ ├── COPYING.txt │ │ ├── genericons.css │ │ ├── Genericons.eot │ │ ├── Genericons.svg │ │ ├── Genericons.ttf │ │ ├── Genericons.woff │ │ ├── LICENSE.txt │ │ └── README.md │ ├── images │ │ ├── creativecommons_public-domain_80x15.png │ │ ├── gnu-head-mini.png │ │ └── questioncopyright-favicon.png │ └── js │ ├── functions.js │ └── jquery-3.1.1.js └── templates ├── archives.html ├── article.html ├── article_info.html ├── author.html ├── authors.html ├── base.html ├── category.html ├── index.html ├── page.html ├── pagination.html ├── period_archives.html ├── tag.html ├── taglist.html └── tags.html 6 directories, 28 files
Por prezenti la komandon tiel, kiel ĝi aperas en terminalo, mi uzis la
HTML-etikedojn <samp>
kaj <pre>
(<pre><samp>eliro de
tree</samp></pre>
). Sed kio okazas, se mi volas inkludi ligilon aŭ uzi
aliajn HTML-elementojn, aŭ CSS? Tiuokaze ni devas uzi CSS por montri la
branĉan aspekton.
Ni uzu kiel ekzemplon la antaŭan eliron. Tiun ni povas esprimi tiel en HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Arba listo</title>
</head>
<body>
<div class="arba-ujo">
<ul>
<li>static
<ul>
<li>css
<ul>
<li>style.css</li>
</ul>
</li>
<li>genericons
<ul>
<li>COPYING.txt</li>
<li>genericons.css</li>
<li>Genericons.eot</li>
<li>Genericons.svg</li>
<li>Genericons.ttf</li>
<li>Genericons.woff</li>
<li>LICENSE.txt</li>
<li>README.md</li>
</ul>
</li>
<li>images
<ul>
<li>creativecommons_public-domain_80x15.png</li>
<li>gnu-head-mini.png</li>
<li>questioncopyright-favicon.png</li>
</ul>
</li>
<li>js
<ul>
<li>functions.js</li>
<li>jquery-3.1.1.js</li>
</ul>
</li>
</ul>
</li>
<li>templates
<ul>
<li>archives.html</li>
<li>article.html</li>
<li>article_info.html</li>
<li>author.html</li>
<li>authors.html</li>
<li>base.html</li>
<li>category.html</li>
<li>index.html</li>
<li>page.html</li>
<li>pagination.html</li>
<li>period_archives.html</li>
<li>tag.html</li>
<li>taglist.html</li>
<li>tags.html</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Unue ni devas krei regulojn, por ke la listo kaj ĝia ujo ne
enmiksiĝu en la desegno, kiun ni poste faros per la CSS-regulo border
.
.arba-ujo, .arba-ujo ul, .arba-ujo li {
position: relative;
}
.arba-ujo ul {
list-style: none;
}
Sekve ni ŝanĝu la pozicion de la pseŭdoelementoj por havi pli da spaco por la arbaj linioj.
.arba-ujo li::before, .arba-ujo li::after {
content: "";
position: absolute;
left: -12px;
}
Poste, pere de pseŭdoelementoj, ni pentru la liniojn horizontalajn
(::before
) kaj vertikalajn (::after
).
.arba-ujo li::before {
border-top: 1px solid green;
top: 9px;
width: 8px;
height: 0;
}
.arba-ujo li::after {
border-left: 1px solid brown;
height: 100%;
width: 0px;
top: 2px;
}
La lasta retuŝo estas fari, ke la branĉo ne kresku troe en la lasta elemento.
.clt ul > li:last-child::after {
height: 8px;
}
Jen la rezulto:
Sube estas la tuta kodo. Evidente oni povas modifi ĝin kaj ŝanĝi multajn dimensiojn por atingi aspekton kaj funkciaron pli adaptitan.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Arba listo</title>
<style>
.arba-ujo .arba-ujo ul, .arba-ujo li {
position: relative;
}
.arba-ujo ul {
list-style: none;
}
.arba-ujo li::before, .arba-ujo li::after {
content: "";
position: absolute;
left: -12px;
}
.arba-ujo li::before {
border-top: 2px solid green;
top: 9px;
width: 8px;
height: 0;
}
.arba-ujo li::after {
border-left: 2px solid brown;
height: 100%;
width: 0px;
top: 2px;
}
.arba-ujo ul > li:last-child::after {
height: 8px;
}
</style>
</head>
<body>
<div class="arba-ujo">
<ul>
<li>static
<ul>
<li>css
<ul>
<li>style.css</li>
</ul>
</li>
<li>genericons
<ul>
<li>COPYING.txt</li>
<li>genericons.css</li>
<li>Genericons.eot</li>
<li>Genericons.svg</li>
<li>Genericons.ttf</li>
<li>Genericons.woff</li>
<li>LICENSE.txt</li>
<li>README.md</li>
</ul>
</li>
<li>images
<ul>
<li>creativecommons_public-domain_80x15.png</li>
<li>gnu-head-mini.png</li>
<li>questioncopyright-favicon.png</li>
</ul>
</li>
<li>js
<ul>
<li>functions.js</li>
<li>jquery-3.1.1.js</li>
</ul>
</li>
</ul>
</li>
<li>templates
<ul>
<li>archives.html</li>
<li>article.html</li>
<li>article_info.html</li>
<li>author.html</li>
<li>authors.html</li>
<li>base.html</li>
<li>category.html</li>
<li>index.html</li>
<li>page.html</li>
<li>pagination.html</li>
<li>period_archives.html</li>
<li>tag.html</li>
<li>taglist.html</li>
<li>tags.html</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Komentoj