Możesz użyć CSS do tworzenia list wypunktowanych i numerowanych oraz użyć odpowiedniego obrazu jako punktora.
Stół 1 zawiera właściwości elementów przeznaczonych do tworzenia i modyfikowania list.
| własność | Wartość | Opis | Przykład |
|---|---|---|---|
| typ listy | dysk okrąg plac dziesiętny mała litera rzymska alfabet łaciński niższa alfa górna alfa Żaden |
Rodzaj znacznika. Pierwsze trzy służą do tworzenia listy wypunktowanej, a pozostałe służą do tworzenia listy numerowanej. | LI (typ listy: koło) LI (typ listy: górna alfa) |
| obraz w stylu listy | Żaden Url |
Ustawia symbol markera na dowolnym obrazie. | LI (list-style-image: url (check.gif)) |
| pozycja w stylu listy | na zewnątrz wewnątrz |
Wybór pozycji znacznika względem bloku linii tekstu. | LI (pozycja w stylu listy: wewnątrz) |
| styl listy | Uniwersalna właściwość, która zawiera jednocześnie wszystkie powyższe właściwości. |
Ponieważ tag
- lub
- Tytuł powinien być krótszy niż trzy linie.
- Nazywając sekcje, używaj już dobrze ugruntowanych terminów, takich jak księga gości, czat, łącze, strona główna i inne.
- Przed użyciem określonego terminu lub słowa zdecyduj, czy czytelnik je zrozumie.
- wydajność wszystkich linków
- obsługa różnych przeglądarek
- czytelność tekstu
- wydajność wszystkich linków
- obsługa różnych przeglądarek
- czytelność tekstu
- wydajność wszystkich linków
- obsługa różnych przeglądarek
- czytelność tekstu
- pierwszy
- druga
- trzeci
- pierwszy
- druga
- trzeci
- pierwszy
- druga
- trzeci
- pierwszy
- druga
- trzeci
- pierwszy
- druga
- trzeci
- Lista nieuporządkowana
- Lista nieuporządkowana
- Lista nieuporządkowana
- Lista nieuporządkowana
- Żaden - Usuwa znaczniki z listy
- okrąg - Marker w kształcie koła
- dysk " - Marker w postaci wypełnionego koła. Domyślna wartość
- plac - Marker w kształcie kwadratu
- ormiański - numeracja ormiańska
- dziesiętny - Znacznik numeru
- dziesiętne wiodące zero - Liczby z „0” przed startem (01, 02, 03 itd.)
- gruziński - numeracja gruzińska
- niższa alfa - (a, b, c, d, e itp.)
- niższy grecki - (alfa, beta, gamma itp.)
- niższa łacina - (a, b, c, d, e itp.)
- Niższy-rzymski - (i, ii, iii, iv, v itd.)
- górna alfa - (A, B, C, D, E itp.)
- górna łacina - (A, B, C, D, E itp.)
- alfabet łaciński - (I, II, III, IV, V itd.)
- dziedziczyć - Wartość musi zostać odziedziczona z elementu nadrzędnego
- .
- Element listy
- Unikalna lista
- Oryginalne listy
- ZORNET.RU - dla webmastera
- Kolejna lista
- Element listy
- Unikalna lista
- Oryginalne listy
- ZORNET.RU - dla webmastera
- Kolejna lista
- Skrypty dla uCoz
- Szablony dla uCoz
- Projekt strony internetowej
- Style witryny
- Styl CSS
- Pierwszy element witryny
- Drugi element witryny
- Trzeci element witryny
- Czwarty element witryny
- Piąty element witryny
- który działa jako jego rodzic, możesz ustawić styl zarówno dla selektorów UL, jak i LI. Tak więc w przykładzie 1 używany jest selektor UL i ustawiane są dla niego parametry stylu.
Przykład 1. Tworzenie listy punktowanej
Wynik tego przykładu pokazano na ryc. 1. Wykorzystuje kwadratowe znaczniki i ich zewnętrzne położenie względem tekstu.
Postać: 1. Widok listy zmieniony stylami
Właściwość list-style-image służy do ustawiania własnego obrazu jako znacznika, jak pokazano w przykładzie 2.
Przykład 2. Używanie obrazów jako markera
Wynik tego przykładu pokazano na ryc. 2. Mały obrazek jest używany jako znaczniki.
Postać: 2. Obrazy jako znaczniki
W tabeli podano kilka przykładów tworzenia różnych list. 2.
| Kod HTML | Przykład |
|---|---|
| |
|
| Kwestie do rozważenia podczas testowania witryny: |
|
| Kwestie do rozważenia podczas testowania witryny: |
|
|
Lista numerowana z cyframi arabskimi: |
|
|
Numerowana lista z małymi cyframi rzymskimi: |
|
|
Lista numerowana z dużymi cyframi rzymskimi: |
|
|
Lista numerowana z małymi literami łacińskimi: |
|
|
Numerowana lista z dużymi literami alfabetu łacińskiego: |
Kontynuujemy naukę CSS właściwości różnych pierwiastków. W tej lekcji porozmawiamy o projektowaniu list. W praktyce listy są używane dość często, dlatego należy o tych właściwościach pamiętać.
Wspólny widok znacznika
Pierwszym jest ustawienie wyglądu markerów. Listy mają różne znaczniki. Na lekcjach HTML Listy numerowane pokazuje, jak zmienić znaczniki za pomocą atrybutu rodzaj ... Ale wiedząc CSS ten atrybut nie jest już potrzebny, ponieważ wszystko to jest zrobione o wiele wygodniej dzięki arkuszowi stylów CSS.
W celu demonstracji utwórzmy listę za pomocą CSS... Nie ma znaczenia, który z nich lista numerowana lub lista nieuporządkowana, od czasu korzystania z nieruchomości list-style-typet możemy dodać lub usunąć znaczniki.
HTML
I tak powstała regularna lista, a domyślnie tworzone były markery w postaci wypełnionych kółek. I bardzo często pojawia się pytanie, jak usunąć punktory?
Usunięcie znacznika z listy za pomocą właściwości list-style-typet i przypisując mu wartość Żaden ... Jest to najpopularniejsza opcja usuwania punktorów z listy. A na liście ustawmy tę samą właściwość.
Ul (typ listy: brak;)
Teraz, jeśli odświeżymy stronę, zobaczymy, że ta właściwość usunęła znaczniki z listy.
To są różnego rodzaju punktory na listy. Pierwsze cztery typy są najpowszechniejsze, pozostałe są rzadko używane.
Cóż, na przykład wybierzmy i ustawmy marker w postaci dużych cyfr rzymskich. Robi się to po prostu: w miejscu znaczenia Żaden umieść nazwę naszego znacznika alfabet łaciński .
Ul (list-style-type: Upper-Roman;)
Odświeżenie strony ujawnia duże cyfry rzymskie na listach w formie punktorów. W ten sposób możesz zmienić wygląd znaczników listy, ustawiając żądany wygląd za pomocą właściwości typ listy .
Znacznik obrazu
Drugim, dość ważnym punktem i często używanym markerem jest obraz w formie markera. Często trzeba użyć markera w postaci pięknego obrazu i zwykłych opcji prezentowanych markerów CSS nieodpowiedni. W tym celu używane są obrazy. Odbywa się to za pomocą specjalnej właściwości o nazwie obraz w stylu listy ... To wskaże przeglądarce, że będziemy mieć obraz jako marker.
Zrób dowolne zdjęcie w Internecie (15 pikseli x 15 pikseli)którego planujesz użyć jako markera i umieścić go w utworzonym wcześniej folderze ze zdjęciami zdjęcia... Po tym majątek pozostaje obraz w stylu listy określ ścieżkę do obrazu, a przeglądarka podstawi obraz zamiast znacznika.
W CSS ścieżka jest wskazana za pomocą słowa kluczowego url () ... Podaj ścieżkę do obrazu w nawiasach ../images/ Nazwa obrazu.jpg , względem arkusza stylów.
To znaczy, co to oznacza w odniesieniu do arkusza stylów? Nasz arkusz stylów to plik style.css , znajduje się w katalogu CSS, a obraz znajduje się w katalogu zdjęcia... Oznacza to, że przeglądarka musi najpierw nakazać jej opuszczenie katalogu. CSSrobi się to w ten sposób: ../ , a następnie przejdź do katalogu ze zdjęciem zdjęcia i dopiero wtedy znajdź żądane zdjęcie.
Ul (list-style-image: url (../ images / Nazwa znacznika image.jpg);)
Jeśli podałeś poprawną ścieżkę do obrazu, przeglądarka załaduje twoje zdjęcie zamiast zwykłych markerów.
Używając obrazu jako znacznika, musisz znać jeszcze jedną właściwość odpowiedzialną za położenie znacznika obrazu. Aby zobaczyć, jak działa ta właściwość, musimy zróbmy ramkę czerwony dla wszystkich elementów
Ul li (obramowanie: 2px solid # ff0000;)
Teraz, jeśli spojrzysz, twój znacznik obrazu znajduje się poza elementem listy, tą samą ramką, którą utworzyliśmy powyżej. Dlatego czasami trzeba, aby znacznik znajdował się wewnątrz elementu listy. W tym celu istnieje nieruchomość pozycja w stylu listy który jest początkowo ustawiony na na zewnątrz czyli ustawianie znaczników poza elementem.
Aby osadzić znacznik wewnątrz elementu, użyj wartości wewnątrz ... Teraz, jeśli ustawisz tę właściwość na wartość wewnątrz , wtedy znacznik znajdzie się wewnątrz elementu listy, a czerwona ramka wyraźnie nam to pokazuje.
Ul (list-style-image: url (../ images / Name of the marker image.jpg); list-style-position: inside;) ul li (border: 2px solid # ff0000;)
Tak działają te trzy właściwości. Istnieje również notacja skrócona, która łączy wszystkie te właściwości.
Oznacza to, że właściwość jest określona styl listy a następnie kolejno wartości typu znacznika, pozycji znacznika i ewentualnie ścieżki do obrazu, który będzie znacznikiem. Otrzymujemy następujący obraz:
Ul (styl listy: inside url (../ images / Nazwa znacznika image.jpg);)
Tak powstaje skrócona wersja zasad związanych z wyglądem list. Ten wpis mówi, że znacznik musi znajdować się wewnątrz elementu, a znacznik będzie tym samym obrazem
To wszystko z listami, ale poświęć trochę więcej czasu na listy, ale poćwicz się z instalacją różnych markerów, poczuj, jak to wszystko działa. W próbny pojawią się opcje ustawień markera, w których można, porównując, sprawdzić poprawność swojej pracy.
Listy CSS - zbiór właściwości odpowiedzialnych za projektowanie list. Korzystanie z list HTML jest bardzo powszechne podczas tworzenia pasków nawigacji w witrynie. Elementy listy reprezentują zbiór elementów blokowych.
Dzięki standardowym właściwościom CSS możesz zmienić wygląd znacznika listy, dodaj obraz do markera, i zmień położenie znacznika... Wysokość bloku znacznika można ustawić za pomocą właściwości line-height.
Listy stylów ze stylami CSS
1. Typ znacznika listy Typ listy
Właściwość zmienia typ znacznika lub usuwa marker w przypadku list wypunktowanych i numerowanych. Dziedziczny.
| typ listy | |
|---|---|
| Wartości: | |
| dysk | Domyślna wartość. Wypełnione kółko służy jako znacznik elementów listy. |
| ormiański | Tradycyjna numeracja ormiańska. |
| okrąg | Jako znacznik używany jest otwarty okrąg. |
| cjk-ideographic | Numeracja ideograficzna. |
| dziesiętny | 1, 2, 3, 4, 5, … |
| dziesiętne wiodące zero | 01, 02, 03, 04, 05, … |
| gruziński | Tradycyjna numeracja gruzińska. |
| hebrajski | Tradycyjna numeracja żydowska. |
| hiragana | Numeracja japońska: a, i, u, e, o,… |
| hiragana-iroha | Numeracja japońska: i, ro, ha, ni, ho, ... |
| katakana | Numeracja japońska: A, I, U, E, O, ... |
| katakana-iroha | Numeracja japońska: I, RO, HA, NI, HO, ... |
| niższa alfa | a, b, c, d, e, ... |
| niższy grecki | Małe litery alfabetu greckiego. |
| niższa łacina | a, b, c, d, e, ... |
| mała litera rzymska | i, II, III, IV, V, ... |
| Żaden | Brakuje znacznika. |
| plac | Jako znacznik używany jest wypełniony lub niepomalowany kwadrat. |
| górna alfa | A, B, C, D, E, ... |
| górna łacina | A, B, C, D, E, ... |
| alfabet łaciński | I, II, III, IV, V, ... |
| Inicjał | Ustawia wartość właściwości na jej wartość domyślną. |
| dziedziczyć | Dziedziczy wartość właściwości z elementu nadrzędnego. |
Składnia
Ul (list-style-type: none;) ul (list-style-type: square;) ol (list-style-type: none;) ol (list-style-type: lower-alpha;) 
Postać: 1. Przykładowy wygląd list punktowanych i numerowanych
2. Obrazy dla elementów listy w stylu listy
Jako znaczników elementów listy można używać obrazów i wypełnień gradientowych. Dziedziczny.
Składnia
Ul (list-style-image: url ("images / romb.png");) ul (list-style-image: linear-gradient (# FF7A2F 0, # FF7A2F 50%, # FFB214 50%);) 
Postać: 2. Zaprojektuj listę punktowaną za pomocą obrazu 
Postać: 3. Stylizowanie listy punktowanej za pomocą gradientu
3. Lokalizacja pozycji stylu listy znacznika listy
Ta właściwość zapewnia możliwość umieszczenia znacznika na zewnątrz lub wewnątrz treści elementu listy. Dziedziczny.
Witam na moim blogu. Dzisiaj chciałbym poruszyć temat usuwania znaczników z pozycji listy punktowanej (ul li) poprzez css, ponieważ często są one niepotrzebne i tylko przeszkadzają w projektowaniu strony.
Usuwanie domyślnych znaczników
Czasami wystarczy je usunąć. Na przykład podczas dekorowania menu lub czegoś innego. Właściwość typu listy lub skrótowy styl listy jest odpowiedzialna za wyświetlanie znaczników. Wartość domyślna to okrąg, który jest czarnym wypełnionym kółkiem. Aby go usunąć, wystarczy napisać w ten sposób:
Ul (
Typ listy: brak;
}
Ul (
Styl listy: brak;
}
Zwróć uwagę, że właściwość jest zapisywana ogólnie na całej liście, a nie na jej poszczególnych elementach. To jest bardzo ważne. Powyższy wpis usuwa punktory ze wszystkich wpisów w Twojej witrynie, ale może się zdarzyć, że masz wiele projektów list.
W takim przypadku klasy pomogą poradzić sobie z ich stylizacją. Po prostu odłóż klasę stylu na potrzebne listy i zaprojektuj je.
Jak umieścić obrazek markera
Tak, tak, css pozwala stworzyć własny, znacznie atrakcyjniejszy marker. Można go również ustawić za pomocą właściwości list-style-image lub po prostu za pomocą stylu listy. Wartość w nawiasach zawiera ścieżkę do pliku, a przed nią należy umieścić słowo kluczowe url.
Jeśli zdecydujesz się zmienić standardowe listy ul i li, ten temat Cię zainteresuje. Tutaj znajdziesz kilka oryginalnych rozwiązań. Co z pewnością pomoże ci zmienić standardowy widok na unikalny, zgodny ze stylem CSS, do projektowania list. Plus jest taki, że we wszystkim zastosujemy tylko jedną klasę, co radykalnie odmieni wygląd. Oprócz tych parametrów możesz określić, od którego numeru ma się zaczynać lista, tutaj możesz zrobić wszystko sam. Początkową wartością domyślną dla list numerowanych jest pierwsza lub litera A.Opierając się na podstawach, przyjrzymy się teraz bliżej elementom użytym do nadania struktury i znaczenia różnym częściom projektu. Jeśli ktoś nie wie, ul i li są znacznie lepszymi opcjami niż zwykły tekst, ponieważ tekst zawijany, szczególnie na telefonie komórkowym, jest idealnie wcięty i nie zawija się wokół znacznika.
Listy są uważane za świetny sposób prezentowania informacji na stronach, ponieważ są łatwe do odczytania i dobrze wyglądają. Wiele osób wydaje się myśleć, że wypunktowane punkty to małe obrazy, ale w rzeczywistości wszystkie są tworzone za pomocą dość prostego kodu HTML. Jeśli chcesz, możesz zagnieżdżać w sobie różne typy list, pamiętaj tylko, aby je poprawnie zamknąć. Możesz bawić się tekstem, który chcesz, we wszystkich tych poleceniach listy.
Musisz również wiedzieć, że listy początkowo zawierają kilka elementów:
1
... Nieuporządkowane informacje.
2
... Zamówione informacje.
3
... Definicje.
Pierwsze kroki z instalacją:
1. Opcja:
CSS
Ksangelopan (
margines: 19px 0 0;
wyściółka: 0;
styl listy: brak;
reset licznika: li;
}
.ksangelopan li (
obramowanie: 2px solid # 3575ad;
tło: # d7dee4;
pozycja: względna;
margin-bottom: 17px;
wypełnienie: 15px 9px;
}
.ksangelopan li: hover (
indeks z: 1;
}
.ksangelopan li: before (
obramowanie: 2px solid # 2270b3;
pozycja: bezwzględna;
góra: -14px;
wypełnienie: 3px 9px;
rozmiar czcionki: 11px;
font-weight: pogrubienie;
kolor: # 246eaf;
tło: # f2f4f7;
licznik przyrostu: li;
content: counter (li);
-webkit-przejście-czas trwania: 0,4 s;
czas trwania przejścia: 0,4 s;
}
.ksangelopan li: hover: before (
tło: # 2672b3;
kolor: # f7f9fb;
-webkit-transform: translate (-11px, 0);
-ms-transform: translate (-11px, 0);
-o-transform: translate (-11px, 0);
transform: translate (-11px, 0);
}
.ksangelopan li: after (
zawartość: "";
pozycja: bezwzględna;
czas trwania przejścia: 0,3 s;
-webkit-przejście-property: szerokość;
właściwość przejścia: szerokość;
indeks z: -1;
tło: #FFF;
wysokość: 100%;
po lewej: 0;
góra: 0;
szerokość: 0;
}
.ksangelopan li: hover: after (
szerokość: 100%;
}
To jest cała instalacja.
2 Druga opcja:
CSS
Beleduzlopamges (
margin-bottom: 8px;
wyściółka: 0;
styl listy: brak;
reset licznika: li;
}
.beleduzlopamges li (
pozycja: względna;
obramowanie: 2px solid # 195588;
tło: # eff3f7;
wypełnienie: 15px 19px 15px 27px;
margines: 12px 0 12px 40px;
-webkit-przejście-czas trwania: 0,3 s;
czas trwania przejścia: 0,3 s;
}
.beleduzlopamges li: hover (
tło: #FFF;
}
.beleduzlopamges li: before (
line-height: 32px;
pozycja: bezwzględna;
top: 4px;
po lewej: -39px;
szerokość: 39px;
wyrównywanie tekstu: do środka;
rozmiar czcionki: 16px;
font-weight: pogrubienie;
kolor: # f9f5f5;
tło: # 275b88;
licznik przyrostu: li;
content: counter (li);
czas trwania przejścia: 0,2 s;
}
.beleduzlopamges li: hover: before (
szerokość: 46px;
}
.beleduzlopamges li: after (
pozycja: bezwzględna;
po lewej: 0;
top: 4px;
zawartość: "";
wysokość: 0;
szerokość: 0;
obramowanie: jednolite przezroczyste 16 pikseli;
border-left-color: # 275b88;
-webkit-przejście-czas trwania: 0,2 s;
czas trwania przejścia: 0,2 s;
}
.beleduzlopamges li: hover: after (
margin-left: 6px;
}
Skalę środkową można ustawić niezależnie, aby pasowała do głównego stylu witryny.
3 Trzecia opcja:
CSS
Nizualisanelag (
wyściółka: 0;
styl listy: brak;
reset licznika: li;
}
.nizualisanelag li (
pozycja: względna;
wypełnienie: 9px 17px 17px 25px;
margin-left: 39px;
czas trwania przejścia: 0,2 s;
kursor: wskaźnik;
font-weight: pogrubienie;
kolor: # 343638;
}
.nizualisanelag li: before (
ramka: 3px jednolita przezroczysta;
wysokość linii: 35 pikseli;
pozycja: bezwzględna;
góra: 0;
po lewej: -29px;
szerokość: 41px;
wyrównywanie tekstu: do środka;
rozmiar czcionki: 14px;
font-weight: pogrubienie;
kolor: # 619dce;
licznik przyrostu: li;
content: counter (li);
czas trwania przejścia: 0,3 s;
box-size: border-box;
}
.nizualisanelag li: hover: before (
kolor: # 337AB7;
}
.nizualisanelag li: after (
pozycja: bezwzględna;
góra: 0;
po lewej: -29px;
szerokość: 41px;
wysokość: 41px;
obramowanie: 5px solid # 468bd0;
border-radius: 50%;
zawartość: "";
krycie: 0,5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-size: border-box;
}
.nizualisanelag li: hover: after (
animacja: 500ms luz na wyjściu 0s bounceIn;
krycie: 1;
}
@keyframes bounceIn (
0% {
krycie: 0;
transform: scale3d (.3, .3, .3);
}
20% {
transform: scale3d (1,3, 1,3, 1,3);
}
40% {
transform: scale3d (.9, .9, .9);
}
60% {
krycie: 1;
transform: scale3d (1,03, 1,03, 1,03);
}
80% {
transform: scale3d (.97, .97, .97);
}
do (
krycie: 1;
transform: scale3d (1, 1, 1);
}
}
Pochodzi z piękną animacją.
4 Czwarta opcja:
CSS
Wypełnienie: 0;
styl listy: brak;
}
.kudezamuden li (
wypełnienie: 6px;
}
.kudezamuden li: before (
padding-right: 11px;
font-weight: pogrubienie;
kolor: # 4979a0;
treść: "\\ 2606";
czas trwania przejścia: 0,4 s;
}
.kudezamuden li: hover: before (
kolor: # 235e90;
treść: "\\ 2605";
}
Podobnie jak w poprzednich wersjach, zmieniono tylko samą ikonę.
Ogólnie jest to niewielki wybór list, da webmasterowi stworzenie pięknej listy w portalu, gdzie sam może ją uporządkować, tak jak chce to zobaczyć.
Jeśli chcesz umieścić elementy na liście numerowanej zamiast listy punktowanej, zostanie użyty uporządkowany kod HTML. Ta lista jest tworzona przy użyciu znacznika ol. Numeracja zaczyna się od jednego i rośnie o jeden dla każdego kolejnego uporządkowanego elementu listy ze znacznikiem li.
