Datori, Programmatūra
Kā veikt nolaižamo CSS izvēlnes
Šodien mēs izskatīsim jautājumu "Kā es varu izveidot nolaižamo CSS izvēlnes?". Būtu teikt uzreiz, ka šis vienums tiks veikts bez savienojuma nekādus papildu līdzekļus. Tas nozīmē, ka ēdienkarte tiks izveidots tikai ar CSS un HTML.
treniņš
Lai pilnībā izprastu, kas ir tajā rakstā, jums ir nepieciešams mazliet iepazīties ar teorētisko materiālu. Bet, ja jūs esat iepazinušies ar pseido-klasēm, varat izlaist šo punktu. Tātad, lai izveidotu vertikālu nolaižamā CSS izvēlnes, mums ir nepieciešams elements, kā «: hover». Pseido ": lidināties» var piešķirt jebkuru HTML tagu. Tas ļauj noteikt brīdi, kad vienums virziet peles. Piemēram, mēs esam iecelti īpašumu: «a: hover {color: red;}». Tas ieraksts nozīmē, ka tad, kad jūs lidināties peli tas kļūst sarkans uz saturu katra taga . Ir vērts atzīmēt, ka šis pseido-elements ir arī inaktivēta. Starp citu, «: lidināties» ir saistīts līdzīgi elementi. Bet no tā mēs izveidosim pseido CSS nolaižamo izvēlni.
instrukcija
Pirmkārt, pieņemsim saprast, kas ir nolaižamā izvēlne. Saskaņā ar šo definīciju izpaužas daudz dažādas metodes, būvējot dažādus izkārtojumus. Šajā gadījumā mēs analizējam struktūra, kas sastāv no vairākām pastāvīgi redzamu priekšmetu un vairākas papildu (slēpts). Pieņemsim pabeigt ar teoriju un sākt praktizēt.
- Mēs izveidot izkārtojumu mūsu ēdienkartes. Lai to izdarītu, HTML koda marķējumu. Izveidojiet ligzdstruktūras sarakstu:
-
- < / ul>. Kaut kas līdzīgs šim vajadzētu izskatīties jūsu nolaižamajā izvēlnē. CSS iejaukties vēlāk. Šajā gadījumā galvenais saraksts sastāv no trim galvenajām jomām un divas slēgtās.
- Paslēpt apakšizvēlni. Šim mēs izmantojam stilu, noteikt šādus rekvizītus: ul ul {display: none;} Tas noņems elementus ar otro sarakstu no ekrāna.
- Izveidot izvēlnes CSS, nolaižamā no galvenajā sarakstā. Par kaskādes stila lapas uzrakstīt šādu noteikumu: ul li: lidināties ul {display: block;}. Tas ieraksts nozīmē, ka tad, kad pele ir virs elements li, kas atrodas ul sarakstā parādās uz ekrāna ul (pielikumā). Pēc pirmā acu uzmetiena, šāda sistēma var šķist sarežģīta un mulsinoši. Bet patiesībā, viss ir ļoti vienkārši.
- Izmantojiet šo izkārtojumu pats ievietojot tagu
- jūsu saturu. Jūs varat mainīt numuru saraksta elementu.
dekoratīvie izmaiņas
Tiklīdz galvenā izvēlne izkārtojums ir gatavs, jūs varat doties uz reģistrāciju. Iespējams, daudzi pirmajā vietā vēlas atbrīvoties no marķieru norāda saraksta elementu. Tas tiek darīts, izmantojot vienu īpašuma CSS, proti, saraksta stila veidu. Jums ir nepieciešams, lai pievienotu šādu ierakstu: li {list-style-tipa: none;}. Tad jūs varat ievietot rāmi un padarīt fonu. Robeža un fons palīdzēt jums ar to. Varbūt daži nepatīk nolaižamā izvēlne parādīsies kā papildu sarakstu, spiežot pie tiem pašiem galvenajiem elementiem. Lai to labotu, jūs varat novietot to. Lai to izdarītu, kaskādes stila lapas uzrakstīt šādu ierakstu: ul ul {position: absolūta; left: 15px; labi: 15px; top: 15px; bottom: 15px;}. Protams, vērtības jūs izmantojat savu. Atkarībā no tā, kur vēlaties redzēt nolaižamās izvēlnes, CSS piedāvā daudz vairāk funkcijas, kas var pievienot dažādus efektus un rotā mūsu sarakstus.
secinājums
Vēlreiz ir vērts atzīmēt celtniecību izvēlnes izkārtojumu. Lai piešķirtu CSS noteikumus, kurus izmanto šajā gadījumā iegulto vērtību, piemēram, ul ul. Ja jums ir dokumentā, lai apmierinātu citu līdzīgu struktūru, var būt lielas problēmas. Šādos gadījumos jums ir nepieciešams, lai izmantotu konkrētu mērķi, piemēram, pārslēdzējiem vai ID-ID. Iepriekš raksta izkārtojums nolaižamajā izvēlnē ir paredzēts, lai iepazīstinātu vispārējo dizainu. No darba pārējais gulstas uz jūsu pleciem.
Similar articles
Trending Now