Tietokoneet, Ohjelmistot
Miten tehdä avattavan CSS valikot
Tänään pohtia kysymystä "Miten luon avattavista CSS valikot?". Sen pitäisi sanoa heti, että tämä tuote tehdään kytkemättä ylimääräisiä varoja. Eli valikko luodaan vain CSS ja HTML.
koulutus
Ymmärtää täysin mitä se artikkelissa, tarvitset hieman tutustua teoreettinen materiaalin. Mutta jos olet perehtynyt näennäisluokat, voit ohittaa tämän kohdan. Joten, luoda pystysuora avattavista CSS valikot, tarvitsemme elementti kuin «: hover». Pseudo «: hover» voidaan asettaa mille tahansa HTML-tunnisteen. Sen avulla voit määrittää hetkeä, jolloin kohde Vie hiiri. Esimerkiksi olemme nimitetty ominaisuus: «a: hover {color: red;}». Tämä merkintä tarkoittaa, että kun viet hiiren se muuttuu punaiseksi sisällöstä mitään tag . On syytä huomata, että tämä pseudo-elementti on myös inaktivoitu. Muuten, «: hover» on kertonut samanlaisia elementtejä. Mutta tästä luomme pseudo CSS pudotusvalikosta.
opetus
Ensimmäinen, nyt ymmärtää, mitä on pudotusvalikosta. Tämän määritelmän saa paljon erilaisia menetelmiä rakentaa erilaisia asetteluja. Tässä tapauksessa, analysoi rakenne, joka koostuu useista jatkuvasti näkyvät kohteet ja useita muita (piilossa). Lopetetaan teoriaa ja alkaa harjoitella.
- Luomme ulkoasua meidän valikosta. Voit tehdä tämän, HTML-koodia merkintöjä. Luo sisäkkäistä lista:
-
- < / ul>. Jotain tällaista pitäisi näyttää oman pudotusvalikosta. CSS puuttua myöhemmin. Tällöin päälistalla on kolme pääaluetta ja kaksi suljettua.
- Piilota alivalikosta. Tämän käytämme tyylitiedoston, määritellä seuraavat ominaisuudet: ul ul {display: none;} Tämä poistaa osia toisen luettelon näytön.
- Luo valikko CSS, pudota alas päälistalla. CSS-tyylitiedostot kirjoittaa seuraavaa sääntöä: ul li: leijuvat ul {display: block;}. Tämä merkintä tarkoittaa, että kun hiiri on elementin li, joka sijaitsee ul lista tulee näyttöön ul (liitteenä). Ensi silmäyksellä, tällainen järjestelmä voi tuntua monimutkainen ja sekava. Mutta itse asiassa, kaikki on hyvin yksinkertainen.
- Käytä tätä ulkoasua itse lisäämällä tageja
- sisältöä. Voit muuttaa listan elementtejä.
koriste muutokset
Heti Päävalikkoasettelun on valmis, voit siirtyä rekisteröintiin. Luultavasti monet ensinnäkin valmis eroon merkkiaineiden osoittaa -kohde. Tämä tehdään yksittäinen kiinteistö CSS eli list-style-type. Sinun täytyy lisätä seuraava merkintä: li {list-style-type: none;}. Sitten voit lisätä kehyksen ja tehdä taustan. Rajalla ja tausta auttaa sinua tässä. Ehkä jotkut eivät pidä alasvetovalikosta näkyy lisäluettelo, työntäen samalla peruselementtejä. Voit korjata tämän, voit sijoittaa sen. Voit tehdä tämän, CSS kirjoittaa seuraava merkintä: ul ul {position: absolute; vasen: 15px; oikea: 15px; top: 15px; pohja: 15px;}. Tietenkin arvot voit käyttää omaa. Riippuen siitä, missä haluat nähdä pudotusvalikoista, CSS tarjoaa monia muita ominaisuuksia, jotka voivat lisätä erilaisia tehosteita ja sisustaa luetteloita.
johtopäätös
Jälleen kerran on syytä huomata rakentamiseen valikkoasettelun. Määrittää CSS sääntöjä tässä tapauksessa käytetään sulautettujen arvoa, esimerkiksi ul ul. Jos dokumentissa tavata vastaava rakenne, voi olla suuria ongelmia. Näissä tilanteissa, sinun täytyy käyttää tiettyyn tarkoitukseen, esimerkiksi valitsimet ja id-tunnukset. Yllä oleva artikkeli ulkoasu pudotusvalikosta on suunniteltu tutustuttaa yleiseen suunnitteluun. Loput kuuluuko työn hartioille.
Similar articles
Trending Now