Tee vaakanavigaatiosta sivuston itse

Horisontaalinen valikko on melkein minkä tahansa sivuston - se on tärkeä osa, koska se voi sen ulkoasun ja käytettävyyden houkutella tai päinvastoin, pelästyttää pois kävijöitä. Opetellaan luoda alkeis vaakanavigaatiosta: tehdä siitä "luuranko" HTML, hallita perustaidot luomisen. Voit varmasti löytää valmiina valikosta mutta paljon mukavampi opetella kehittää sitä itse. Se on aika hauskaa.

Opi tekemään valikosta

Emme yritä poiketa semantiikkaa, joka noudattaa johtohahmot asettelua. Ensin täytyy tehdä "luuranko" meidän valikot HTML, oppia perustaidot tehdä omia horisontaalista valikoita. Ja sitten se koristaa käyttäen tyylisivuja. Olkoon horisontaalinen valikko sisältää 5 kpl. Ensimmäinen kohde ohjataan etusivulle. Toinen seikka - "Meistä". Kolmas - "Meidän palkinnot". Neljäs - "Se on hauskaa." Viides - "Ota yhteyttä".

HTML-koodi näyttää tältä:

Kuka ei tiedä: UL-tunnisteen käytetään luoti, sen elementit alkavat li. Li tagit perivät tyylit, joita sovelletaan ul.

Ul - lohkoelementistä listan, se venytetään leveyteen. Li on myös lohko.

Joten, luo index.html. Keräämme meidän koodi. Tässä vaiheessa, selain näyttää pystysuora sijaan horisontaalinen valikko. Mutta me teitä tavoite - tehdä vaakanavigaatiosta sivuston. Tähän tarvitaan CSS.

Mikä on CSS?

Jos et ole vielä hallita kehittämiseen sivustoja, on tarpeen tutustua käsitteeseen CSS. Itse asiassa, nämä säännöt ovat muotoilua, käsittely, joita sovelletaan eri elementtien sivuilla web-sivusto. Jos me kuvata ominaisuuksia elementtejä standardia HTML, sinun täytyy toistaa tämä useita kertoja, saat päällekkäisen koodiksi. latausaikaa käyttäjän tietokoneelle kasvaa. Tämän estämiseksi on CSS. Se riittää kuvaamaan vasta kun tietty elementti, ja sitten yksinkertaisesti osoittaa, missä käyttää ominaisuuksia tietyn tyylin. On mahdollista tehdä kuvauksen paitsi tekstiä sivun itse, mutta myös toisen tiedoston. Tämä mahdollistaa soveltaa kuvauksen eri tyylejä kaikkien sivujen sivuston. Se on myös kätevä muokata joitakin sivuja, muuttamalla CSS-tiedostoa. Tyylisivut voit työskennellä kirjasimia paremman tason kuin HTML, auttaa välttämään paheneminen grafiikka sivuston sivuilla.

Käyttämällä Style Sheets valikon kehittämiseen

CSS-koodi valikossa:

1. # My_1menu {list-style: none; padding: 6; leveys: 800px; margin: auto;}
2. # My_1menu li {float: vasen; fontti: italic 18 kuvapistettä Arial;}
3. # My_1menu a {color: # 756; display: block; korkeus: 55 kuvapistettä; line-height: 55 kuvapistettä; padding: 0px 15px 0px 15px; tausta: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; tausta: # 788;}

Nyt Katsotaanpa tuloksena horisontaalinen CSS menu.

# My_1menu - niin on tyyli määrättävissä UL elementin id = my_1menu, list-style: none - tämä komento poistaa jäljet ajastustoimet.

leveys: 800px - leveys meidän valikko on 800 pikseliä.

padding: 0 - tämä poistaa täyte sisällä.

margin: auto - vyravnivnie vaakanavigaatiosta keskellä meidän sivulla.

# My_1menu li - määrittämällä tyylejä li-elementtejä.

korkeus: 55 kuvapistettä - valikko korkeus.

# My_1menu a: hover - määrittämällä tyylejä elementti ja kun se indusoi hiiren.

Emme kuvata yksityiskohtaisesti jokainen rivi, koska jokainen kehittäjä voi määrittää sen parametreja täällä. Tällä perusteella käytön tyylejä valikossa verkkosivuilla. Voit antaa sille enemmän valmis ja kaunis ulkonäkö, kuvien avulla. Määritä elementti mutta esimerkiksi tausta: url (img1.png) toista-x. Tulkoon tausta: url (img2.png) toista-x varten: hover.

Käytä mielikuvitustasi, luovaa mieltymykset. Sitten perustuu siihen, että tietoa siitä, miten luoda yksinkertainen valikko verkkosivuilla, voit kehittää sivun, jolla on oma ainutlaatuinen muotoilu.