Zadanie
Wyświetl listę punktowaną poziomo, bez punktorów.
Rozwiązanie
Znacznik pocisku
Powinieneś już wiedzieć, że HTML ma elementy blokowe i wbudowane. Elementy inline nie tworzą własnych bloków; przykładem takich elementów są znaczniki lub . Elementy blokowe są wyświetlane za pomocą nowa linia i utwórz prostokątny blok, przykład takich tagów Oto znacznik Aby oznaczyć Odpowiedzialny za sposób wyświetlania elementu w dokumencie Właściwość CSS wyświetlacz. Rozważmy trzy jego znaczenia (choć jest ich więcej): Najpierw utwórzmy listę poziomą, zamieniając jej wypunktowania w elementy wbudowane. W Styl CSS Napiszmy regułę, w której selektor li zostanie ustawiony na właściwość display z wartością inline.
Zatem ten styl zadziałał i otrzymaliśmy poziomy układ elementów listy: Rysunek 1. Przykład nr 1 w pracy. Ta metoda ma wady. Faktem jest, że elementy inline mają pewne ograniczenia w porównaniu z elementami blokowymi. Na przykład nie można im podać szerokości i wysokości, ale blokowe tak. Na przykład potrzebujemy, aby utworzony przez nas element menu miał szerokość 150 pikseli i wysokość 40 pikseli. Spróbujmy zmienić styl na następujący, czyli dodajmy dwie reguły ustalające wielkość pozycji menu:
Zmiany te nie spowodują żadnych zmian. Aby elementy menu były ułożone poziomo i można było ustawić ich szerokość i wysokość, muszą ustawić typ na inline-block . Zmieńmy nasz przykładowy kod:
Ten kod działa i zmiany są widoczne: Ale może tak być różne opcje przykładowo musimy wyświetlić w menu zagnieżdżone listy:
Oto wynik tego kodu: Widzimy, że bloki nie są wyrównane pod względem wysokości, jak byśmy tego chcieli. Można oczywiście podać tę samą wysokość dla wszystkich bloków, jednak nie zawsze znamy z góry jej dokładną wartość i może ona ulec zmianie. Ale właściwie, dlaczego tak się dzieje? Nasze bloki mają właściwość display ustawioną na inline-block . Oznacza to, że mają takie cechy jak elementy blokowe(możliwość określenia szerokości i wysokości) oraz elementy inline. To, co widzimy, to jakość elementów wbudowanych. Przyjrzyjmy się ciągowi znaków ze znakami „A” o różnych rozmiarach: A A A A A A Widzimy, że wszystkie litery są wyrównane pionowo wzdłuż dolnej linii. Dokładniej, wzdłuż linii bazowej, ale nie wchodźmy teraz w chwasty. To samo stało się z naszymi blokami. Aby wyrównać tekst w pionie, użyj właściwości Vertical-align. W naszym przykładzie nr 3 musimy użyć wartości top, która wyrówna górną granicę elementu do góry najwyższego elementu w linii. Na razie zastosujmy to do ciągu zawierającego znaki „A” o różnych rozmiarach: A A A A A A Litery wydają się trochę „skakać”. Ustawiłem ramkę CSS na najwyższą literę, aby pokazać, że tak naprawdę nie ma żadnych skoków, tylko pusta przestrzeń między górną krawędzią (w miejscu, w którym następuje wyrównanie) a górnym punktem „A”. Właściwość Vertical-align musi zostać zastosowana do każdego elementu wbudowanego; nie jest ona dziedziczona. Możesz przeczytać więcej o tej właściwości: Vertical-align . Po tej dygresji będziemy nadal umieszczać elementy listy poziomo. Możesz umieszczać elementy listy w poziomie, korzystając z właściwości float. Ta właściwość określa, po której stronie element jest wyrównany i ma dwie pozycje: lewą i prawą. Oto przykład użycia tego kodu:
Oto wynik kodu: Przykład wydaje się działać. Istnieje jednak jedno zastrzeżenie dotyczące korzystania z tej właściwości. Teraz się temu przyjrzymy. Weźmy na przykład kod, w którym znajdują się dwie poziome listy na różne sposoby układ elementów w poziomie: display i float:
Oto wynik kodu: W tych przykładach kontenery listy Na pierwszy rzut oka wszystko działa. Ale zamieńmy się listami. Umieśćmy w kodzie listę z menu klasy-1 przed listą z menu klasy-2 (teraz jest ona niższa). Oto, co otrzymujemy w rezultacie: Pozycje w dolnym menu owijają się także wokół górnego menu, ponieważ efekt właściwości float nie został anulowany i dotyczy wszystkich kolejnych elementów. Jak rozwiązać ten problem? Aby to zrobić, musisz użyć właściwości clear, anuluje ona zawijanie elementu wokół innego elementu, jeśli ma ustawioną właściwość float. Oto zmodyfikowany przykład wykorzystujący właściwość clear:
Widać, że dolna lista nie owija się już wokół górnej, elementy nie nachodzą na siebie. Ale na pierwszej liście znajdują się tagi Poza tym w pracy nie zawsze wiemy, który element będzie podążał za elementem za pomocą float. Idealną opcją byłoby zamknięcie działania właściwości float w tym samym bloku, w którym jest ona otwarta. Odbywa się to za pomocą pseudoelementu. Oto kod:
Teraz mamy w 100% działający kod. Ta technika z właściwością float jest zwykle używana podczas projektowania stron internetowych w celu wyrównywania kolumn utworzonych przez tagi Ale dla kompletności tematu zapoznaliśmy się ze wszystkimi możliwe opcje. Chociaż mogą istnieć inne sposoby, na przykład użycie tabel CSS, wyszukiwarki zdecydowanie zalecają używanie tabel tylko zgodnie z ich przeznaczeniem, a nie do organizowania elementów nawigacyjnych lub czegokolwiek innego. Listy mogą być numerowane lub nienumerowane. Listy numerowane wyświetlane są z kodem:
Listy nienumerowane są wyświetlane z następującym kodem:
Każdy element dowolnej listy jest zamknięty w znaczniku li. Wszystkie elementy listy są ujęte w jeden wspólny znacznik ul lub ol. Style tych znaczników są zapisane w arkuszu stylów. Każdemu znacznikowi przypisano określone style projektowania. Wskazują wcięcia w tekście. W przypadku listy numerowanej style numerowania są określone dla każdego elementu. Standard Cyfry arabskie są opisane wartością dziesiętną. typ listy: dziesiętny; /*Cyfry arabskie*/ W przypadku listy punktowanej określ styl znaku — kwadraty lub okręgi. typ-stylu listy: okrąg; /*kółka*/ Każdej pozycji menu można przypisać obraz. obraz w stylu listy: url('ścieżka do obrazu'); Zwykle w szablonach lista numerowana jest formatowana za pomocą prostych liczb, a lista nienumerowana jest formatowana za pomocą czarnych kwadratów i okręgów. Jest nudno i bez wyrazu. Naprawmy to. Otwórz plik style.css. Znajdź sekcję o nazwie /* Elementy tekstowe */ Standardowy kod wygląda następująco: Spójrz na ten ładny projekt listy numerowanej. Tak jak? Powtórzmy. Znajdź style dla tagu ol. Dodaj do niego nowe właściwości. Ol ( dopełnienie: 0px 0 0 20px; margines: 0,5em 0 1,571em 1,9em; kolor: #2E2E2E; typ-stylu listy: brak; czcionka: 15px/17px Verdana, Arial, Helvetica, bezszeryfowy; indeks Z : 2; reset licznika: punkt; ) ol li ( margines na dole: 4px; wysokość linii: 1,6; kolor: #2E2E2E; pozycja: względna; ) ol li:before ( margines na dole: 4px; licznik-przyrost: punkt 1; wysokość linii: 24px; po lewej: 0px; tło: #BDC3C7; pozycja: absolutna; Abyś wiedział, gdzie i co musisz zmienić, aby pasował do Twojego projektu, rozbijmy ten kod na kawałki. typ-stylu listy: brak; — wyłącza wyświetlanie liczb standardowych before jest pseudoelementem znacznika ol li. Ma następujące style: W swoich stylach możesz ustawić dowolne kolory, wyrównania, rozmiary czcionek i wcięcia. Jedna z witryn dla kobiet zawiera bardzo atrakcyjne listy numerowane. Jak to jest realizowane? Spójrzmy na następujący kod: /*pierwsza liczba*/ ol li:pierwsze-dziecko ( obraz w stylu listy: url(ścieżka do obrazu z numerem 1); ) /*druga liczba*/ ol li:n-dziecko(2n) ( styl listy- image: url(ścieżka do obrazka o numerze 2); ) /*trzecia liczba*/ ol li:nth-child(3n) ( obraz w stylu listy: url(ścieżka do obrazka o numerze 3); ) /* czwarta liczba */ ol li:nth-child(4n) ( list-style-image: url(ścieżka do obrazka z liczbą 4); ) /*Następnie piszemy dokładnie to samo tylko dla kolejnych numerów pozycji*/ W kodzie takiej listy numerowanej należy wyszczególnić wszystkie numery pozycji i przypisać do każdego z nich unikalną ikonę. Jeśli używasz do 20 numerowanych pozycji na listach w artykułach, to musisz napisać pseudoklasę nth-child(An) 20 razy. Tak więc ostatnią w stylach jest pseudoklasa n-tego-dziecka(20n). Znajdź linie w pliku stylów opisujące projekt listy numerowanej (znaczniki ol li). Dodaj do niej pseudoklasę pierwszego dziecka. Skopiuj i wklej go raz, następnie zmień tę właściwość na nth-child(An) i skopiuj tyle liczb, ile chcesz mieć własną ikonę. Wprowadź numery pozycji. Dla każdej liczby dodaj właściwość list-style-image z własną unikalną ikoną. Jeśli ikony na stronie znajdują się daleko od elementów lub nachodzą na nie, należy edytować wyrównanie i wcięcie ikon cyfrowych lub tekstu elementów. Bardzo spodobała mi się ta wypunktowana lista. Ul ( dopełnienie: 11px 0 5px 0; ) ul li ( dopełnienie po lewej: 32px; margines na dole: 10px; czcionka: normalna 15px Verdana, bezszeryfowa; kolor: #2E2E2E; wysokość linii: 1,6; obramowanie na dole: 1px przerywany #ccc; dopełnienie-dół: 10px; ul li:before (treść: ""; pozycja: bezwzględna; szerokość: 27px; wysokość: 24px; lewy margines: -35px; margines górny: -2px; tło: adres URL ("images/sprite.jpg") 0px 2px bez powtórzeń; typ stylu listy: okrąg; ) ul li:nth-child(2n):before (treść: ""; pozycja: bezwzględna; szerokość: 27px; wysokość : 43px; lewy margines: -35px; tło: url("images/sprite.jpg") 0px -17px bez powtórzeń; Zamiast standardowego typu listy, możesz przypisać właściwość „ścieżka do ikony” - obraz w stylu listy:url. Ale wtedy musisz określić zewnętrzny lewy margines od krawędzi witryny - bez tego ikony nie będą wyświetlane i wyjdą poza obszar zawartości. Na potrzeby eksperymentu możesz przypisać wcięcia: Ul li(obraz w stylu listy: url(images/radio.png); lewy margines: 30px; ) Naprzemienność ikon można ustawić za pomocą właściwości nth-child(An). W powyższym przykładzie użyto pseudoelementu before. Kod zawiera jedną pseudoklasę n-te-dziecko(2n). Jego wartość wynosi 2. Okazuje się, że każdemu punktowi parzystemu odpowiada inna ikona. Jeśli zamiast 2n napiszesz 2n+1, to na punktach nieparzystych pojawi się kolejna ikona. Dla każdego elementu listy można określić podkreślenie. W powyższym przykładzie punkty podkreślono liniami przerywanymi. Do każdego elementu możesz także przypisać ramki, tła i ikony. Tylko nie przesadzaj. Naszym celem nie jest zachwycenie wszystkich fantazyjnym designem, ale poprawa jakości odbioru treści. Czasami trzeba umieścić kilka list o różnych stylach. Jeśli przypiszesz wspólne style, ten sam projekt zostanie przypisany do wszystkich list. Różne listy można wyświetlić, jeśli przypiszesz osobny identyfikator do tagu ol lub ul i wprowadzisz go w trybie html edycji artykułu. Cóż, w pliku stylu dla tego identyfikatora musisz napisać osobne style. Oto na przykład jedna fajna opcja projektowania treści: W HTML napisałbyś listę w ten sposób:
W CSS pisałbyś takie style: Ol#sod( dopełnienie: 0px 20px 10px 51px; margines: 0,5em 0 0em 1em; kolor: #2E2E2E; typ stylu listy: brak; tło: #f1f4f5; lewa krawędź: #BDC3C7 4px solidna; wyświetlacz: inline- blok; ) ol#sod li() ol#sod li:before(waga czcionki:normalna!ważne) Nowy styl różni się od głównego projektem tagu ol: tłem, stylem wyświetlania, linią po lewej stronie treści. Dzięki zastosowaniu w tekście kilku zestawień o różnej konstrukcji, prezentacja informacji stanie się jeszcze ciekawsza. Podczas wystawiania dowolnych przedmiotów możesz ustawić niektóre ikony, a podczas wystawiania akcji możesz ustawić inne. Tutaj projekt jest ograniczony tylko przez Twoją wyobraźnię. Metody te mają również zastosowanie przy projektowaniu pozycji menu, nagłówków i wszelkich innych elementów witryny. Jak zapisać je w kodzie HTML? Jeden fragment kodu otacza kotwicę linku, a drugi fragment kodu umieszczany jest obok miejsca, do którego mamy zostać przekierowani po kliknięciu w link.
A w tekście artykułu musisz napisać to: Nagłówek 1… Nagłówek 2… Nagłówek 3… Może bardziej doświadczeni webmasterzy mogliby mnie w czymś poprawić. Po prostu radzę to, co sam wypróbowałem w praktyce. Jeśli nadal masz jakieś pytania, chętnie je zobaczę w komentarzach. Ageeva Weronika. Możesz być także zainteresowany: Jeśli kiedykolwiek próbowałeś zmienić style CSS numerów linii (cyfr) na uporządkowanych listach Oto najprostszy przykład listy bez stylu: Przyjrzyjmy się kilku sposobom rozwiązania powyższego problemu. Tradycyjnym sposobem rozwiązania tego problemu jest ukrycie numerów linii przypisywanych automatycznie przez przeglądarkę. W tym przypadku używana jest właściwość list-style: none; . Zgadzam się, wygląda to na zbędne i nieelastyczne. Ukrywamy automatycznie przypisane numery sekwencyjne i zastępujemy je ręcznie określonymi wartościami, zaśmiecamy układ itp. Zobaczmy, jak możemy osiągnąć ten sam wynik bez zaśmiecania układu i używania pseudoelement::before i właściwości CSS content , counter-inkrementacja , counter-reset . Najpierw udostępnimy kod i wersję demonstracyjną, a potem ustalimy, co jest co. Jak widać, kod HTML pozostaje czysty i piękny. W tym przypadku cała stylizacja elementów listy jest przenoszona do CSS. Spójrzmy punkt po punkcie: Więcej szczegółów na temat liczników CSS można znaleźć w Uwaga: obsługiwany jest tylko atrybut odwrócony Przeglądarki Chrome i Safari. Początek: Ustawia początkową wartość całkowitą, od której rozpocznie się numeracja elementów na liście. Przykład " Lub
Rysunek 2. Przykład nr 2 w akcji.
Rysunek 3. Przykład nr 3 w pracy. Drugi sposób
Rysunek 4. Przykładowe działanie.
Rysunek 5. Przykładowe działanie. mają czerwoną ramkę o grubości 1 piksela. Jednak górna lista, która korzysta z właściwości display, zawiera elementy listy. Jednak elementy listy utworzonej przy użyciu właściwości float wypadają z kontenera.
Rysunek 6. Przykładowe działanie.
.
Rysunek 7. Przykładowe działanie.
Rysunek 8. Przykładowe działanie. . W ten sposób uzyskujemy normalną konstrukcję słupów z wymaganym wyrównaniem wysokości. Kiedy tworzymy menu, w większości przypadków wysokość bloków nie jest dla nas istotna; prawie zawsze jest taka sama. Dlatego stosowanie reguły (display: inline-block) w takich przypadkach jest w pełni uzasadnione.
Lista z liczbami
Lista ze znacznikami wyboru lub innymi symbolami
typ-stylu listy: kwadratowy; /*kwadraty*/Gdzie znajdują się style list zapisane w szablonie Twenty Eleven?
Jak stworzyć listę numerowaną?
Lista numerowana z użyciem tła
licznik resetujący: punkt; — ustawia zmienną dla licznika numerującego
pozycja: względna; — umieszcza numerację obok samych pozycji
treść: licznik(punkt); — wyświetla wartość zmiennej
przeciwprzyrost: punkt 1; — zwiększa licznik o 1
pozycja: absolutna;
tło: #BDC3C7; — tło dla liczb (tło można ustawić za pomocą koloru lub pięknej ikony
marża – marże zewnętrzne
wyściółka – wyściółka wewnętrzna
kolor – kolor tekstu elementu
tło – tło
text-align – wyrównanie tekstu
Font-weight – grubość czcionki (nasycenie)Lista numerowana z unikalnym obrazem dla każdego elementu
Jak utworzyć listę punktowaną (nienumerowaną)?
Lista punktowana ul li z naprzemiennymi ikonami
Jak wyświetlić na stronie kilka list o różnych wzorach?
Treść
Jak utworzyć linki zakotwiczone na liście treści?
Treść
, to prawdopodobnie napotkałeś problemy. Nie da się dotrzeć do stylów tych elementów za pomocą selektorów CSS. Jednak dość często projektowanie interfejsu wiąże się ze zmianą jego koloru, tła, rozmiaru itp.
HTML
Tradycyjnie niezdarny sposób.
css
li(styl listy: brak; ) .num( kolor: biały; tło: #2980B9; wyświetlacz: blok inline; wyrównanie tekstu: środek; margines: 5 pikseli 10 pikseli; wysokość linii: 40 pikseli; szerokość: 40 pikseli; wysokość: 40 pikseli) HTML
Piękny i prawidłowy sposób.
css
ol(reset licznika: mójLicznik; ) li(styl listy: brak; ) li:before (przyrost licznika: mójLicznik; treść:licznik(myLicznik); kolor: biały; tło: #2980B9; wyświetlacz: blok inline; wyrównanie tekstu: margines: 5 pikseli 10 pikseli; wysokość linii: 40 pikseli; HTML
.
Opis
Atrybuty
odwrócony: Określa, że elementy listy będą ułożone w kolejności malejącej (a nie rosnącej). Możliwe wartości atrybut logiczny:
- Cyfry rzymskie pisane małymi literami (i, ii, iii, iv...). Etykietka
obsługuje także globalne atrybuty i zdarzenia
Domyślny styl ol (wyświetlanie: blok; typ stylu listy: dziesiętny; górny margines: 1em; margines dolny: 1em; margines lewy: 0; prawy margines: 0; dopełnienie lewy: 40px; )
Mleko
Co zrobić, jeśli dysk flash nie jest sformatowany, dysk jest chroniony przed zapisem
103583
Aktualizacja: 20.04.2021
Nagłówki witryny
