Gör en horisontell meny för webbplatsen själv

Horisontell meny har nästan alla platser - det är en viktig del, eftersom det kan med sitt utseende och användbarhet för att locka eller omvänt, skrämma bort besökare. Låt oss lära hur man skapar en elementär horisontell meny: gör det "skelett" till HTML, att behärska de grundläggande färdigheter för att skapa. Du kan säkert hitta en färdig meny, men mycket trevligare att lära sig att utveckla det själv. Det är ganska kul.

Lär dig att göra menyn

Vi försöker att inte avvika från semantik, som ansluter sig till de ledande figurerna i layouten. Först måste du göra en "skelett" för våra menyer till HTML, lära sig grundläggande färdigheter för att göra sina egna horisontella menyer. Och så kommer det att dekorera med hjälp av formatmallar. Låt vår horisontell meny innehåller 5 objekt. Den första punkten kommer att omdirigeras till hemsidan. Den andra punkten - "Om oss". Den tredje - "Våra awards". Fjärde - "Det är roligt." Femte - "Kontakta oss".

HTML-kod ser ut så här:

Vem känner inte: ul taggen används för kula, dess element börjar med li. Li-taggar ärver stilar som appliceras på ul.

Ul - blockera del av listan, kommer den att sträckas till bredden. Li är också ett block.

Så skapar du en index.html. Vi samlar vår kod. Vid denna punkt, visar en vertikal webbläsaren snarare än en horisontell meny. Men vi med dig mål - att göra en horisontell meny för webbplatsen. För detta behöver vi CSS.

Vad är CSS?

Om du har ännu inte behärska utvecklingen av platser, är det nödvändigt att bekanta sig med begreppet Cascading Style Sheets. Faktum är att dessa är reglerna för formatering, bearbetning, som appliceras på olika element på sidorna i en webbplats. Om vi beskriver egenskaperna för elementen i standard HTML, måste du upprepa detta flera gånger, du får en dubblering av samma delar av koden. sida laddningstid på användarens dator kommer att växa. För att undvika detta finns det en CSS. Det räcker för att beskriva en gång en viss del, och sedan helt enkelt ange var att använda egenskaperna hos en viss stil. Det är möjligt att göra beskrivningen av inte bara text på sidan, utan även i en annan fil. Detta gör det möjligt att tillämpa beskrivning av de olika stilar på alla sidor på webbplatsen. Det är också praktiskt att ändra vissa sidor, modifiera CSS-filen. Formatmallar kan du arbeta med typsnitt på en bättre nivå än HTML, hjälper till att undvika en försämring grafik sidor på webbplatsen.

Med hjälp av Style Sheets för meny utveckling

CSS-kod för menyn:

1. # My_1menu {list-style: none; padding: 6; bredd: 800px; marginal: auto;}
2. # My_1menu li {float: left; font: italic 18px Arial;}
3. # My_1menu a {color: # 756; display: block; höjd: 55 bildpunkter; line-height: 55 bildpunkter; padding: 0px 15px 0px 15px; bakgrund: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; Bakgrund: # 788;}

Låt oss nu titta på den resulterande horisontella CSS meny.

# My_1menu - så det är stil uppdrag för UL- element med id = my_1menu, list-style: none - detta kommando för att ta bort de märken kvar av de schemalagda objekt.

width: 800px - bredden på vår meny är 800 pixlar.

padding: 0 - Detta tar bort stoppningen inuti.

marginal: auto - vyravnivnie horisontell meny i mitten av vår sida.

# My_1menu li - tilldela stilar li-element.

höjd: 55 bildpunkter - meny höjd.

# My_1menu a: hover - tilldela stilar till element och när det induceras mus.

Vi kommer inte att i detalj beskriva varje rad, som varje utvecklare kan ange dess parametrar här. Denna grund för användningen av stilar i menyn på webbplatsen. Du kan ge det en mer färdig och vackert utseende, med hjälp av bilder. Tilldela elementet men till exempel, bakgrund: url (img1.png) upprepa-x. Varde Bakgrund: url (img2.png) upprepa-x för a: hover.

Använd din fantasi, kreativa preferenser. Sedan bygger på att kunskap om hur man skapar en enkel meny på webbplatsen, kan du utveckla en sida med sin egen unika design.