Valikkojen luominen on luultavasti yksi pääkohdista sivustojen ja ohjelmien kehittämisessä. Lisäksi tällaisen valikon hyvä laatiminen ja looginen suunnittelu on sivuston tai minkä tahansa ohjelman kasvot. Otetaan esimerkiksi Microsoft ja Windows 7. Käyttöjärjestelmä. Windows 7: n julkaisun jälkeen Microsoft kuuli paljon kritiikkiä, joka ei ollut imartelevaa itselleen. On kritisoitu monia, mutta useimmiten hankalasti sijoitettuja valikkokohteita. Lue tämä opetusohjelma huolellisesti, kuinka luoda horisontaalinen pudotusvalikko CSS: n ja Expression Webin avulla. Tunnistetyylit muuttuvat valikon luomiseksi
Ohjeet
Vaihe 1
Siirry kohtaan Tyylien hallinta ja napsauta sitten Uusi tyyli -painiketta. Anna nimi Selector ul li juuri luomallesi uudelle tyylille. Muista myös varmistaa, että uusi tyyli on määriteltävä pudotusvalikossa.css.
Vaihe 2
Vaakasuoran valikon venyttämiseksi sinun on kerrottava valikkokohteille, että se on vaakasuora. Seuraavaksi sinun on määritettävä jokaisen valikkokohdan leveys ja poistettava kaikki tarpeettomat pisteet kaikkien luettelokohteiden edessä.
Vaihe 3
Muuta vaakasuuntaista kohdistusta kohtaan Asettelu ja aseta näyttöattribuutiksi linjainen. Aseta float-attribuutti vasemmalle. Napsauta Käytä-painiketta. Kaikki luettelokohdat on asetettava yhdelle riville. Jotta ne eivät päällekkäisi, sinun on tehtävä seuraava: aseta leveysmääritteen Position-arvoksi 150px. Nyt tarkista se. Luettelon kaikkien elementtien tulisi olla samankokoisia.
Vaihe 4
Nyt meidän on yritettävä poistaa pisteet luettelokohteiden edessä. Voit tehdä tämän siirtymällä luetteloon ja asettamalla list-style –type -attribuutiksi ei mitään.
Vaihe 5
Hyväksy kaikki muutokset napsauttamalla OK.
Vaihe 6
Voit säätää kirjasinkokoa ul li -tyylille seuraavasti: Napsauta Tyylien hallinta -kohdassa hiiren kakkospainikkeella ul li -tyyliä, jonka haluat valita Muokkaa tyyliä. Tuttu valintaikkuna määritteiden lisäämistä tai muuttamista varten avautuu. Siirry Font-luokkaan ja aseta font-family-attribuutiksi Arial, Helvetica, sans-serif. Siirry seuraavaksi font-size-määritteeseen ja aseta se arvoon 0.9em. Määritä sen jälkeen text-transform -attribuutti, aseta sen arvoksi isot kirjaimet.
Vaihe 7
Luodun valikon kohteiden korkeutta voidaan säätää Sijainti-luokassa. Aseta korkeusattribuutiksi 30 kuvapistettä.
Vaihe 8
Seuraavaksi sinun on tallennettava menu.html-tiedosto. Tätä varten Expression Web avaa vaaditun Tallenna sulautetut tiedostot -ikkunan tiedoston tallentamiseksi. Tallenna avattavaan.css-tiedostoon. Tallenna napsauttamalla OK.
Vaihe 9
Tarkista nyt tulos. Luotettavuuden vuoksi on parempi testata se eri selaimissa. Voit tarkistaa oletusselaimella saadun tuloksen painamalla näppäimistön F12-näppäintä.
