Maak 'n horisontale spyskaart vir die webwerf self

Horisontale kieslys het byna enige webwerf - dit is 'n belangrike deel, want dit kan met sy voorkoms en bruikbaarheid te lok of, omgekeerd, te skrik weg besoekers. Kom ons leer hoe om 'n eenvoudige horisontale kieslys te skep: maak dit "geraamte" na HTML, om die basiese vaardighede van die skep van die knie. Jy kan seker vind 'n gereed spyskaart, maar baie lekkerder om te leer hoe om dit self te ontwikkel. Dit is redelik pret.

Leer om spyskaart te maak

Ons probeer om nie daarvan af te wyk van die semantiek, wat voldoen aan die leidende figure van die uitleg. Eerstens moet jy 'n "geraamte" vir ons spyskaarte om HTML te maak, leer basiese vaardighede om hul eie horisontale spyskaarte maak. En dan sal dit te versier, met behulp van style sheets. Laat ons horisontale spyskaart bevat 5 items. Die eerste item sal herlei word na die tuisblad. Die tweede punt - "Meer oor ons". Die derde - "Ons toekennings". Vierde - "Dit is pret." Vyfde - "Kontak ons".

HTML-kode lyk soos volg:

Wat nie weet: ul tag word gebruik vir die koeël, sy elemente begin met die li. Li tags beërf die style wat toegepas word om die ul.

Ul - blok element van die lys, sal dit gerek word om die wydte. Li is ook 'n blok.

So, maak 'n index.html. Ons versamel ons kode. Op hierdie punt, die leser vertoon 'n vertikale eerder as 'n horisontale spyskaart. Maar ons by julle doel - om 'n horisontale spyskaart vir die webwerf te maak. Hiervoor het ons CSS.

Wat is CSS?

As jy nog het om die ontwikkeling van webwerwe te bemeester, is dit nodig om kennis te maak met die konsep van Cascading Style Sheets. Trouens, dit is die reëls vir die uitleg, verwerking, wat toegepas word om verskillende elemente op die bladsye van 'n web-site. As ons die eienskappe van die elemente in standaard HTML beskryf, sal jy het om dit 'n paar keer herhaal, jy 'n duplisering van dieselfde stukke van die kode te kry. bladsy laai tyd op die gebruiker se rekenaar sal groei. Om dit te voorkom, is daar 'n CSS. Dit is voldoende om slegs een keer 'n sekere element beskryf, en dan net aan te dui waar die eienskappe van 'n bepaalde styl gebruik. Dit is moontlik om die beskrywing van nie net die teks van die bladsy self, maar ook in 'n ander lêer. Dit sal jou toelaat om aansoek te doen die beskrywing van die verskillende style op alle bladsye van die webwerf. Dit is ook gerieflik om 'n paar bladsye te verander, verander die CSS-lêer. Style sheets kan jy om te werk met fonts op 'n beter vlak as die HTML, help om te verhoed dat die verslegtende die grafiese bladsye van die webwerf.

Die gebruik van Style Sheets vir spyskaart ontwikkeling

CSS-kode vir die spyskaart:

1. # My_1menu {lys-styl: geen; padding: 6; breedte: 800px; marge: motor;}
2. # My_1menu li {float: left; font: italic 18px Arial;}
3. # My_1menu n {kleur: # 756; vertoon: blok; hoogte: 55px; lyn-hoogte: 55px; padding: 0px 15px 0px 15px; agtergrond: #dfc; text-decoration: none;}
4. # My_1menu n: hover {kleur: #foa; agtergrond: # 788;}

Kom ons kyk na die gevolglike horisontale CSS spyskaart.

# My_1menu - so daar is styl opdrag vir UL- element met id = my_1menu, lys-styl: geen - hierdie opdrag aan die punte gelaat deur die geskeduleerde items te verwyder.

breedte: 800px - die breedte van ons spyskaart is 800 pixels.

padding: 0 - Dit verwyder die padding binne.

marge: motor - vyravnivnie horisontale spyskaart by die middelpunt van ons bladsy.

# My_1menu li - die toeken van style li-elemente.

hoogte: 55px - spyskaart hoogte.

# My_1menu n: hover - toeken style om element en wanneer dit veroorsaak muis.

Ons sal elke lyn nie beskryf in detail, soos elke ontwikkelaar sy parameters hier kan spesifiseer. Hierdie basis vir die gebruik van style in die spyskaart op die webwerf. Jy kan dit gee 'n meer afgeronde en 'n pragtige voorkoms, met behulp van prente. Toewys element maar, byvoorbeeld, agtergrond: url (img1.png) herhaal-x. Laat daar agtergrond: url (img2.png) herhaal-x vir 'n: hover.

Gebruik jou verbeelding, kreatiewe voorkeure. Dan op grond van die kennis oor hoe om 'n eenvoudige spyskaart op die webwerf te skep, kan jy 'n bladsy met sy eie unieke ontwerp te ontwikkel.