Skip to content

Instantly share code, notes, and snippets.

@bsakhanov

bsakhanov/animals-tree-list.markdown

Created January 24, 2019 12:53
Show Gist options
  • Save bsakhanov/deda6034d8a96c467356653d9f9c4187 to your computer and use it in GitHub Desktop.
Save bsakhanov/deda6034d8a96c467356653d9f9c4187 to your computer and use it in GitHub Desktop.
Download ZIP
animals! -- Tree list
Raw
index.html
<h1 class='post-title entry-title' itemprop='headline'>Птицы, рыбы и насекомые &#8212; это животные или нет? Да, это животные!</h1>
<div itemprop='articleBody'>
<p>Почти все живые организмы, кроме растений, грибов и бактерий, являются животными. Это и птицы, и рыбы, и насекомые.
<ul class="tabletree">
<li><div><span>Организмы</span></div><ul>
<li><div><span>Прокариоты<br>(доядерные)</span></div><ul>
<li><div><span>Бактерии</span></div>
<li><div><span>Археи</span></div></ul>
<li><div><span>Эукариоты<br>(ядерные)</span></div><ul>
<li><div><span>Протисты</span></div>
<li><div><span>Хромисты</span></div>
<li><div><span>Растения</span></div>
<li><div><span>Грибы</span></div>
<li><div><span class="razvydelit">Животные</span></div><ul>
<li><div><span>подцарство<br>Прометазои</span></div><ul>
<li><div><span>Губки</span></div>
<li><div><span>Пластинчатые</span></div></ul>
<li><div><span>подцарство<br>Эуметазои</span></div><ul>
<li><div><span>Кишечнополостные</span></div><ul>
<li><div><span>Стрекающие</span></div>
<li><div><span>Гребневики</span></div></ul>
<li><div><span>Bilateria</span></div><ul>
<li><div><span>Первичноротые</span></div><ul>
<li><div><span>надтип Platyzoa</span></div>
<li><div><span>надтип Спиральные</span></div>
<li><div><span>тип Acoelomorpha</span></div>
<li><div><span>надтип<br>Линяющие</span></div><ul>
<li><div><span>тип Круглые черви</span></div>
<li><div><span>тип Онихофоры</span></div>
<li><div><span>тип Тихоходки</span></div>
<li><div><span>тип Волосатики</span></div>
<li><div><span>тип Головохоботные</span></div>
<li><div><span>тип<br>Членистоногие</span></div><ul>
<li><div><span>подтип Трилобитообразные<br>(вымершие)</span></div>
<li><div><span>подтип Хелицеровые</span></div>
<li><div><span>подтип Жвалоносные</span></div>
<li><div><span>подтип<br>Неполноусые</span></div><ul>
<li><div><span>надкласс<br>Многоножки</span></div>
<li><div><span class="razvydelit">надкласс<br>Насекомые</span></div></ul></ul></ul></ul>
<li><div><span>Вторичноротые</span></div><ul>
<li><div><span>Иглокожие</span></div>
<li><div><span>Щетинкочелюстные</span></div>
<li><div><span>Полухордовые</span></div>
<li><div><span>Хордовые</span></div><ul>
<li><div><span>подтип Оболочники</span></div>
<li><div><span>подтип Головохордовые</span></div>
<li><div><span>подтип<br>Позвоночные</span></div><ul>
<li><div><span>Круглоротые</span></div>
<li><div><span>Конодонты (вымершие)</span></div>
<li><div><span>Бесчелюстные</span></div>
<li><div><span class="razvydelit">надкласс Рыбы</span></div>
<li><div><span>надкласс<br>Четвероногие</span></div><ul>
<li><div><span>Земноводные</span></div>
<li><div><span>Пресмыкающиеся</span></div>
<li><div><span class="razvydelit">Птицы</span></div>
<li><div><span>Млекопитающие<br>(вкл. человека)</span></div></ul></ul></ul></ul></ul></ul></ul></ul></ul>
</ul>
* <small>при создании таблицы использовался материал <a href="https://ru.wikipedia.org/wiki/%D0%91%D0%B8%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D0%BA%D0%B0">Википедии</a></small>
Raw
style.css
.tabletree {
margin: 0 !important;
padding: 0 !important;
line-height: normal;
word-wrap: break-word;
word-break: break-all;
font-size: 80%;
}
.tabletree ul {
position: relative;
display: table-cell;
margin: 0 !important;
padding: 0 0 0 11px !important;
vertical-align: middle;
}
.tabletree li {
display: table;
position: relative;
margin: 0 !important;
padding: 0 !important;
}
.tabletree div {
display: table-cell;
padding: 2px 0;
vertical-align: middle;
}
.tabletree ul:before,
.tabletree ul li:after,
.tabletree ul li:not(:last-child):not(:first-child):before {
content: "";
position: absolute;
left: -6px;
top: 0;
width: 5px;
height: 50%;
border-bottom: 1px solid #999;
}
.tabletree ul:before {
left: 0;
}
.tabletree ul li:not(:only-child):after {
border-left: 1px solid #999;
}
.tabletree ul li:not(:only-child):first-child:after {
top: 50%;
border-top: 1px solid #999;
border-bottom-color: transparent;
}
.tabletree ul li:not(:last-child):not(:first-child):before {
height: 100%;
border-left: 1px solid #999;
border-bottom-color: transparent;
}
.tabletree span {
position: relative;
display: inline-block;
background-color: #C5FDFE;
}
.tabletree span:after {
position: absolute;
bottom: 100%;
bottom: calc(100% + 3px);
right: -100%;
}
.tabletree .razvydelit {
background-color: pink;
}
.tabletree > li > ul > li:nth-of-type(1) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Actinomyces_israelii.jpg/265px-Actinomyces_israelii.jpg);
}
.tabletree > li > ul > li:nth-of-type(1) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Halobacteria.jpg/265px-Halobacteria.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Protist_collage.jpg/265px-Protist_collage.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Chromista_collage_2.jpg/265px-Chromista_collage_2.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(3) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Diversity_of_plants_image_version_3.png/265px-Diversity_of_plants_image_version_3.png);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Fungi_Diversity.jpg/265px-Fungi_Diversity.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(1) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/SpongeColorCorrect.jpg/265px-SpongeColorCorrect.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(1) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Trichoplax_mic.jpg/265px-Trichoplax_mic.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Jelly_cc11.jpg/265px-Jelly_cc11.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Bathocyroe_fosteri.jpg/275px-Bathocyroe_fosteri.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Flatworm_Nick_Hobgood.jpg/265px-Flatworm_Nick_Hobgood.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Helix_pomatia_89a.jpg/265px-Helix_pomatia_89a.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(3) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Waminoa_on_Plerogyra.jpg/265px-Waminoa_on_Plerogyra.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Soybean_cyst_nematode_and_egg_SEM.jpg/265px-Soybean_cyst_nematode_and_egg_SEM.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/31-Velvet_Worm.JPG/265px-31-Velvet_Worm.JPG);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Hypsibiusdujardini.jpg/265px-Hypsibiusdujardini.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(4) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Paragordius_tricuspidatus.jpeg/265px-Paragordius_tricuspidatus.jpeg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(5) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Priapulus_caudatus.jpg/265px-Priapulus_caudatus.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(6) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/CyphaspisPlate.jpg/265px-CyphaspisPlate.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(6) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Spiders_Diversity.jpg/265px-Spiders_Diversity.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(6) > ul > li:nth-of-type(3) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Ecrevisse_pattes_rouges.jpg/265px-Ecrevisse_pattes_rouges.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(6) > ul > li:nth-of-type(4) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Polypedal_Grasp.jpg/275px-Polypedal_Grasp.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li:nth-of-type(4) > ul > li:nth-of-type(6) > ul > li:nth-of-type(4) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Insects_collage.jpg/265px-Insects_collage.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Crown_of_Thorns-jonhanson.jpg/265px-Crown_of_Thorns-jonhanson.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/MEB_back.png/265px-MEB_back.png);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(3) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Eichelwurm.jpg/265px-Eichelwurm.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Sea-tulip.jpg/265px-Sea-tulip.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Branchiostoma_lanceolatum.jpg/265px-Branchiostoma_lanceolatum.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Diversas_lampreas.1_-_Aquarium_Finisterrae.JPG/275px-Diversas_lampreas.1_-_Aquarium_Finisterrae.JPG);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Conodonts.jpg/250px-Conodonts.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > ul > li:nth-of-type(3) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Lampetra_fluviatilis.jpg/275px-Lampetra_fluviatilis.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > ul > li:nth-of-type(4) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Grey_Nurse_Shark_at_Fish_Rock_Cave%2C_NSW.jpg/265px-Grey_Nurse_Shark_at_Fish_Rock_Cave%2C_NSW.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > ul > li:nth-of-type(5) > ul > li:nth-of-type(1) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Rana_esculenta_on_Nymphaea_edit.JPG/265px-Rana_esculenta_on_Nymphaea_edit.JPG);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/SaltwaterCrocodile%28%27Maximo%27%29.jpg/265px-SaltwaterCrocodile%28%27Maximo%27%29.jpg);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > ul > li:nth-of-type(5) > ul > li:nth-of-type(3) > div span:hover:after {
content: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bird_Diversity_2013.png/265px-Bird_Diversity_2013.png);
}
.tabletree > li > ul > li:nth-of-type(2) > ul > li:nth-of-type(5) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) > ul > li:nth-of-type(4) > ul > li:nth-of-type(3) > ul > li:nth-of-type(5) > ul > li:nth-of-type(4) > div span:hover:after {
content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Mammal_Diversity_2011.png/275px-Mammal_Diversity_2011.png);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment