Komputeran, Software
How to make drop-down pêşekên CSS
Îro em ê li ser pirsa "çawa dikarim drop-down pêşekên CSS ava bikim?" Bifikirin. Ev divê di cih de dibêjin ku ev babete dê bêyî girêdana tu nezr kirin. e ku, li menu dê bi tenê bi CSS û HTML afirandin.
perwerdeya
Ji bo bi temamî fêm bikin ka çi di hundirê wê de di gotara, divê hûn a little bit to get bi madî ya teorîk ve hevudu. Lê eger tu bi muwekîlê-dersên nas in, tu bi vê paragrafê derbasbe. Bi vî awayî, ji bo afirandina a pêşekên CSS drop-down vertical, divê em wekî hêmana wek «: hover». Qaşo «: hover» dikare ji bo ti rêdan HTML tag. Ev destûrê dide te ku define niha dema ku em babete der barę pareyan de, mişkî li te. «A:: hover {: rengê sor;}» Ji bo nimûne, em malê de hatine tesbîtkirin. Ev entry tê wê wateyê ku dema ku tu hover de mişk jî çêdibe sor li ser naveroka tu tag. Hêjayî gotinê ye ku ev pseudo-element jî betalkirin e. Di vê navê de, «: hover» hêmanên mîna related hatiye. Lê ji bo vê yekê em dê muwekîlê xwe CSS menu drop-down biafirîne.
ders
Yekem, em fêm bikin ka a menu drop-down e. Di bin vê pênase tûsî gelek kêseyan dibe rêbazên cuda avakirina teşeyên cuda. Di vê rewşê de, em dê struktura ku ji çend tomar tim xuya û gelek din (veşartî) analîz bike. Werin, em bi teoriya temam bike û dest bi fêrbûnê.
- Em avakirina layout ji pêşeka me. Ji bo vê jî, etîketan IP-code. Create a lîsteya hêlînên:
-
- < / ul>. Tiştekî wek vê, divê wek menu drop-down xwe binêrin. CSS ji bo mudaxeleyê paşê. Di vê rewşê de, di lîsteya sereke ji sê herêmên sereke û du pêvekirî.
- Vedişêrin sub-menu. Ji bo vê em kar a stylesheet, define taybetiyên jêrîn: ul ul {display: none;} Ev, wê hêmanên ji lîsteya duyem ji screen jê.
- Create a CSS menu, berdan, ji lîsteya sereke. Rûnivîn style Qebûlkirinê te dinivîsim bi serweriya jêr e: li ul: hover ul {display: block;}. Ev entry tê wê wateyê ku dema ku mişk e li ser li element, ku di lîsteya ul li ser ul screen de xuya dike (pêvekirî). Di nihêrîna pêşîn de, wisa xaxê dikarin aloz û tevlîhev xuya dike. Lê di rastiyê de, her tişt pir hêsan e.
- Bi kar tînin ev layout xwe bi bicîkirina li tags
- naveroka xwe. Tu dikarî hejmara hêmanên lîsteya guhertin.
Guherandinên decorative
Gava ku layout main menu amade ye, hûn dikarin bi qeydkirina bidomînî. Probably, gelek di rêza yekem de amade to get nîşaneyên diyar dike babete lîsteya xelas. Ev kar a CSS milk yek, ango lîsteya-style-type kirin. Divê tu zêde li entry jêr e: li {lîsteya-style-type: none;}. Hingê tu dikarî li frame têxê û make the background. Li ser sînorê û background tu alîkariyê bi vê. Dibe ku hinek ne dixwazin menu pull-xwarê wek lîsteya din de xuya bibin, xurtkirina li ser hêmanên bingehîn heman. Ji bo vê sererast bikin, hûn dikarin wê helwêstê. Ji bo vê jî, Nûneratiyên style Qebûlkirinê te binivîse entry jêr e: ul ul {position: absolute; milê çepê: 15px; mafê: 15px; top: 15px; bottom: 15px;}. Bê guman, nirxên ku tu dê xwe bi xwe bi kar tînin. Li gor cihê ku tu dixwazî bibînî, di pêşekên drop-xwarê, CSS wê gelek taybetmendiyên din ku dikarin bandorên cuda lê zêde bike û dixemilînin lîsteyên me bidin.
encamê de
Careke din ev Hêjayê gotinêye avakirina layout menu ye. To assign qaîdeyên CSS bikaranîn di vê nirxê doza bicîbûyî de, bo nimûne, ul ul. Heger tu di belgeyê de ji bo hevdîtinê din avahiya hev in, dikarin bibin pirsgirêkên mezin hene. Di van rewşan de, divê hûn bi kar armanceke taybetî, ji bo nimûne, selectors an id-nasname hatine. Şêweya gotara menu drop-xwarê li jor hatiye dîzaynkirin ku ji nasîya li design giştî. Ya mayî bi kar li ser milên xwe.
Similar articles
Trending Now