Toteuttamiseen käytetään ol-tunnistetta. Esimerkkejä ul li -luetteloiden CSS:n tyylikkäästä suunnittelusta
Hei, rakkaat blogisivuston lukijat. Tänään, osana tätä osiota, haluan puhua erilaisista HTML-listoista, joita voidaan luoda erityisesti tätä varten suunniteltujen UL-, OL-, LI- ja DL-tunnisteiden perusteella. UL- ja LI-parit luovat luettelomerkityt luettelot, OL- ja LI-parit numeroidut luettelot ja DL-, DT- ja DD-elementit ns. määritelmälistauksia. Tarkastellaan myös lyhyesti sisäkkäisten rakenteiden luomisen periaatteita.
Haluaisin muistuttaa, että olemme jo onnistuneet puhumaan modernin sekä taulukkoasettelun perusteista (). Lisäksi koskettelimme perusasioita ja opimme läpi.
Luetteloluettelot perustuvat UL- ja LI-tunnisteisiin
UL-tunnistetta käytetään luettelomerkittyjen luetteloiden luomiseen, ja OL-tunnistetta käytetään numeroitujen luetteloiden luomiseen. Nämä tunnisteet ovat pareittain ja lohkotunnisteita, aivan kuten LI-elementti.
Aloitus- ja sulkemistunnisteiden välissä on yksittäisiä luettelokohteita, jotka vuorostaan on suljettu avaavaan ja sulkevaan LI-elementtiin. Ylä ja ala HTML-listat Selain lisää yhdelle riville sisennyksen, joka on samanlainen kuin kappaletunnisteen luoma sisennys.
Katsotaanpa esimerkiksi luettelomerkkivaihtoehtoa, joka voi näyttää tältä:
- Ensimmäinen rivi
- Toinen
- Viimeinen elementti
Vain LI-elementit voivat olla avaus- ja sulkemistunnisteiden sisällä, ja näiden elementtien (lauseiden) sisään voit lisätä mitä tahansa sisältöä (tekstiä, kuvia, otsikoita, kappaleita, linkkejä ja jopa muita luetteloita).
Ne. UL tarjoaa vain luettelomerkityn (ei järjestetyn) luettelon ja kaiken, mitä näet verkkosivu siinä on toteutettu LI-elementtien sisällöllä.
UL:ssa voit muuttaa merkin tyyppiä määrittämällä eri arvot "Tyyppi"-attribuutille. Jos UL-elementille ei ole määritetty "Tyyppiä" (merkkien ulkoasun hallinta), merkin oletusulkoasu näytetään (levy - ympyrä, joka on täytetty tekstin värillä):
- — täytetty ympyrä (oletus);
- - täyttämätön ympyrä;
- - neliö
Yllä olevissa esimerkeissä määritimme "Type"-attribuutin UL-elementissä käyttämällä tämä tyyppi merkit kaikille kohteille. Mutta "Type"-attribuutti voidaan määrittää myös jokaiselle yksittäiselle LI-tunnisteelle, jolloin tälle kohteelle voidaan määrittää oma merkkityyppi.
Esimerkki luettelomerkitystä luettelosta, jossa on erilaisia tyyppejä merkki jokaiselle tuotteelle:
- Merkki täytetyn levyn muodossa
- Merkki maalaamattoman levyn muodossa
- Neliö
Numeroidut luettelot HTML-muodossa OL-tunnisteen perusteella
Numeroidun listauksen luomiseen käytetään OL-tageja, joihin LI-elementit sijoitetaan jälleen. OL ja LI, kuten jo mainitsin, ovat lohkopohjaisia (eli ne yleensä vievät kaiken käytettävissä olevan tilan leveydeltä) eikä OL:n sisään voi sijoittaa mitään paitsi LI-elementtejä.
Osoittautuu, että OL ja UL ovat palvelutunnisteita, joita tarvitaan vain osoittamaan selaimelle, minkä tyyppistä luetteloa olemme luomassa (luettelomerkitty tai numeroitu). Kun kyseessä on numeroitu nimike, kunkin kohteen vasemmalla puolella emme näe merkkiä, vaan numeron ja pisteen sen takana:
- Ensimmäinen rivi
- Toinen kohta
- Kolmas rivi
Kuten edellä mainitsin, UL-, OL- ja LI-elementeillä on mahdollisuus käyttää TYPE-attribuuttia. Sen avulla voit määrittää merkin tyypin tai määrittää, mitä numeroita tai kirjaimia käytetään luettelon kohteiden numerointiin. Numeroidussa luettelossa tämän attribuutin parametreilla voi olla seuraavat arvot:
- — Numerointi suoritetaan tavallisilla arabialaisilla numeroilla (oletusarvoisesti käytetään samaa vaihtoehtoa, jos tyyppi-attribuuttia ei ole).
- — isot kirjaimet numerointina;
- - pienet kirjaimet;
- - isot roomalaiset numerot;
- - pienet roomalaiset numerot;
Esimerkki numeroidusta luettelosta, jossa kunkin kohteen numerointi on erilainen:
- numeroitu suurilla roomalaisilla numeroilla
- Numerointi pienillä latinalaisilla kirjaimilla
- Numerointi pienillä roomalaisilla numeroilla
Numeroituja listoja luotaessa on myös mahdollista aloittaa numerointi ei yhdestä, vaan START-attribuutissa määritetystä numerosta. Esimerkiksi:
- Ensimmäinen elementti, jonka numero on määritetty OL-tunnisteessa start="23"-attribuutilla
- Seuraava kohde, numero yksi korkeampi
- Toinen vielä
OL:ssa voit myös aloittaa uuden numeroinnin mistä tahansa arvosta alkaen mistä tahansa alkiosta kirjoittamalla VALUE-attribuutin tarvittavalla numerolla tämän alkion alku-LI:hen. Esimerkiksi:
- Ensimmäinen piste numero yksi
- Tämä elementti saa arvo="32"-attribuutissa määritetyn numeron
- Tuote, jolla on suuri määrä
Listojen ulkoasun suunnittelu CSS:ssä (tyylisivut)
Mutta yleensä nyt ulkonäkö merkkejä ei määritellä TYPE-attribuutin kautta, vaan , jolle on määritetty vastaavat ominaisuudet.
Annan tässä vain esimerkin erilaisista luettelomerkeistä numeroimattomille listoille, joiden ulkoasu on tehty läpi erillinen tiedosto peräkkäisillä tyylisivuilla.
- Ensimmäinen kohta
- Toinen
- Kestää
Mutta puhumme siitä seuraavissa artikkeleissa. Näin UL-merkkien ulkonäkö tässä blogissa on asetettu. Kuvia käytetään merkeinä: numeroimattoman luettelon tavallisille kohteille - , numeroimattoman luettelon sisäkkäisille kohteille - .
Erikois- ja sisäkkäiset luettelot HTML-koodissa
Kolmas ja viimeinen tyyppi on nimeltään "määrittelyluettelot", ja ne määritetään käyttämällä kolmea tunnistetta - DL, DT ja DD. DL kertoo selaimelle, että seuraava on luettelo määritelmistä.
Tyypillisesti tätä tyyppiä käytetään (tai oli tarkoitettu käytettäväksi) kirjoitettaessa sanakirjamerkintöjä, jotka koostuvat termeistä (sisältyy DT-tunnisteisiin) ja niiden kuvauksista (sisältyy DD-tunnisteisiin).
- Ensimmäinen lukukausi
- Kuvaus
- Toinen termi
- Sen kuvaus
Jos katsot yllä olevaa esimerkkiä, huomaat, että DD-elementti (termin kuvaus) on siirtynyt (40 pikselillä) suhteessa DT-elementtiin (itse termiin).
Yleensä DL, DT ja DD ovat lohkotunnisteita, ja DT-elementin sisään voidaan lisätä vain sisältöä, jossa on upotettuja tunnisteita (osallistui, että otsikoiden ja kappaleiden lohkoelementtejä ei voi käyttää DT:n sisällä). Ja DD-tunnisteiden sisään voit lisätä mitä tahansa elementtiä, sekä rivin että lohkon.
Sisäkkäinen luettelo Html:ssä se luodaan analogisesti yksinkertaisen kanssa, mutta pääluettelon sisällä osa kohteista on jälleen suljettu avaus- ja lopputunnisteeseen UL tai OL.
Huomaa, että sen alkion sulkeva LI, johon sisäkkäinen kohde luodaan, sijoitetaan vain sisäkkäisen luettelon koko koodin jälkeen (tämä on erittäin tärkeää sen oikea näyttö verkkosivulla). Sisäkkäinen luettelo voi näyttää tältä:
- Päänumeron ensimmäinen kappale
- Toinen kohta
- Ensimmäinen sisäkkäisen luettelomerkityn elementti
- Toinen
- Kolmas ja viimeinen kohta
- Kolmas elementti numeroitu
Onnea sinulle! Nähdään pian blogisivuston sivuilla
Saatat olla kiinnostunut
Linkin ja kuvan (valokuva) lisääminen HTML:ään - IMG- ja A-tunnisteet Valitse, Optio, Textarea, Label, Fieldset, Legend - tags HTML-lomakkeet avattavat luettelot ja tekstikenttä 
Sivuston HTML-lomakkeet - tunnisteet Form, Input ja Select, Option, Textarea, Label ja muut verkkolomakeelementtien luomiseen 
Kuinka värit asetetaan HTML- ja CSS-koodissa, RGB-sävyjen valinta taulukoissa, Yandex-lähtö ja muut ohjelmat 
Upota ja objekti - HTML-tunniste ja mediasisällön (video, flash, ääni) näyttämiseen verkkosivuilla 
Otsikkotunnisteet ja attribuutit H1-H6, vaakasuora viiva Hr, rivinvaihto Br ja kappaleenvaihto P Html 4.01 -standardin mukaisesti 
Taulukot HTML-muodossa - Taulukko-, Tr- ja Td-tunnisteet sekä Colspan, Cellpadding, Cellspacing ja Rowspan niiden luomiseen 
Mikä on hypertekstin merkintäkieli Html ja kuinka tarkastella luetteloa kaikista W3C-validaattorissa olevista tunnisteista 
Fontti (kasvot, koko ja väri), Blockquote ja Pre-tagit – vanha tekstin muotoilu puhtaalla HTML:llä (ei CSS:ää käytössä) 
Iframe ja Frame - mitä ne ovat ja miten kehyksiä käytetään parhaiten HTML-muodossa 
Img - Html-tunniste kuvan lisäämiseen (Src), tekstin tasaamiseen ja käärimiseen sen ympärille (tasaa) sekä taustan (taustan) asettamiseen
Hypertekstin merkintäkielessä HTML on tunniste
- , jota käytetään luettelomerkkiluetteloiden luomiseen. Sitä tukevat kaikki nykyaikaiset selaimet ja voit näyttää elementit järjestyksessä, joka ei vaadi numerointia. Se näyttää esimerkiksi hyvin usein valikon kohdat ja kaiken, mikä liittyy sivulla oleviin luetteloihin: ruokia, tuotteita, laitteita, työkaluja ja paljon muuta, mikä on lueteltava ilmoittamatta tietyn kohteen prioriteettia.
- Elementti #1
- Elementti #2
- Elementti #3
- ...
- Elementti #1
- Elementti #2
- Elementti #3
- Elementti #1
-
- Kohde 2-1
- Elementti 2-2
- Elementti 2-3
- Elementti #3
- ...
- Elementti #1
- Elementti #2
- Elementti #1
- Elementti #2
- Elementti #1
- Elementti #2
- Elementti #1
- Elementti #2
- ...
- levy - ympyrän muotoinen merkki (esimerkki oli yllä)
- ympyrä - merkki läpinäkyvän ympyrän muodossa (esimerkki oli yllä)
- neliö - merkki neliön muodossa (esimerkki oli yllä)
- desimaali - merkki numeroidun luettelon muodossa arabialaisin numeroin: 1, 2, 3, ...
- desimaali-alkunolla - merkki numeroidun luettelon muodossa arabialaisin numeroin, jonka alussa on nolla: 01, 02, 03, ...
- alempi-roomalainen - merkki numeroidun luettelon muodossa roomalaisissa aakkosissa pienillä kirjaimilla: i, ii, iii, iv, v
- ylempi roomalainen - merkki numeroidun luettelon muodossa roomalaisissa aakkosissa isoilla kirjaimilla: I, II, III, IV, V
- alempi latinalainen - merkki luettelon muodossa latinalaisissa aakkosissa pienillä kirjaimilla: a, b, c, d, ...
- ylempi latina - merkki luettelon muodossa latinalaisissa aakkosissa isoilla kirjaimilla: A, B, C, D, ...
- alempi kreikka - merkki luettelon muodossa kreikkalaisissa aakkosissa pienillä kirjaimilla
- ylempi kreikka - merkki luettelon muodossa kreikkalaisissa aakkosissa isoilla kirjaimilla
- . Kun määritetään tunnisteeseen attribuutti
- kaikki luettelon kohteet näytetään määritteen osoittamalla tavalla. Mutta voimme antaa tälle tai tuolle elementille oman näytön. Esimerkki kuvassa:
- Elementti #1
- Elementti #2
- Elementti #3
- Elementti #1
- Elementti #2
- Elementti #3
- Elementti #1
- Elementti #2
- Elementti #3
- Elementti #1
- Elementti #2
- Elementti #3
- alla olevan kuvan mukaisesti.
- Ensimmäinen kohta
- Toinen kohta
- Kolmas kohta
Jos et määritä muita määritteitä ja kirjoita vain tunniste
- , niin oletuksena on luettelo arabialaisista numeroista (1, 2, 3,...), kuten esimerkissä 11.3.
- täsmällisyyden luominen (et koskaan myöhästy mistään);
- parannuskeino täsmällisyyteen (sinulla ei ole koskaan kiirettä);
- muutos ajan ja kellojen käsityksessä.
- arabialaiset numerot (1, 2, 3, ...);
- latinalaiset isot kirjaimet (A, B, C, ...);
- pienet latinalaiset kirjaimet (a, b, c, ...);
- isot roomalaiset numerot (I, II, III, ...);
- pienet roomalaiset numerot (i, ii, iii, ...).
- Kuningas Magnum XLIV
- Kuningas Siegfried XVI
- Kuningas Sigismund XXI
- Kuningas Husbrandt I
- kohta 1
- kohta 2
- kohta 3
- kohta 1
- kohta 1
- kohta 1
- kohta 1
- kohta 2
- kohta 3
- Otsikko 1
- Otsikko 2
- Otsikko 3
- (luetteloelementti).
Selaimen tuki
Attribuutti
Ooppera
IExplorer
Reunaaloita, kirjoita Kyllä Kyllä Kyllä Kyllä Kyllä Kyllä päinvastainen Kyllä Kyllä Kyllä Kyllä Ei Ei Attribuutit
Attribuutti Merkitys Kuvaus kompakti kompakti Ei tueta HTML5:ssä.
Määrittää, että luettelon tulee olla normaalia pienempi (rivin korkeus: 80 %).
Käytä CSS:ää tämän määritteen sijaan.päinvastainen Määrittää, että numeroidun (lajitellun) luettelon järjestyksen tulee olla laskeva. Attribuuttia ei tueta Internet-selaimet Explorer ja Edge. aloita määrä Määrittää numeroidun (järjestetyn) luettelon aloitusarvon. Arvojen on oltava kokonaislukuja, negatiiviset arvot ovat sallittuja. Käytettäessä kirjaimia (tyyppi = "A" ja tyyppi = "a"), määritteen arvossa määritetty numero on kirjaimen järjestysnumero aakkostossa. Esimerkiksi start = "4" vastaa kirjainta "D" ja lista alkaa hänestä. Käytettäessä arvoa start = "27", laskuri nollataan ja luettelosta tulee kaksinumeroinen ("27" = "AA", "28" = "AB", "29" = "AC". .). tyyppi 1 (oletus)
A (iso)
a (pienet kirjaimet)
minä (roomalainen iso)
minä (roomalainen pieni)Määrittää luettelomerkin tyypin, jota käytetään luotaessa numeroitu (järjestetty) luettelo. Käyttöesimerkki
Esimerkki tagin käytöstä <ol> <span> - Ensimmäinen kohtaToinen kohta
- Kolmas kohta
- Ensimmäinen kohta.
- Toinen kohta.
- Kolmas kohta.
Se näyttää sivulla tältä:
Jos haluat luettelon alkavan tietystä numerosta (ei 1:stä), sinun on määritettävä tagin aloitusattribuutti
-
.
Esimerkiksi:
Toinen mielenkiintoinen attribuutti on type , jonka avulla voit määrittää aakkosnumeron ("A" - isot kirjaimet, "a" - pienet kirjaimet) tai roomalaisten numeroiden ("I" - isot kirjaimet, "i" - pienet kirjaimet).
Katsotaanpa esimerkkiä, joka esittää kaikki type-attribuutin mahdolliset arvot (muut kuin oletusarvo):
Esimerkki HTML-tunnisteen type-attribuutin käytöstä<оl> - >
- Kolmas kohta
- Ensimmäinen kohtaToinen kohta
- Kolmas kohta
- Ensimmäinen kohtaToinen kohta
- Kolmas kohta
- Ensimmäinen kohtaToinen kohta
- Kolmas kohta
- ):
Esimerkki numeroidusta luettelosta, joka on sisäkkäinen toisen numeroidun luettelon sisällä <span> -
Ensimmäinen kohta
- Kolmas kohta Toinen kohta
-
Ensimmäinen kohta
- Kolmas kohta
Esimerkki 11.3. Luo numeroitu luettelo
Numeroitu luettelo Työskentely ajan kanssa
Tämän esimerkin tulos on esitetty kuvassa. 11.3.
Riisi. 11.3. Numeroitu luettelonäkymä
Huomaa, että numeroitu luettelo lisää myös automaattisen sisennyksen tekstin ylä-, ala- ja vasemmalle puolelle.
Seuraavat arvot voivat toimia numerointielementteinä:
Numeroidun luettelon tyypin ilmoittamiseksi käytä tagin type-attribuuttia
- . Sen mahdolliset arvot on annettu taulukossa. 11.2.
Taulukko 11.2. Numeroidun luettelon tyypit
Listan tyyppi HTML-koodi Esimerkki Arabialaiset numerot
1. Cheburashka
2. Krokotiili Gena
3. ShapoklyakLatinalaisen aakkoston isot kirjaimet
A. Cheburashka
B. Krokotiili Gena
C. ShapoklyakLatinalaisen aakkoston pienet kirjaimet
a. Cheburashka
b. Krokotiili Gena
c. ShapoklyakRoomalaiset numerot sisään isot kirjaimet
I. Cheburashka
II. Krokotiili Gena
III. ShapoklyakRoomalaiset numerot pienillä kirjaimilla
i. Cheburashka
ii. Krokotiili Gena
iii. ShapoklyakJos haluat aloittaa luettelon tietyllä arvolla, käytä tagin start-attribuuttia
- . Sillä ei ole väliä, minkä tyyppiseksi luettelo on asetettu käyttämällä type , aloitusattribuutti toimii samalla tavalla sekä roomalaisilla että arabialaisilla numeroilla. Esimerkki 11.4 näyttää kuinka luodaan luettelo isoilla roomalaisilla numeroilla, jotka alkavat kahdeksalla.
Esimerkki 11.4. Listan numerointi
roomalaiset numerot Tämän esimerkin tulos on esitetty kuvassa. 11.4.
Riisi. 11.4. Numeroitu luettelo roomalaisilla numeroilla
Listat voivat olla numeroituja tai numeroimattomia.
Numeroidut luettelot näytetään koodilla:
- Lista numeroineen
Numeroimattomat luettelot näytetään seuraavalla koodilla:
- Luettelo valintamerkeillä tai muilla symboleilla
Jokainen luettelon kohde on li-tunnisteen sisällä. Kaikki luettelon kohteet on suljettu yhteen yhteiseen ul- tai ol-tunnisteeseen. Näiden tunnisteiden tyylit kirjoitetaan tyylisivulle.
Jokaiselle tunnisteelle on määritetty erityiset suunnittelutyylit. Ne osoittavat tekstin sisennykset.
Numeroidulle luettelolle on määritetty numerointityyli jokaiselle kohteelle.
Normaalit arabialaiset numerot kuvataan arvolla desimaali.
list-style-type: desimaali; /*Arabialaiset numerot*/
Määritä luettelomerkitylle luettelolle merkkityyli - neliöt tai ympyrät.
lista-tyyli-tyyppi: ympyrä; /*piirit*/
lista-tyyli-tyyppi: neliö; /*neliöt*/Jokaiselle valikon vaihtoehdolle voidaan määrittää kuva.
list-style-image: url('polku kuvaan');
Tyypillisesti malleissa numeroitu luettelo on muotoiltu yksinkertaisilla numeroilla ja numeroimaton luettelo mustilla neliöillä ja ympyröillä. Se on tylsää ja ilmeetöntä. Korjataan tämä.
Missä luettelotyylit on kirjoitettu Twenty Eleven -malliin?
Avaa style.css-tiedosto. Etsi osio nimeltä /* Tekstielementit */
Vakiokoodi näyttää tältä:
Kuinka luoda numeroitu luettelo?
Numeroitu luettelo taustalla
Katso tätä söpöä numeroitua luettelomallia.
Pitää? Toistetaan.
Etsi tyylejä ol-tunnisteelle. Lisää siihen uusia ominaisuuksia.
Ol ( täyte: 0px 0 0 20px; marginaali: 0,5 em 0 1,571 em 1,9 em; väri: #2E2E2E; luettelotyyli: ei mitään; fontti: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-indeksi : 2; vastanollaus: piste pisteen korkeus: 24px: #BDC3C7;
Jotta ymmärrät, missä ja mitä sinun on muutettava malliisi sopivaksi, puretaan tämä koodi pala kerrallaan.
list-style-type: ei mitään; — poistaa käytöstä vakionumeroiden ulostulon
vastanollaus: piste; — asettaa muuttujan numerointilaskimelle
asema: suhteellinen; — sijoittaa numerot itse kohteiden viereenEnnen on pseudoelementti ol li -tunnisteelle. Siinä on seuraavat tyylit:
sisältö: counter(point); — näyttää muuttujan arvon
vastalisäys: piste 1; — kasvattaa laskuria yhdellä
sijainti: absoluuttinen;
tausta: #BDC3C7; — tausta numeroille (tausta voidaan asettaa värillä tai kauniilla kuvakkeella
marginaali – ulkoiset marginaalit
pehmuste – sisäinen pehmuste
color – elementin tekstin väri
tausta – tausta
text-align – tekstin tasaus
font-weight – fontin paksuus (kylläisyys)Voit määrittää tyyleissäsi mitä tahansa värejä, tasauksia, kirjasinkokoja ja sisennyksiä.
Numeroitu luettelo, jossa on yksilöllinen kuva jokaiselle tuotteelle
Yhdellä naisten sivustolla on erittäin houkuttelevia numeroituja luetteloita.
Miten tämä toteutetaan? Katsotaanpa seuraavaa koodia:
/*ensimmäinen numero*/ ol li:first-child ( list-style-image: url(polku kuvaan numerolla 1); ) /*toinen numero*/ ol li:nth-child(2n) ( list-style- image: url(polku kuvaan numerolla 2 ) /*kolmas numero*/ ol li:nth-child(3n) ( list-style-image: url(polku kuvaan numerolla 3); ) /* neljäs numero */ ol li:nth-child(4n) ( list-style-image: url(polku kuvaan numerolla 4); ) /*Seuraavaksi kirjoitetaan täsmälleen sama vain seuraaville nimikenumeroille*/
Tällaisen numeroidun luettelon koodissa sinun on lueteltava kaikki nimikkeiden numerot ja määritettävä kullekin niistä yksilöllinen kuvake.
Jos käytät artikkelien luetteloissa enintään 20 numeroitua kohdetta, sinun on kirjoitettava pseudoluokan nth-child(An) 20 kertaa. Eli tyyleissä viimeinen on nth-child(20n) pseudoluokka.
Etsi tyylitiedostosta rivit, jotka kuvaavat numeroidun listan rakennetta (ol li tagit).
Lisää siihen ensimmäisen lapsen pseudoluokka. Kopioi ja liitä se kerran, muuta tämän ominaisuuden arvoksi nth-child(An) ja kopioi niin monta numeroa kuin haluat saada oman kuvakkeen. Syötä tuotenumerot.
Lisää jokaiselle numerolle listatyylinen kuva-ominaisuus, jossa on oma ainutlaatuinen kuvake.
Jos sivuston kuvakkeet sijaitsevat kaukana kohteista tai ovat päällekkäin, sinun on muokattava digitaalisten kuvakkeiden tai kohteiden tekstin kohdistusta ja sisennystä.
Kuinka luodaan luettelomerkitty (numeroimaton) luettelo?
Luettelomerkitty luettelo ul li vuorottelevilla kuvakkeilla
Pidin todella tästä luettelosta.
Ul ( täyttö: 11px 0 5px 0; ) ul li (täyttö-vasen: 32px; marginaali-ala: 10px; fontti: normaali 15px Verdana, sans-serif; väri: #2E2E2E; rivin korkeus: 1,6; reuna-ala: 1px katkoviiva #ccc ("images/sprite.jpg") 0px 2px no-repeat-type: circle; ul li:nth-child(2n):before : 43px margin-left: -35px background: url("images/sprite.jpg") 0px -17px no-repeat;
Tavallisen listatyylityypin sijaan voit määrittää "polku kuvakkeeseen" -ominaisuuden - list-style-image:url. Mutta sitten sinun on määritettävä ulkoinen vasen marginaali sivuston reunoista - ilman sitä kuvakkeita ei näytetä ja ne ylittävät sisältöalueen.
Voit määrittää kokeeseen sisennykset:
Ul li( list-style-image: url(images/radio.png); margin-left: 30px; )
Kuvakkeiden vuorottelu voidaan asettaa nth-child(An) -ominaisuuden avulla. Yllä olevassa esimerkissä käytetään pseudoelementtiä ennen.
Koodi sisältää yhden pseudoluokan n.-lapsi(2n). Sen arvo on 2. Osoittautuu, että jokainen parillinen piste vastaa toista kuvaketta. Jos kirjoitat 2n sijasta 2n+1, parittoihin pisteisiin ilmestyy toinen kuvake.
Voit määrittää jokaiselle luettelokohdalle alaviivan. Yllä olevassa esimerkissä pisteet on alleviivattu katkoviivoilla.
Voit myös määrittää kullekin kohteelle kehyksiä, taustoja ja kuvakkeita. Älä vain liioittele sitä. Tavoitteenamme ei ole räjäyttää kaikkia hienolla suunnittelulla, vaan parantaa sisällön havainnoinnin laatua.
Kuinka näyttää sivulla useita erilaisia luetteloita?
Joskus sinun on asetettava useita luetteloita eri tyyleillä.
Jos määrität yhteisiä tyylejä, sama malli määritetään kaikille luetteloille. Erilaisia luetteloita voidaan näyttää, jos määrität erillisen tunnuksen ol- tai ul-tunnisteelle ja syötät sen artikkelin muokkaustilassa html-tilassa. No, tämän tunnuksen tyylitiedostoon sinun on kirjoitettava erilliset tyylit.
Tässä on esimerkiksi yksi mukava sisällön suunnitteluvaihtoehto:
HTML:ssä kirjoitat listan seuraavasti:
- Sisältö
CSS:ssä kirjoitat tällaisia tyylejä:
Ol#sod( täyte: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; väri: #2E2E2E; list-style-type: ei mitään; tausta: #f1f4f5; reunus-vasen: #BDC3C7 4px kiinteä; näyttö: inline- block ) ol#sod li() ol#sod li:before( font-weight:normal !important )
Uusi tyyli eroaa päätyylistä ol-tunnisteen suunnittelussa: tausta, näyttötyyli, rivi sisällön vasemmalla puolella.
Käyttämällä tekstissä useita eri tyylisiä listoja teet tiedon esittämisestä entistä mielenkiintoisemman. Kun luet mitä tahansa kohteita, voit asettaa joitain kuvakkeita, ja kun luet toiminnot, voit asettaa muita. Tässä suunnittelua rajoittaa vain mielikuvituksesi.
Näitä menetelmiä voidaan soveltaa myös valikkokohtien, otsikoiden ja muiden sivuston elementtien suunnitteluun.
Kuinka luoda ankkurilinkkejä sisältöluetteloon?
Kuinka kirjoittaa ne HTML-koodiin? Yksi koodinpätkä kehystää linkin ankkurin, ja toinen koodinpätkä sijoitetaan sen paikan viereen, johon meidät on ohjattava linkkiä napsauttamalla.
- Sisältö
Ja artikkelin tekstiin sinun on kirjoitettava tämä:
Otsikko 1… Otsikko 2… Otsikko 3…
Ehkä kokeneemmat verkkovastaavat voivat korjata minua jostain. Kerron vain, mitä olen itse käytännössä kokeillut.
Jos sinulla on vielä kysyttävää, näen ne mielelläni kommenteissa.
Ageeva Veronica.
Saatat myös olla kiinnostunut:
HTML-tunnisteetMerkitys ja sovellus
Numeroitu (järjestetty) luettelo on kohteille, jotka näkyvät tietyssä järjestyksessä. Numeroitu luettelo alkaa tunnisteella
- (lyhenne englannista tilattu lista- tilattu lista). Jokainen luetteloelementti alkaa tunnisteella
- >
- >
- >
Huomaa, että on sallittua luoda numeroituja (järjestettyjä) luetteloita sisäkkäin muihin numeroituihin listoihin (luetteloelementin sisällä
Se näyttää sivulla tältä.
Koodi näyttää tältä:
Tagimerkkien vaihtaminen
- CSS:n avulla
Tunnisteen luomat luettelomerkit
- , voidaan merkitä mielivaltaisilla kuvilla. CSS:ää käytetään merkin tyypin vaihtamiseen. Esimerkiksi
Ja tältä se näyttää sivulla:
C käyttämällä CSS:ää voimme asettaa muun tyyppisen merkkinäytön. Mutta sinun on muistettava tämä, kun määrität minkä tahansa tyylin tunnisteelle
- , se koskee kaikkia luettelon osia.
Numeroidut luettelot ovat kokoelma elementtejä sarjanumeroineen. Numeroinnin tyyppi ja tyyppi riippuvat tunnisteen attribuuteista
- , jota käytetään luettelon luomiseen. Jokainen numeroidun luettelon kohde on merkitty tunnisteella
Tunnisteen syntaksi
Tämä koodi muunnetaan luettelomerkityksi luetteloksi sivustolla:
Tag
- vaatii pakollinen käyttö sulkeva tagi
Luetteloelementtien muodostamiseen käytetään parillista tagia. Aloitus- ja sulkemistunnisteiden välissä on yksittäisiä sanoja, lauseita, kappaleita, kuvia, koodinpätkiä ja paljon muuta, jotka ovat luettelomerkkiluettelon sisältö.
Mikä voi olla luettelomerkityn luettelon sisältö?Tämä voi olla monenlaista tekstiä, mukaan lukien yksittäisiä sanoja, lauseita ja kappaleita, kuvia, sisäkkäisiä luetteloita, php-koodin paloja ja paljon muuta, joka vaatii yksinkertaisen merkinnän.
Jokainen luettelomerkitty luettelokohde on sisennetty oletusarvoisesti 40 pikseliä oikealle. Käyttämällä CSS-tyylejä, voimme vaihtaa näyttöä tämä lista oman harkintasi mukaan. Tag
- on lohkopohjainen, joten se kattaa koko sen käytettävissä olevan alueen näytön reunan, taulukon kehyksen tai muiden sivuelementtien rajoittamana.
Lista-luettelossa-liitteet ovat sallittuja.
Esimerkiksi
Tunnisteen attribuutit ja ominaisuudet
Laajalti käytetty tag-attribuutti
- on type-attribuutti, joka osoittaa, miltä luettelomerkki näyttää. Voi ottaa seuraavat arvot
1. type="disc" - merkki täytetyn ympyrän muodossa (tämä arvo on oletusarvo). Levyesimerkki oli hieman korkeampi.
2. type="circle" - merkki läpinäkyvän ympyrän muodossa
Esimerkiksi:
3. type="square" - merkki neliön muodossa
Esimerkiksi:
Ja tältä se näyttää sivulla:
CSS:ssä luettelomerkkityyppi määritetään käyttämällä attribuuttia list-style-type:
Katsotaanpa, mitä arvoja list-style-type voi ottaa:
Huomautus 2
Attribuutti voidaan määrittää itse tunnisteelle
- , ja tunnisteet
