Ordenagailuak, Software
Nola bat goitibeherako CSS menuak egiteko
Gaur of "Nola bat goitibeherako CSS menuak sortu dut?" Galderari kontuan hartuko dugu. aldi berean esan behar da elementu hau edozein osagarriak fondoak konektatu gabe egingo da. Hau da, menuaren sortuko da bakarrik CSS eta HTML batera.
prestakuntza
Guztiz ulertu zer egiten ari da artikuluan, material teorikoa ezagutu pixka bat behar duzu. Baina zuri sasi-klaseak ezagutzen bada, paragrafo hau salta dezakezu. «: Hover» Beraz, bertikala goitibeherako CSS menuak bat sortzeko, elementu gisa behar dugu. Sasi «: hover» dira inolako esleitzen ahal HTML etiketa. unea elementu bat Sagua definitzeko aukera ematen du. «A: hover {: gorria kolorea;}» Adibidez, jabetza izendatu dugu. Sarrera hau esan nahi du, pasatzean hori sagua edozein Etiketa edukia gorria bihurtzen da. merezi sasi-elementu hau ere aktibitatea egoten da. Bide batez, «: hover» antzeko elementuekin lotuta dago. Baina honetatik sasi CSS goitibeherako menu sortuko dugu.
instrukzioa
Lehen, dezagun ulertzen zer goitibeherako menu bat da. Definizio hau Under diseinuetan ezberdinak eraikitzeko metodo desberdin asko lortzen. Kasu honetan, egitura bat etengabe ikusgai hainbat elementu eta hainbat osagarriak (ezkutaturik) osatua aztertuko dugu. Dezagun amaitzeko teoria batera hasi eta landu.
- Gure menu diseinua sortzen ditugu. Horretarako, HTML kode etiketatzea. Sortu Habiaratutako zerrenda:
-
- < / ul>. Honen antzeko zerbait zure goitibeherako menu itxurarik. CSS geroago esku hartzeko. Kasu honetan zerrendatik nagusiak hiru arlo nagusiak eta bi itxietan osatzen dute.
- Ezkutatu azpi-menua. hau estilo-orri bat erabiltzen dugu gero, definitu honako ezaugarriak: ul ul {display: none;} Hau pantailatik bigarren zerrendako elementu kendu egingo da.
- Sortu menu CSS bat, goitibeherako zerrendako nagusian. Kaskadako estilo-orriak idazteko honako arau hauek: ul li: pasatzean ul {display: block;}. Sarrera hau esan nahi du sagua da elementu li, hau da ul zerrenda kokatutako pantaila ul agertzen baino gehiago (erantsita). Lehen begiratuan, esaterako, eskema konplexua eta nahasgarria iruditu. Baina hain zuzen ere, dena oso erraza da.
- Erabili diseinu hau yourself etiketa
- Zure edukiak txertatuz. Zerrenda elementu kopurua alda dezakezu.
dekorazio aldaketak
Bezain laster Menu nagusiaren itxura prest dagoen bezala, matrikula jarraitu ahal izango duzu. Seguruenik, lehenengo tokian prest ere asko markatzaileak zerrendako elementu adieraziz botatzeko. Hau jabetza CSS single, hots, zerrenda-style-mota erabiliz. li {list-style-mota:: none;} honako sarrera gehitu behar duzu. Ondoren markoaren sar dezakezu eta egin atzealdean. mugan eta atzeko lagunduko duzu honekin. Agian batzuk ez gustatzen goitibeherako menuan izango Zerrenda gehigarri gisa agertzen dira, oinarrizko elementu berean bultzaka. Hori konpontzeko, bertan kokatu ahal izango dituzu. Horretarako, Kaskadako estilo-orriak idatzi honako sarrera: ul ul {posizioa: absolutua; ezkerretik: 15px; eskuinera: 15px; top: 15px; hondoa: 15px;}. Jakina, balioen propioak erabili ahal izango duzu. non goitibeherako menuak ikusi nahi duzun arabera, CSS hainbat ezaugarri hori hainbat efektuak gehitu eta gure zerrendak apaintzen eskainiko du.
ondorio
Berriro ere merezi menu diseinua eraikitzea egoten da. Kasu kapsulatutako balio honetan erabilitako CSS arauak esleitzeko, adibidez, ul ul. zauden dokumentua antzeko beste egitura erantzuteko ere bada, ez dago arazo handiak izan daitezke. Egoera horietan, helburu zehatz bat erabiltzeko, adibidez, Selectors edo id-identifikazioak behar duzu. Goiko artikuluan diseinua goitibeherako menuan diseinu orokor ezagutzea diseinatuta dago. lan Gainerako zure bizkar gainean.
Similar articles
Trending Now