Meitsje in horizontale menu foar de side sels

Horizontale menu hawwe hast eltse side - it is in wichtich part, as it kin mei syn uterlik en brûkberens te lûken of, oarsom, skrikken fuort besikers. Lit ús leare hoe't te meitsjen in elemintêre horizontale menu: it "skelet" oan HTML, om behearskje de basisfeardichheden fan it meitsjen. Jo kinne grif fine in ree menu, mar folle moaier om te learen hoe om te ûntwikkeljen it sels. It is moai fun.

Leare om te meitsje menu

Wy besykje net om ôfwike fan de semantyk, dy't harren oan de liedende figueren fan 'e yndieling. Earst moatte je meitsje in "skelet" foar ús menu oan HTML, leare basisfeardichheden om harren eigen horizontale menu 's. En dan sil decorate, mei help fan stylblêden. Lit ús horizontale menu befettet 5 items. De earste item sil nei de thússide. It twadde punt - "Oer ús". De tredde - "Us prizen". Fjirde - "It is leuk." Fyfde - "Nim kontakt mei ús".

HTML-koade sjocht der sa út:

Wa net wit: ul tag wurdt brûkt foar de kûgel, har eleminten begjinne mei de li. Li tags ervje de stilen dy't tapast oan de ul.

Ul - blok elemint fan de list, dan wurdt spand oan 'e breedte. Li is ek in blok.

Dus, meitsje in index.html. Wy sammelje ús koade. Op dit punt, de browser lit in fertikale ynstee fan in horizontale menu. Mar wy mei jo doel - om in horizontale menu foar de side. Dêrfoar hawwe wy nedich CSS.

Wat is CSS?

As jo hawwe noch de baas, de ûntwikkeling fan siden, is it nedich om 'e kunde komme mei it konsept fan cascadearjende stylblêden. Yn feite, dit binne de regels foar de opmaak, ferwurkjen, dy't tapast oan ferskillende eleminten op 'e siden fan in web-site. As wy beskriuwe de eigenskippen fan de eleminten yn standert HTML, dan sille moatte werhelje dizze ferskate kearen, krije jo in dûbel fan deselde stikjes koade. side load tiid op de brûker syn kompjûter sil groeie. Om foar te kommen dat, der is in CSS. It folstiet en beskriuwe mar ien kear in beskate elemint, en dan gewoan jaan wêr't te brûken de eigenskippen fan in bepaalde styl. It is mooglik om de beskriuwing fan net allinne de tekst fan de side sels, mar ek yn in oare triem. Dit sil tastean te passen de beskriuwing fan de ferskillende stilen op alle siden fan de site. It is ek handich om te wizigjen guon siden, wizigjen fan de CSS-triem. Stylblêden tastean jo te wurkjen mei lettertypen op in bettere nivo as it HTML, helpt te kommen dat slimmer de grafiken siden fan de site.

Mei help fan stylblêden foar de menu ûntwikkeling

CSS-koade foar it menu:

1. # My_1menu {list-styl: none; padding: 6; width: 800px; marzje: auto;}
2. # My_1menu li {float: left; lettertype: Italic 18px Arial;}
3. # My_1menu a {color: # 756; display: block; height: 55px; line-height: 55px; padding: 0px 15px 0px 15px; background: #dfc; text-decoration: none;}
4. # My_1menu a: Hover {color: #foa; background: # 788;}

No litte wy sjen nei de dêrút horizontale CSS menu.

# My_1menu - sa is der styl opdracht foar UL- elemint mei id = my_1menu, list-styl: none - dit kommando en meitsje de markearrings lofts troch de plande items.

width: 800px - de breedte fan ús menu is 800 pixels.

padding: 0 - Dit smyt de padding binnen.

marzje: auto - vyravnivnie horizontale menu by it sintrum fan ús side.

# My_1menu li - it tawizen fan stilen li-eleminten.

height: 55px - menu hichte.

# My_1menu a: Hover - it tawizen fan stilen oan elemint en as it wurdt feroarsake mûs.

Wy sille net beskriuwe yn detail alle line, lykas elke Developer kin oantsjutte syn parameters hjir. Dizze basis foar it brûken fan stilen yn it menu op de webside. Jo kinne jou it in mear klear en moaie uterlik, mei help fan foto 's. Assign elemint mar, bygelyks, background: url (img1.png) werhelje-x. Lit der wêze background: url (img2.png) werhelje-x foar in: Hover.

Brûk dyn ferbylding, kreative foarkar. Dan op grûn fan dy kennis op hoe te meitsjen in ienfâldige menu op de webside, kinne jo ûntwikkelje in side mei in eigen unike design.