Pretdrudža līdzekļus bērniem izraksta pediatrs. Bet ir situācijas, kad ir nepieciešama palīdzība likhomanci gadījumā, ja bērnam ir jādod sejas nolaidīgi. Tad tēvi paši uzņemas reanimācijas un zastosovuyut pretdrudža preparātus. Ko atļauts dot lādes bērniem? Kā pazemināt temperatūru vecākiem bērniem? Kuras ir visdrošākās sejas?
vadītājs
Parādiet iezīmēto sarakstu horizontāli bez marķieriem.
Risinājums
tagu saraksts ar aizzīmēm
- lai zamovchuvannyam redzētu elementus
- vertikāli viens pret vienu. Lai izveidotu navigācijas elementus, noteiktās darbībās manuāli parādiet sarakstu horizontāli. Šāda saraksta pieņemšanai ir dažas metodes.
Var jau zināt, ka HTML ir bloku un rindu elementi. Rindas elementi neveido savus blokus, šādu elementu dibens - visi tagi vai . Bloka elementi tiek parādīti no jaunas rindas un izveidot taisnstūra bloku, piemēram, šādu tagu
vaiTātad ass, tags
- arī bloka elements.
schob tag
- NEpārvietojas kā bloka elements, jūs varat Palīdziet CSS zrobiti yogo ryadkovim.
Tiem, jo elements tiks parādīts dokumentā CSS jauda displejs. Apskatīsim trīs jogas nozīmes (vēlaties vairāk):
- bloks - elements tiek renderēts kā bloka elements.
- inline — elements parādās kā rinda.
- inline-block - bloku rindas elements, lasiet vairāk par šāda veida elementiem tālāk, mēs pierunāsim.
Pakausī horizontālais saraksts ir pārvērsts elementu rindā. CSS stilā mēs rakstām noteikumu, kurā li selektorā displeja jauda ir iestatīta uz iekļautajām vērtībām.
sarakstu horizontāli Otzhe, tsey stila spratsyuvav un otrimali horizontāli raztashuvannya punkti sarakstā:
1. mazulis. Robota dibens #1.
Kurai metodei ir trūkumi. Labajā pusē ir fakts, ka iekļautie elementi var darboties kā atsaiste saskaņā ar bloku elementiem. Piemēram, jūs nevarat iestatīt tiem platumu un augstumu, bet varat iestatīt blokus.
Piemēram, mums ir nepieciešams elements, ar kuru mēs izveidojām izvēlni ar platumu 150 pikseļi un augstumu 40 pikseļi. Mēģināsim mainīt stilu uz aizskarošu, lai varētu pievienot divus noteikumus izvēlnes vienuma lieluma iestatīšanai:
Qi labojumi nerada nekādas izmaiņas. Lai izvēlnes elementi būtu izvietoti horizontāli un jūs varētu iestatīt to platumu un augstumu, kā arī jums ir jāiestata iekļautā bloka veids. Mainiet mūsu dibena kodu:
sarakstu horizontāli Šis kods darbojas, un izmaiņas var redzēt:
2. mazulis. Robota dibens #2. Bet var būt dažādas iespējas, piemēram, pielikuma izvēlnē mums ir jāparāda saraksti:
Investīciju saraksts. Axis ir robota koda rezultāts:
Mazulis 3. Robota dibens #3. Mi Bachimo, ka bloki nav saskaņoti augstumā tā, kā mēs vēlētos. Acīmredzot jūs varat iestatīt vienādu augstumu visiem blokiem, taču neļaujiet mums redzēt lielu attālumu precīza nozīme, es varu to mainīt.
Un vlasne, kāpēc tu tā domā?
Mūsu bloki var parādīt jaudu pār iekļauto bloku vērtībām. Tse nozīmē, ka tiem ir gan bloku elementu kvalitāte (iespēja norādīt platumu un augstumu), gan mazie elementi. Tie scho mi posterіgaєmo - tse yakіst mazie elementi.
Apskatīsim dažādu izmēru "A" rakstzīmju rindu:
A A A A A A A
M Bachimo, lai visi burti būtu vertikāli izlīdzināti gar apakšējo līniju. Precīzāk, aiz bāzes līnijas, bet tajā pašā laikā mēs tīklā neiekļūsim. Tātad ass ar mūsu blokiem kļuva vienāda.
Lai līdzinātu tekstu vertikāli, izmantojiet vertikālās līdzināšanas jaudu. Mūsu muca Nr. 3 ir nepieciešams pagriezt augšas vērtību tā, lai elementa augšējā robeža būtu gar rindas augstākā elementa augšdaļu.
Pagaidām zastosuєmo joga līdz rindai ar dažāda izmēra "A" rakstzīmēm:
A A A A A A A
Skaidrs, ka troča burti "lec". Augšējam burtam esmu iestatījis CSS kordona apmali, lai būtu redzams, ka patiesībā nav nekādu virkņu, ka starp augšējo robežu (pēc kuras izskatās, ka vibrē) un augšējo punktu ir tukša vieta. simbolu "A".
Vertikālās izlīdzināšanas jauda ir jāiestata ādas iekšējā elementā, tas nesamazinās. Jūs varat lasīt vairāk par jaudas mērķi: vertikālā izlīdzināšana.
Pēc tam ir iespējams horizontāli paplašināt saraksta elementus.
vēl viens veids
Ar pludiņa jaudu ir iespējams saraksta elementus novietot horizontāli. Jaudas vērtība ir norādīta, kurā pusē elements tiek parādīts, var būt divas pozīcijas: pa kreisi un pa labi.
Ass sēžamvieta ar atšķirīgu kodu:
sarakstu horizontāli Ass rezultāta roboti kods:
4. mazulis. Es saduršu robotu. Strādājiet pie prakses. Ale, uzvarošā tsієї varā, ir viena nianse. Apskatīsim mi yogo. Mucam ņemiet kodu, kurā ir divi horizontāli saraksti citā veidā Elementu izkārtojums horizontāli: displejs un peldēšana:
sarakstu horizontāli Ass rezultāta roboti kods:
Bērns 5. Es saduršu robotam. Dariet šos butts konteineru un sarakstu
- uztaisīt sarkanu kordonu ar tovščinu 1 pikselis. Arī top sarakstā, kurā uzvar displeja jauda, ir iekļauti saraksta elementi. Un saraksta elementa ass, kas izveidota ar dažādu pludiņa jaudu, izkritīs no konteinera.
- konteinera poza joprojām tiek krata
-
.
- paragrāfs
- izvērst rindas
- Saraksti un saraksta vienumi
- virsraksti
- horizontālās līnijas
- maizīte
- pīrādziņi
- klaips
- pīrāgs
- maizīte
- pīrādziņi
- klaips
- pīrāgs
- maizīte
- pīrādziņi
- klaips
- pīrāgs
- maizīte
- pīrādziņi
- klaips
- pīrāgs
- ieraudzīja
- pagriezienus
- taisni
- Hrestova
- urbt
- (Preču saraksts).
pārlūkprogrammu atbalsts
Atribūts
Opera
IExplorer
malasāciet, ierakstiet Tātad Tātad Tātad Tātad Tātad Tātad otrādi Tātad Tātad Tātad Tātad nekas nekas atribūti
Atribūts nozīmē apraksts kompakts kompakts Chi netiek atbalstīts HTML5.
Ņemiet vērā, ka saraksts var būt mazāks par maksimālo izmēru (rindas augstums: 80%).
Atzīmējiet CSS šim atribūtam.otrādi Parādiet, ka secībai numurētajā (sakārtotajā) sarakstā ir jāatbilst dilstošajai secībai. Pārlūkprogrammas neatbalsta atribūtu Internet Explorer i Edge. sākt numuru Piešķir pirmo vērtību numurētajam (sakārtotajam) sarakstam. Vērtības ir saistītas ar veseliem skaitļiem, ir atļautas negatīvas vērtības. Saskaņojot ar burtiem (tips = "A" un tips = "a"), atribūta vērtībā norādītais cipars ir burta kārtas numurs alfabētā. Piemēram, sākums = "4", atbilst burtiem "D" un saraksts notīrīsies pats. Ja vērtība start = "27" atšķiras, kvalifikators tiek atiestatīts uz nulli, kad saraksts kļūst ar divām vērtībām ("27" = "AA", "28" = "AB", "29" = "AC" ). ..). veids 1 (bloķēšanai)
Liels)
rinda)
Es (dižais romietis)
es (romiešu mazais)Norāda marķiera veidu, kas parādīsies numurētā (sakārtotā) sarakstā. viktorija muca
dibena birka <ol> <span> - Pirmais punktscita prece
- trešais punkts
- Pirmais punkts.
- Vēl viens priekšmets.
- Trešais punkts.
Paskatieties uz līnijas pusi šādi:
Ja vēlaties, lai saraksts sāktos no pirmā cipara (nevis no 1), tad ir jānorāda taga sākuma atribūts
-
.
piemēram:
Vēl viens atribūts ir tips, kas ļauj norādīt burtu numerāciju ("A" - liels, "a" - rinda) vai numerāciju no romiešu cipariem ("I" - ar lielajiem burtiem, "i" - ar mazajiem burtiem).
Apskatīsim mucu tādā veidā, kas attēlo visas iespējamās tipa atribūta vērtības (iekļaujiet atslēgas vērtību):
HTML taga tipa atribūta citāts atribūta apakšdaļa<оl> - >
- trešais punkts
- Pirmais punktscita prece
- trešais punkts
- Pirmais punktscita prece
- trešais punkts
- Pirmais punktscita prece
- trešais punkts
- ):
Piemērs numurētam sarakstam, kas ligzdots citā numurētajā sarakstā <span> -
Pirmais punkts
- trešais punkts cita prece
-
Pirmais punkts
- trešais punkts
- 1. vienums
- Elements #2
- 3. vienums
- ...
- 1. vienums
- Elements #2
- 3. vienums
- 1. vienums
-
- Prece #2-1
- Prece #2-2
- Prece Nr. 2-3
- 3. vienums
- ...
- 1. vienums
- Elements #2
- 1. vienums
- Elements #2
- 1. vienums
- Elements #2
- 1. vienums
- Elements #2
- ...
- disks - marķieris, redzot apli (saduriet vairāk)
- aplis - marķieris šķietami caurspīdīgā malā (dibens ir augstāks)
- kvadrāts — marķieris pie izskatāmā kvadrāta (saspiest vairāk)
- decimālzīme - marķieris numurēta saraksta skatīšanai ar arābu cipariem: 1, 2, 3, ...
- decimāldaļskaitlis-nulle - marķieris numurēta saraksta sākšanai ar arābu cipariem ar nulli uz vālītes: 01, 02, 03, ...
- apakšējā romiešu - marķieris pie numurēta saraksta romiešu alfabētā ar maziem burtiem: i, ii, iii, iv, v
- augšējais romiešu - marķieris numurētam sarakstam romiešu alfabētā ar lielajiem burtiem: I, II, III, IV, V
- apakšējā latīņu valoda - marķieris sarakstā latīņu alfabētā ar maziem burtiem: a, b, c, d, ...
- augšējā latīņu valoda - marķieris sarakstā latīņu alfabētā ar lieliem burtiem: A, B, C, D, ...
- apakšējā grieķu valoda - saraksta marķieris grieķu alfabētā ar maziem burtiem
- augšējā grieķu valoda — marķieris pie saraksta grieķu alfabētā ar lielajiem burtiem
- . Kad ir norādīts taga atribūts
- visi saraksta elementi tiks atveidoti tā, it kā atribūts būtu norādīts tajā pašā. Bet mēs varam iestatīt šo galveno elementu tā fermentācijai. Piemērs mazajam:
- 1. vienums
- Elements #2
- 3. vienums
- 1. vienums
- Elements #2
- 3. vienums
- 1. vienums
- Elements #2
- 3. vienums
- 1. vienums
- Elements #2
- 3. vienums
- Muca
- unikāls saraksts
- oriģinālie saraksti
- ZORNET.RU — tīmekļa pārzinis
- Vēl viens saraksts
- Muca
- unikāls saraksts
- oriģinālie saraksti
- ZORNET.RU — tīmekļa pārzinis
- Vēl viens saraksts
- uCoz skripts
- uCoz veidnes
- Mājas lapas dizains
- Vietnes stili
- CSS stils
- Pirmais vietnes elements
- Vēl viens vietnes elements
- Trešais vietnes elements
- Ceturtais vietnes elements
- Piektais vietnes elements
Kods izskatās šādi:
Tagu marķiera maiņa
- lai saņemtu palīdzību CSS
Atzīmētie saraksta vienumi, kas izveidoti ar tagu
- , Var atzīmēt ar vairāk attēliem. Lai mainītu marķiera veidu, izmantojiet CSS. piemēram
Un tā paskatās uz pusēm:
Ar CSS palīdzību mēs varam pievienot cita veida marķierus. Bet tas ir jāatceras, iestatot taga stilu
- , Win izvērš visus saraksta vienumus. Ja mainīsit standarta sarakstus ul un li, tad ar tēmu viss būs kārtībā. Tātad, kā tas ir, lai uzzinātu mazliet oriģinālos risinājumus. Tas neprātīgi palīdzēs mainīt standarta skatu uz unikālu, de ide CSS stilu saraksta noformēšanai. Pluss ir tas, ka uzvarēsim visu, tikai vienu klasi, kas radikāli mainīs izskatu. Papildus šiem parametriem varat norādīt, pie kura numura saraksts ir vainīgs, šeit visu var izdarīt neatkarīgi. Bieži vien aiz slēdzenes nozīme numurētajiem sarakstiem ir pirmajā vietā vai burts A.
Pārejot no pamatiem, tagad mēs tuvāk aplūkojam elementus, kas ir uzvarējuši struktūras drošībai un nozīmei dažādām dizaina daļām. Tiem, kas nezina, tad ul un li, bagātīgi saīsināta versija, nolaidiet vienkāršu teksta tekstu, lai, ja teksts ir ietīts, it īpaši mobilajā tālrunī, tas būtu labi redzams un neaptītos ap marķieri.
Svarīgi, lai saraksti būtu svarīgākais informācijas nolikšanas veids malās, jo smaka ir viegli salasāma un var izskatīties labi. Šķiet, ka daudziem šķiet, ka punkti ir forši, mazie attēli, bet patiesībā visa smaka tiek radīta ar vienkāršu HTML kodu. Varat ievietot dažāda veida sarakstus vienu vienā, ja vēlaties, vienkārši pielīmējiet tos pareizi. Visās saraksta komandās varat atskaņot jebkuru tekstu, kuru vēlaties.
Ir arī jāzina, ka saraksti ir jāaizstāj ar elementu pārkaisīšanu:
1 . Sakārtota informācija.
2 . Sakārtota informācija.
3 . Pieraksts.Pāriesim pie instalācijas:
1 iespēja:
css(Ksangelopan)
piemale: 19 pikseļi 0 0;
polsterējums: 0;
saraksta stils: nav;
counter-reset:li;
}
.ksangelopan li (
apmale: 2px solid #3575ad;
fons: #d7dee4;
pozīcija: relatīvs;
mala-apakšā: 17 pikseļi;
polsterējums: 15 pikseļi 9 pikseļi;
}
.ksangelopan li: virziet kursoru (
z-indekss: 1;
}
.ksangelopan li:before (
apmale: 2px solid #2270b3;
pozīcija: absolūta;
augšpusē: -14 pikseļi;
polsterējums: 3px 9px;
fonta izmērs: 11 pikseļi;
fonta svars: treknrakstā;
krāsa: #246eaf;
fons: #f2f4f7;
pretpieaugums: li;
saturs:skaitītājs(li);
-webkit-transition-duration: 0,4s;
pārejas ilgums: 0,4 s;
}
.ksangelopan li: virziet kursoru: pirms (
fons: #2672b3;
krāsa: # f7f9fb;
-webkit-transform: translate (-11px, 0);
-ms-transform: tulkot(-11px, 0);
-o-transformēt: tulkot(-11px, 0);
pārveidot: tulkot(-11px, 0);
}
.ksangelopan li: pēc (
saturs: "";
pozīcija: absolūta;
pārejas ilgums: 0,3 s;
-webkit-transition-property: platums;
pārejas īpašums: platums;
z-indekss: -1;
fons: #FFF;
augstums: 100%;
pa kreisi: 0;
augšā: 0;
platums: 0;
}
.ksangelopan li: virzīt kursoru: pēc (
platums: 100%
}
Uz timu visa instalācija.2 Vēl viena iespēja:
cssBeleduzlopamges (
piemale-apakšā: 8 pikseļi;
polsterējums: 0;
saraksta stils: nav;
counter-reset:li;
}
.beleduzlopamges li (
pozīcija: relatīvs;
apmale: 2px solid #195588;
fons: #eff3f7;
polsterējums: 15px 19px 15px 27px;
piemale: 12 pikseļi 0 12 pikseļi 40 pikseļi;
-webkit-transition-duration: 0,3s;
pārejas ilgums: 0,3 s;
}
.beleduzlopamges li: virzīt kursoru (
fons: #FFF;
}
.beleduzlopamges li: pirms (
līnijas augstums: 32 pikseļi;
pozīcija: absolūta;
augšpusē: 4 pikseļi;
pa kreisi: -39px;
platums: 39 pikseļi
teksta līdzināšana: centrs;
fonta izmērs: 16 pikseļi;
fonta svars: treknrakstā;
krāsa: # f9f5f5;
fons: #275b88;
pretpieaugums: li;
saturs:skaitītājs(li);
pārejas ilgums: 0,2 s;
}
.beleduzlopamges li: virzīt kursoru: pirms (
platums: 46 pikseļi
}
.beleduzlopamges li: pēc (
pozīcija: absolūta;
pa kreisi: 0;
augšpusē: 4 pikseļi;
saturs: "";
augstums: 0;
platums: 0;
apmale: 16 pikseļi, caurspīdīga;
apmale-left-color: #275b88;
-webkit-transition-duration: 0,2s;
pārejas ilgums: 0,2 s;
}
.beleduzlopamges li: virzīt kursoru: pēc (
piemale-kreisais: 6 pikseļi;
}
Centrālo gammu var neatkarīgi uzstādīt zem vietnes galvenā stila.3 Trešā iespēja:
cssNizualisanelag (
polsterējums: 0;
saraksta stils: nav;
counter-reset:li;
}
.nizualisanelag li(
pozīcija: relatīvs;
polsterējums: 9px 17px 17px 25px;
piemale-kreisais: 39px;
pārejas ilgums: 0,2 s;
kursors: rādītājs;
fonta svars: treknrakstā;
krāsa: #343638;
}
.nizualisanelag li: pirms (
apmale: 3 pikseļi, caurspīdīga;
līnijas augstums: 35 pikseļi;
pozīcija: absolūta;
augšā: 0;
pa kreisi: -29px;
platums: 41px
teksta līdzināšana: centrs;
fonta izmērs: 14 pikseļi;
fonta svars: treknrakstā;
krāsa: #619dce;
pretpieaugums: li;
saturs:skaitītājs(li);
pārejas ilgums: 0,3 s;
kastes izmēra noteikšana: apmale-box;
}
.nizualisanelag li: virziet kursoru: pirms (
krāsa: #337AB7;
}
.nizualisanelag li: pēc (
pozīcija: absolūta;
augšā: 0;
pa kreisi: -29px;
platums: 41px
augstums: 41px;
apmale: 5px solid #468bd0;
apmales rādiuss: 50%
saturs: "";
necaurredzamība: 0,5
-Webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
kastes izmēra noteikšana: apmale-box;
}
.nizualisanelag li: virziet kursoru: pēc (
animācija: 500 ms vieglums iekšā-out 0s bounceIn;
necaurredzamība: 1
}@keyframes bounceIn(
0% {
necaurredzamība: 0
pārveidot: scale3d(.3, .3, .3);
}
20% {
pārveidot: scale3d(1.3, 1.3, 1.3);
}
40% {
pārveidot: scale3d(.9, .9, .9);
}
60% {
necaurredzamība: 1
pārveidot: scale3d(1.03, 1.03, 1.03);
}
80% {
pārveidot: scale3d(.97, .97, .97);
}
uz(
necaurredzamība: 1
pārveidot: scale3d(1, 1, 1);
}
}
Iet ar skaistu animāciju.4 Ceturtā iespēja:
cssPolsterējums: 0;
saraksta stils: nav;
}
.kudezamuden li (
polsterējums: 6 pikseļi
}
.kudezamuden li: pirms (
polsterējums-labais: 11px;
fonta svars: treknrakstā;
krāsa: #4979a0;
saturs: "\2606";
pārejas ilgums: 0,4 s;
}
.kudezamuden li: virzīt kursoru: pirms (
krāsa: #235e90;
saturs: "\2605";
}
Līdzīgi kā iepriekšējā versijā, tikai pati izmaiņu ikona.Kopumā nepietiek tikai ar sarakstu sakārtošanu, lai tīmekļa pārzinim iedotu portālā garnier sarakstu;
Ja jums ir nepieciešams ievietot vienumus numerācijas sarakstā, nevis atzīmētajā sarakstā, tad HTML secībā būs pagrieziens. Šis saraksts ir izveidots, izmantojot tagu ol. Numerācija sākas no viena un palielinās līdz vienam ādas soli pa solim sakārtotam elementam sarakstā ar li tagu.
7. mazulis. Es satriekšu robotu. Turklāt robotā mums nav jāzina, kurš elements sekos pludiņa elementam. Іdealny buv bi variants aizvērt robotu un pludiņa spēku tajā pašā blokā, tādā pašā veidā, vin vіdkritiy.
Tse cīnās par pseidoelementa palīdzību. Ass kods:
sarakstu horizontāli Tagad mums ir 100% darba kods.
Bērns 8. Es satriekšu robotu. Izmantojot pludiņa spēku, ieslēdziet vikoristovuyut, izkārtojot vietnes virtivnyuvannya stoptsіv, it kā tas būtu izveidots ar tagiem
. Tādā veidā mēs esam draudīgi normāli stomptsiv ar nepieciešamajiem augstuma regulējumiem. Ja veidojam ēdienkarti, tad mums vairumā gadījumu bloku augstums nav svarīgs, tas ir praktiski vienāds. Tāpēc vikoristannya noteikumi (displejs: inline-block) šajos gadījumos ir pilnīgi patiesi.Ale, pilnības labad mēs te mūs iepazinām iespējamie varianti. Lai gan var būt arī citi veidi, piemēram, izmantojot CSS-tabulas, taču meklētājprogrammas bezkompromisa iesaka uzvarēt tabulas tikai to tiešai atpazīšanai, nevis navigācijas elementu kārtošanai, citādi jebkurā gadījumā.
Prodovzhimo mūsu razmovi par vālītēm html. Šajā rakstā es vēlos runāt par to, kā tekstā izveidot rindkopas, sarakstus un virsrakstus. Un arī par atsevišķiem tagiem
і
.Nastiyno raju iepazsties ar pirmo srijas nodarbību, kā arī ar ievadrakstu par html vālīti tim, kurš ar tiem vēl nav pazīstams.
Tagad mēs turpinām pievienot tagus. Atzīšos, ka lasītājs jau ir iepazinies ar pārējo rakstu materiālu.
Jaks zavzhdi, robotu plāns:
paragrāfs
Teksts vienmēr var sastāvēt no rindkopām. Rindkopa ir teksta elements, kas satur pilnīgu domu.
V html rindkopa, Kā var spriest pēc virsraksta, ir norādīts. Burts "p" ir ņemts no vārda "paragrāfs", kas atkal nozīmē "punkts".
Apskatīsim piemēru:
Pirmās rindkopas teksts. Vin, lai atriebtu par domu. Un tad doma beidzās.
Ass jau ir sākusi citu domu, un mēs rakstām її nākamajā rindkopā.
Kā redzat, zastosuvannya rindkopas ir vienkārši un nenozīmē īpašus komentārus. Ja paskatās uz šo kodu pārlūkprogrammā, tad mums parasti ir divas rindas, un starp tām ir viena tukša rinda. Krievu tekstos rindkopa tiek pieņemta nevis tukšā rindā, bet gan pirmās rindas nobīdē pa labi. Bet internetā bieži tiek bloķēts tieši tas pats formāts, kas bieži tiek noliegts krievu tekstos. Tomēr, lai gan šī darbība nav vismodernākā, to var atcerēties papildu CSS.
izvērst rindas
Reizēm vajag pārtulkot rindu, nepiesaistoties nevienai domai, nenolādējot rindkopu. Tobto, vienkārši dodieties uz jauno rindu. Kurai viena atzīme
. Axis butt joga zastosuvannya:Vēja jautras pastaigas
І kuģis kustas
Vіn bіdіt sоіbі у khvilyah
Uz paceltajiem logiem.Tsej fragmetov vіrshy A.S. Puškins mums palīdzēja ilustrēt galveno tagu
. Es speciāli atstāju divas šī chotirivirshі razmіst rindas vienā koda rindā, lai parādītu, ka rindas tiek pārsūtītas uz jaunu rindu nevis caur to, kurā ievietojām pārsūtīšanas rindas, bet caur tām, kurās ievietojām tagus.
. Šis tags ir vienkāršs un neprasa nekādus paskaidrojumus, tāpēc mēs par to beigsim runāt.sarakstus,
- un uzskaitīt vienumus
Dažreiz tekstā ir nepieciešams pārspīlēt. qієї jāpievieno trīs atzīmes: ul, ol, li. Visas šīs birkas ir konteinerizētas, taču birkas vienmēr ir jāievieto kādā no konteineriem vai citādi, un no tiem nav nekādas jēgas. Konteiners ul zastosovuєtsya, ja mums nerūp amatu secība, un mēs nevēlamies uzsvērt cieņu pret kārtību, kurā smirdēt iet. Un tag ol, savukārt, uzsver cieņu pret elementu pārejas secību, automātiski numurējot ādas rindu. Apskatīsim piemēru:
Pārlūka ekrānā kods izskatīsies šādi:
Ja mēs vienkārši aizstājam ul tagu ar ol tagu, mēs varam noņemt numurēto sarakstu:
Tagad tas izskatās šādi:
Neviens nebloķē viena saraksta ieguldījumu citā, veidojot ieguldījumu sarakstus no apakšsarakstiem:
Rīki:
Ir nepieciešams nedaudz eksperimentēt ar šiem sarakstiem, lai pie tiem pierastu. Ir vēl viens sarakstu veids, bet vīni iestrēgst reti, tāpēc par jaunu uzreiz nestāstīšu. Varbūt citā rakstā.
Acīmredzot, tāpat kā viss pārējais, vecs izskatsŠos elementus var mainīt tā, lai tie netiktu atpazīti papildu CSS.
virsraksti
Acīmredzot rindkopas palīdz strukturēt dokumentus. Bet, lai lielisku tekstu sadalītu mazākās loģiskās daļās, varat nosaukt to apvalku. Ādas daļa var atriebt apakšdaļas, ar saviem zemākā līmeņa virsrakstiem utt. Lai iestatītu galveni, izmantojiet kā tagus
, De "x" - skaitlis no 1 līdz 6. Tēma ir zemāka, jo lielāks skaitlis. Tobto, nosaukums augstākais līmenis tiks saukts par h1, bet apakšējais - h6. Aizkulisēs šajos virsrakstos redzamais teksts tiek parādīts lielā fontā ar atvērumiem. Šis teksts tiek rādīts visā rindā, tāpēc hx tagi ir bloka tagi. Tagam h1 ir lielākais fonts, bet h6 tagam ir mazākais fonts. Parasti sānos ir viens, maksimums - divi augšējā līmeņa h1 tagi. Samazinoties vienādiem, atzīmju skaits palielinās. Bet dažreiz tīmekļa pārzinis var sadalīt tekstu tā, lai 5. vai 6. virsraksti būtu vienādi. Navit 4 rіven zastosovuєtsya reti. Mazāk vārdu vairāk darbības!
HTML tagiNozīme un stagnācija
Numerācija (sakārtošana) ir tādu elementu piešķiršanas saraksts, kas seko tādā pašā secībā. Numerācijas saraksts sākas ar atzīmi
- (Īsa angļu valodas versija pasūtītais saraksts- pasūtītais saraksts). Saraksta ādas elements sākas ar atzīmi
- >
- >
- >
Es lūdzu jūsu cieņu, ka ir atļauts veidot numurētus (sakārtotus) sarakstus, ievietojumus citos numurētos sarakstos (saraksta elementa vidū
Paskatieties uz sejas pusi šādi.
Pārvietot marķējumu uz HTML hiperteksta є tagu
- , Kura vikoristovuєtsya marķētu sarakstu izveidei. To atbalsta visas mūsdienu pārlūkprogrammas, un tas ļauj sakārtot elementus, kas nav nepieciešams numerācijā. Piemēram, daži izvēlnes vienumi tiek parādīti ar papildu palīdzību, un viss ir norādīts malā: straumes, produkti, mantas, instrumenti un daudz kas cits, kas jāmaina, nenorādot šī un otra vienuma prioritāti. .
tagu sintakse
Šis kods tiks pārvērsts par atzīmju sarakstu vietnē:
tagu
- tagu
Par elementu veidošanu sarakstā tiek iegūta puiša birka. Mіzh vіdkrivaє i zakryvaє tagus roztashovuyutsya okremі vārdus, frāzes, rindkopas, attēlus, stuff kodu un bagātīgi іnshoy, є є atzīmētā sarakstā.
Ko var izmantot atzīmētā saraksta vietā?Jums var būt dažādi teksti, tostarp pa vienam vārdi, frāzes un rindkopas, attēli, pielikumu saraksti, php-koda lietas un daudzas citas lietas, kurām nepieciešama vienkārša atzīmēšana.
Atzīmētā saraksta ādas elements pārvietojas aiz slēdzenes par 40 pikseļiem pa labi. Uzvaras CSS stili, mēs varam mainīt šo sarakstu pēc jūsu vēlmēm. tagu
- Bloķēts, tāpēc tas aizņem visu jaunajam pieejamo laukumu, ko ieskauj ekrāna mala, tabulas rāmis vai citi lapas elementi.
Ir atļauta ligzdošana no saraksta uz sarakstu
piemēram
Tagas atribūti un autoritāte
Plaši paplašiniet taga atribūtu
- - tipa atribūts, kas norāda, kā izskatīsies saraksta marķieris. Jūs varat pieņemt nākamo nozīmi
1. type = "disc" - marķieris pie aizpildītās malas (nozīme ir aiz noklusējuma). Muca ar disku ir par trohu augstāk.
2. tips = "aplis" - marķieris caurspīdīgam aplim
piemēram:
3. tips = "kvadrāts" — marķieris pie izskatāmā kvadrāta
piemēram:
Un ass izskatās tā, it kā tā būtu sānos:
CSS atzīmē marķiera veidu nosaka atribūts list-style-type helper:
Apskatīsim, kādas vērtības mēs varam pieņemt saraksta stila veidā:
Atribūtu var atpazīt kā pašu tagu
- , Tāpēc es atzīmēju
Atbalsti projektu – dalies ar saviem pūliņiem, paldies!Izlasi arī
Ja paskatās no pirmā acu uzmetiena, viss darbojas. Ale, atcerēsimies savus sarakstus ar fragmentiem. Liksim sarakstu ar klases izvēlni-1 kodā pirms saraksta ar klases izvēlni-2 (apakšējo).
Ass, ko mēs ņemam vērā rezultātā:
6. mazulis. Es saduršu robotu. Apakšējās izvēlnes vienumi arī apvij augšējo izvēlni, lai gan float jauda neko neietekmē un izplešas uz visiem nākamajiem elementiem.
Kā atrisināt šo problēmu?
Kam nepieciešams izcīnīt skaidrības spēku, tam jāietīt cita elementa elements, jo tam piemīt pludiņa spēks.
Izmaiņu ass sadursme ar izvēles spēku skaidrs:
sarakstu horizontāli Redzams, ka apakšējais saraksts vairs neapvij augšējo, elementi nepārklājas pa vienam. Ale pirmajā tagu sarakstā
- arī bloka elements.
