Компјутери, Софтвер
Како да се направи опаѓачкото менија CSS
Денес ние ќе го разгледа прашањето на "Како можам да креирате опаѓачкото менија CSS?". Треба да кажам одеднаш дека оваа точка ќе се направи без да се поврзете било дополнителни средства. Тоа е, менито ќе се создаде само со CSS и HTML.
обука
За да се разбере целосно она што е во него, во статијата, треба малку да се запознаат со теоретските материјал. Но, ако не сте запознаени со псевдо-класи, можете да го прескокнете овој став. Значи, да се создаде вертикална опаѓачкото CSS менија, ние треба елемент како «: лебдиш». псевдо на «: лебдиш» може да биде доделен на било кој HTML таг. Тоа ви овозможува да се дефинира во моментот кога ставка Лебдиш на глувчето. На пример, имаме назначен сопственост: «на: лебдиш {боја: црвена;}». Овој запис значи дека кога ти лебдиш на глувчето се претвора црвена основа на содржината на било таг . Вреди да се напомене дека оваа псевдо-елемент, исто така се деактивира. Патем, «: лебдиш» е поврзана со слични елементи. Меѓутоа, од ова ќе се создаде опаѓачкото мени псевдо CSS.
настава
Прво, да се разбере она што е опаѓачкото мени. Според оваа дефиниција добива голем број на различни методи на изградба на различни распореди. Во овој случај, ние ќе ги анализира структура се состои од неколку постојано видливи ставки и неколку дополнителни (скриени). Да завршиме со теоријата и да започне да се практикуваат.
- Ние создаваме изгледот на нашето мени. Да го направите ова, означување HTML-кодот. Креирај вгнездени листа:
-
- < / ul>. Нешто како ова треба да изгледа вашиот опаѓачкото мени. CSS да интервенира подоцна. Во овој случај главната листа се состои од три главни области и два затворени.
- За да се скрие под-мени. За ова ние ги користиме на интерфејс, се дефинираат следните својства: ул ул {display: ништо;} Ова ќе го отстрани елементи од втората листа од екранот.
- Креирај CSS мени, паѓачкото од главната листа. листови каскадни стил пишува следново правило: ул Ли: лебдиш ул {display: блок;}. Овој запис значи дека кога глушецот е над Ли елемент, кој се наоѓа во ул листа се појавува на екранот на ул (во прилог). На прв поглед, таква шема може да изгледа комплицирано и збунувачко. Но, всушност, сè е многу едноставна.
- Користете го овој распоред себе со ставање на ознаки
- вашата содржина. Можете да го промените бројот на елементи од листата.
декоративни промени
Штом изгледот на главното мени е подготвен, може да продолжи да се регистрација. Веројатно, многу на прво место подготвен да се ослободи од маркери укажува ставка на листата. Ова е направено со користење на еден CSS сопственост, односно листа стил тип. Вие треба да додадете следниов запис: li {листа стил-тип: ништо;}. Потоа можете да вметнете рамката и да се направи позадина. Границата и позадината да ви помогне со тоа. Можеби некои не ќе се допаѓа паѓачкото мени ќе се појави како дополнителна листа, туркање на истите основни елементи. За да се поправи ова, можете да го позиција. За да го направите ова, Cascading Style Sheets напише следниве запис: ул ул {позиција: апсолутна; лево: 15px; право: 15px; врвот: 15px; дното: 15px;}. Се разбира, вредностите ќе ја користите вашата сопствена. Во зависност од тоа каде сакате да го видите менија опаѓачкото, CSS ќе понуди многу повеќе функции кои можат да додадете различни ефекти и да ги красат нашите листи.
заклучок
Уште еднаш вреди да се напомене изградба на изгледот на менито. За да доделите правилата на CSS се користи во овој случај вградени вредност, на пример, ул ул. Ако се наоѓате во документот да се исполнат други слична структура, може да има големи проблеми. Во такви ситуации, треба да користите одредена цел, на пример, селектори или проект-лични карти. Горенаведените опаѓачкото мени член распоред е наменета да ги запознае општата дизајн. Останатиот дел од работата се базира на рамената.
Similar articles
Trending Now