Jotkut verkkovastaavat eivät halua tuhlata aikaakehittää tyhjästä jo olemassa olevia yksinkertaisia elementtejä. He uskovat, ettei ole mitään syytä tuhlata aikaasi siihen, mikä on jo pitkään ollut. Itse asiassa niille, jotka hallitsevat vain HTML: ää ja CSS: ää, on tärkeää tehdä monia asioita itse ymmärtääkseen työnsä hyvin. Tämä koskee myös valikkoa. Luo pystysuora CSS-valikko. Se perustuu vain HTML: ään ja CSS: ään, ilman Javascriptin ja JQueryn käyttöä. Jokainen valikko on luettelo linkkejä, jotka johtavat sivuston sivuille.
Päävaiheet
Luodaksesi yksinkertaisen pystysuoran CSS-valikon tarvitset seuraavan toimintajakson:
1. Määritä ensin luettelo linkistä (HTML-koodilla), joista valikko koostuu. Anna heille nimet, kuten:
- Koti.
- Historiamme.
- Johtajuutta.
- Palvelut
- Yhteystiedot.
2. Muotoilemme sitten linkit haluamallasi tavalla CSS: n avulla.
Me kirjoitamme HTML-koodin, tallennamme sen my_Vmenu.html-tiedostoon ja katsomme, miltä se näyttää selaimessa:
Tämä on valikkomme perusta (kehys). # 1, # 2 jne.on korvattava linkillä. Katso, kuinka kaikki näyttää selaimelta. Et pidä kuvasta. Nyt meidän on alettava kuvata elementtityylejä, jotta voimme tehdä täysimääräisen pystysuoran CSS-valikon.
Tyylien kuvaus
Luo tiedosto my_Vmenu.css, jossa kysyt mitä haluat parantaa sivuston tällaisen tärkeän elementin ulkonäköä. Alla on koodi, jonka toteutus virkistää CSS-pystysuuntaista valikkoa. Kirjoita se luotuun tiedostoon ja tutkimme sitten yksityiskohtaisemmin, mitä tässä esitetyt päärivit tarkoittavat.
Yksityiskohtainen kuvaus käytetyistä tyyleistä
Katsotaanpa nyt tarkemmin vertikaalista CSS-valikkoamme:
ul # my_Vmenu - yleisen tyylin koko luettelo.
ul # my_Vmenu li a - linkityyli li tagien välillä.
ul # my_Vmenu li a: hover - tämä on kuvaus kyseessä olevan valikon kohteiden tyypistä sillä hetkellä, kun henkilö osoittaa jonkin niistä.
ul # my_Vmenu li span - tekstin kuvaus (valikon nimet).
Muista, että tiedostot ovat my_Vmenu.css ja my_Vmenu.html on tallennettava yhteen hakemistoon. Ne voivat kuitenkin sijaita eri kansioissa, mutta silloin on tärkeää kirjoittaa polku my_Vmenu.css-tiedostoon my_Vmenu.html-tiedostoon. Ole varovainen, koska aloittelijoilla on usein ongelmia tässä.
Tyyli on kytkettävä html-tiedoston otsikkotunnisteiden väliin. menu_1.png ja menu_2.png ovat kuvia valikkokohteen kuvasta normaalitilassa ja kun viet hiiren osoittimen päälle.
Tallenna kuvat paremmin erilliseen kansioonpiirustuksia, kutsua niitä omaksi kuvaksi, mutta säädä sitten CSS-koodia. Kirjoita, missä nämä kuvat osoittavat, että ne ovat tässä hakemistossa: url (omat kuvat / menu_1.png) ja url (omat kuvat / menu_2.png).
CSS-koodissa kuvatuissa muissa ominaisuuksissahelppo ymmärtää. He asettavat valikkomme ulkonäön. On helppo nähdä, että pisteiden leveys ja korkeus on asetettu samoille pisteille normaalitilassa ja kun hiiren osoitin kohdistuu niiden päälle. Kirjasinkoko 18px, pehmuste asettaa pehmusteen tuotenimien eri puolille. Näyttöominaisuuden avulla voit määrittää näytön lohkoina leveyden ja sisennyksen määrittämiseksi.
Pystyvalikkomme
Kuten näette, pystysuorat CSS-valikot on helppo luoda.Tietokannan perusteella voit tehdä siitä kauniin ja houkuttelevan online-resurssisi kävijöille! Käytä mielikuvitustasi, ja sitten tyylikäs valikko koristaa sivustosi.
