Saturs

• Lai soli
• 1. daļa no 2: HTML rakstīšana
• 2. daļa no 2: CSS rakstīšana
• Padomi

Izmantojot nolaižamo izvēlni, jūs izveidojat skaidru un hierarhisku pārskatu par visām svarīgākajām lapas daļām un lapas apakšsadaļām. Jums vienkārši jāpārvieto peles kursors virs galvenajām sadaļām, lai parādās apakšsadaļas. Varat izveidot nolaižamo izvēlni, izmantojot tikai HTML un CSS.

Lai soli

1. daļa no 2: HTML rakstīšana

1. Izveidojiet navigācijas sadaļu. Parasti visas vietnes navigācijas joslai izmantojat nav>, galvenei> mazākām saišu sadaļām, kas ir saistītas ar lapu, vai div>, ja šķiet, ka neviena cita opcija neder. Ievietojiet to div> elementā, lai jūs varētu pielāgot gan konteinera, gan pašas izvēlnes stilu.
   • div>
   • nav>
   • / nav>
   • / div>
2. Piešķiriet katrai sadaļai klases atribūtu. Mēs vēlāk izmantosim klases atribūtu, lai modificētu šo elementu stilu ar CSS. Piešķiriet konteineram un izvēlnei savu klases atribūtu.
   • div>
   • nav>
   • / nav>
   • / div>
3. Pievienojiet izvēlnes vienumu sarakstu. Nesakārtotajā sarakstā (ul>) ir galvenās izvēlnes vienumi (saraksta vienumi li>). Ja lietotājs pārvieto peli virs tā, viņš / viņa redz nolaižamās izvēlnes. Pievienojiet klases "clearfix" savam saraksta elementam; pie tā mēs nonāksim vēlāk CSS izklājlapā.
   • div>
   • nav>
   •       ul>
   •          li> Sākums / li>
   •          li> Darbinieki
   •          li> Kontakti
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Pievienojiet saites. Ja šie augšējā līmeņa izvēlnes vienumi arī novirza uz viņu pašu lapām, tagad varat ievietot saites. Saite uz neeksistējošu enkuru (piemēram, "#!"). Pat tad, ja tie neko nesasaista, lietotāja kursors izskatīsies citādi. Šajā piemērā kontakts nekur nenovirza, bet pārējie divi izvēlnes vienumi:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Mājas/ a>/ li>
   • li>a href = "/ Darbinieki">Personāla locekļi/ a>
   • / li>
   • li>a href = "#!">Kontakts/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Izveidojiet apakškārtus nolaižamajiem vienumiem. Pēc stila izveides šie saraksti veido nolaižamo izvēlni. Novietojiet sarakstu saraksta vienumā, kuru lietotājs virzīs peles kursoru. Pievienojiet klases atribūtu un saiti tāpat kā iepriekš.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Sākums / a> / li>
   • li> a href = "/ Darbinieki"> Darbinieki / a>
   •          ul>
   •             li> a href = "/ borsato"> Marko Borsato / a> / li>
   •             Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Kontaktpersona / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Ziņot par problēmu / a> / li>
   •             li> a href = "/ support"> Klientu atbalsts / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

2. daļa no 2: CSS rakstīšana

1. Atveriet CSS stila lapu. HTML saites galvenes sadaļā ievietojiet saiti uz CSS stila lapu, ja saite vēl nav tur. Šajā rakstā mēs neatklāsim CSS pamatus, piemēram, fonta un fona krāsas iestatīšanu.
2. Pievienojiet labojumfaila kodu. Vai atceraties, ka izvēlņu sarakstam ir jāpievieno klase "clearfix"? Parasti nolaižamās izvēlnes elementiem ir caurspīdīgs fons, kas ļauj pārvietot citus elementus. Vienkārša pielāgošana CSS var atrisināt šo problēmu. Šeit ir jauks un ātrs labojums, lai gan tas nedarbosies pārlūkprogrammā Internet Explorer 7 un vecākās versijās:
   • .clearfix: pēc {
   • saturs: "";
   • displejs: tabula;
   • }
3. Izveidojiet pamata dizainu. Izmantojot šo kodu, jūs varat ievietot savu izvēlni lapas augšdaļā un paslēpt nolaižamās izvēlnes elementus. Tas ir ļoti vienkārši ar nolūku, lai mēs varētu koncentrēties uz attiecīgo kodu. Vēlāk to var modificēt, izmantojot papildu CSS kodu, piemēram, polsterējumu un piemali.
   • .nav-wrapper {
   • platums: 100%;
   • fons: # 008B8B;
   • }
   •  
   • .nav menu {
   • amats: radinieks;
   • displejs: inline-block;
   • }
   •  
   • .sub menu {
   • pozīcija: absolūta;
   • displejs: nav;
   • fons: # 555;
   • }
4. Pārliecinieties, ka nolaižamie vienumi tiek parādīti, virzot peles kursoru virs tiem. Tagad nolaižamā saraksta elementi ir iestatīti tā, lai tie netiktu rādīti. Lūk, kā panākt, lai viss apakšsaraksts tiktu parādīts, tiklīdz jūs virzāt kursoru virs “vecāks”:
   • .nav-menu ul li: virziet kursoru> ul {
   • displejs: bloks;
   • }
   • Piezīme - ja nolaižamās izvēlnes izvēlnes vienumos ir paslēptas papildu izvēlnes, šeit pievienotās īpašības tiks piemērotas visām izvēlnēm. Ja vēlaties, lai stils tiktu piemērots tikai nolaižamo izvēlņu pirmajā līmenī, tā vietā izmantojiet ".nav-menu> ul".
5. Ar bultiņu norādiet, ka ir nolaižamā izvēlne. Tīmekļa dizaineri parasti ar lejupvērsto bultiņu parāda, ka elements atver nolaižamo izvēlni. Šis kods pievieno šo bultiņu katram jūsu izvēlnes elementam:
   • .nav menu> ul> li: aiz {
   • saturs: " 25BC"; / * izvairījies no lejupvērstās bultiņas unikoda * /
   • fonta lielums: .5em;
   • displejs: bloks;
   • pozīcija: absolūta;
   •    }
   • Piezīme - Noregulējiet bultiņas pozīciju ar īpašībām augšā, apakšā, pa labi vai pa kreisi.
   • Piezīme - ja ne visiem jūsu izvēlnes vienumiem ir nolaižamās izvēlnes, nemainiet visas klases navigācijas izvēlnes izskatu. Tā vietā katram li elementam, kur vēlaties bultiņu, pievienojiet citu klasi (piemēram, nolaižamo izvēlni). Iepriekš minētajā kodā skatiet šo klasi.
6. Pielāgojiet polsterējumu, fonu un citas īpašības. Izvēlnei vajadzētu darboties tagad, taču tā vēl nav īpaši jauka. Izmantojot CSS rekvizītus, varat pielāgot katras klases vai elementa izskatu un atrašanās vietu.

Padomi

• Ja vēlaties veidlapai pievienot nolaižamo izvēlni, HTML5 ir ļoti viegli ar elementu select>.
• Saite a href = "#"> ritina līdz lapas augšdaļai un saite, kas norāda uz neeksistējošu enkuru, piemēram, href = "#!">, Neritina. Ja tas šķiet pārāk paviršs, varat mainīt kursora izskatu, izmantojot CSS.
• Kopējot un ielīmējot koda paraugu, noņemiet visas aizzīmes.