Dlaczego ciekawy zapytacie, a no dla tego że z zachowaniem hierarchii zaznaczania elementów.
Zaczynamy od html, prosta budowa więc nie ma co tłumaczyć. Zwykłe UL a w nim następne UL 😉 Oczywiście mozliwość zagnieżdżenia wielu ul.
14 lis 2020
Tag: HTML
17 lip 2019
Numerowanie rekordów za pomocą CSS
Przejdźmy od razu do rzeczy, chciałbym aby w liście li znajdowała się cyfra, zwykła numeracja. Nie zrobimy tego w js, php tylko w czystym css.
<ul>
<li>lista</li>
<li>lista</li>
<li>lista</li>
...
</ul>Użyjemy css
ul {
list-style: none;
counter-reset: section;
}
li:before {
padding-right: 10px;
counter-increment: section;
content: counter(section);
}8 maj 2019
Prosty hamburger w js
Dzisiaj coś prostego, czyli hamburger menu.
Najpierw html:
<button class="hamburger">
<div class="hamburger-center"></div>
</button>18 kwi 2019
Kolumny w css oraz szukanie w html
Powiedzmy że mamy bardzo długą listę linków. Chciałbym aby ta lista łamała się na 2, 3 a może więcej kolumn. W naszym przykładzie lista będzie składać się z 20 elementów.
Taką listę można uzyskać przez emmet aby nie klepać tego samodzielnie wystarczy wpisać ul#ul>li{text $}*20
<ul id="ul">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
<li>text 4</li>
...
</ul>Chciałby aby ta lista została podzielona na dwie kolumny. Do tego użyjemy column-count Które jest wpierane nawet przez IE od wersji 10
Oczywiście też trochę upiększymy wygląd naszej listy.
25 mar 2019
Emmet przyspieszamy pisanie HTML
W uproszczeniu, emmet pomaga nam w szybkim pisaniu html
Może występować jako plugin czy może być wbudowany do edytora którego używamy.
Ja używam visual studio code i on jest tam wbudowany w dodatku bardzo ładnie podpowiada składnię.
Poniżej to tylko mała lista przydatnych funkcji resztę można znaleźć tutaj
Zaczniemy od podstaw.
Napisz ! dostaniemy podstawę HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>