Fer un menú horitzontal per al mateix lloc

menú horitzontal té gairebé qualsevol lloc - que és una part important, ja que pot amb la seva aparença i facilitat d'ús per a atreure o, per contra, espantar els visitants. Anem a aprendre com crear un menú horitzontal elemental: que sigui "esquelet" a HTML, per dominar les habilitats bàsiques de la creació. Per descomptat que pot trobar un menú preparat, però molt més agradable per aprendre a desenvolupar per si mateix. És molt divertit.

Aprendre a fer menú

Tractem de no desviar-se de la semàntica, que s'adhereixen a les figures més destacades de la disposició. Primer cal fer un "esquelet" per als nostres menús a HTML, aprendre habilitats bàsiques per fer els seus propis menús horitzontals. I llavors es va a decorar, utilitzant fulls d'estil. Deixeu que el nostre menú horitzontal conté 5 articles. El primer punt serà redirigit a la pàgina d'inici. El segon punt - "Sobre nosaltres". La tercera - "Els nostres premis". Quart - "És divertit". Cinquena - "Contacte".

HTML-codi és el següent:

Qui no coneix: Etiqueta de UL s'utilitza per a la bala, els seus elements comencen amb el li. Li etiquetes hereten els estils que s'apliquen a la ul.

Ul - element de bloc de la llista, que serà estirat a l'amplada. Li és també un bloc.

Per tant, crear un index.html. Nosaltres recollim nostre codi. En aquest punt, el navegador mostra una vertical en lloc d'un menú horitzontal. Però nosaltres amb tu meta - per fer un menú horitzontal per al lloc. Per això necessitem CSS.

Què és CSS?

Si encara ha de dominar el desenvolupament de llocs, cal familiaritzar-se amb el concepte de Cascading Style Sheets. De fet, aquestes són les regles de format, el processament, que s'apliquen a diferents elements en les pàgines d'un lloc web. Si descrivim les propietats dels elements en HTML estàndard, que haurà de repetir aquesta operació diverses vegades, s'obté una duplicació de les mateixes peces de codi. el temps de càrrega en l'ordinador de l'usuari creixerà. Per evitar això, hi ha una CSS. És suficient per descriure només una vegada un determinat element, i després simplement indicar on utilitzar les propietats d'un estil particular. És possible fer la descripció de no només el text de la pàgina en si, sinó també en un altre arxiu. Això permetrà aplicar la descripció dels diferents estils en totes les pàgines del lloc. També és convenient modificar algunes pàgines, modificant el CSS-arxiu. Els fulls d'estil permeten treballar amb fonts en un nivell millor que l'HTML, el que ajuda a evitar l'empitjorament de les pàgines gràfiques del lloc.

L'ús de fulls d'estil per al desenvolupament del menú

CSS-codi per al menú:

1. # My_1menu {list-style: none; padding: 6; amplada: 800px; marge: acte;}
2. # My_1menu li {float: left; font: Arial cursiva 18px;}
3. # My_1menu a {color: # 756; display: block; alçada: 55 px; line-height: 55 px; padding: 0px 15px 0px 15px; Antecedents: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Ara anem a veure el menú CSS horitzontal resultant.

# My_1menu - pel que no és l'assignació d'estil per a l'element UL amb id = my_1menu, list-style: none - aquesta comanda per eliminar les marques deixades pels elements programats.

Ample: 800px - l'ample del nostre menú és de 800 píxels.

padding: 0 - això elimina el farciment interior.

marge: acte - vyravnivnie menú horitzontal en el centre de la nostra pàgina.

# My_1menu li - l'assignació d'estils li-elements.

alçada: 55 px - alt de menú.

# My_1menu a: hover - assignar estils a element i el ratolí quan s'indueix.

No anem a descriure en detall cada línia, ja que cada desenvolupador pot especificar els seus paràmetres aquí. Aquesta base per a l'ús d'estils al menú de la pàgina web. Pot donar-li un aspecte més acabat i bell, l'ús d'imatges. Assignar element però, per exemple, background: url (img1.png) repeat-x. Que no hi hagi background: url (img2.png) repeat-x: amb un vol estacionari.

Utilitza la seva imaginació, les preferències creatives. A continuació, sobre la base que el coneixement sobre com crear un menú senzill en el lloc web, es pot desenvolupar una pàgina amb el seu propi disseny únic.