Facer un menú horizontal ao lugar vostede mesmo

menú horizontal ten practicamente calquera lugar - é unha parte importante, xa que pode co seu aspecto e usabilidade para atraer ou, inversamente, asustar os visitantes. Imos aprender como crear un menú horizontal elemental: facelo "esqueleto" a HTML, a dominar as habilidades básicas da creación. Pode certamente atopar un menú preparado, pero moito máis agradable para aprender a desenvolverse só. É moi divertido.

Aprende a facer menú

Tentamos non desviar a semántica, que se adhiren ás principais figuras do deseño. Primeiro ten que facer un "esqueleto" para os nosos menús para HTML, aprender as habilidades básicas para facer os seus propios menús horizontais. E entón el vai decorar, usando follas de estilo. Deixe o noso menú horizontal contén 5 elementos. O primeiro elemento será redirixido á páxina de inicio. O segundo punto - "Quen somos". O terceiro - "Os nosos premios". Mércores - "É divertido." Xoves - "Contacte connosco".

HTML-código coma este:

Quen non coñece: etiqueta UL é utilizado para a bala, os seus elementos comezan co li. Lin etiquetas herdar os estilos que son aplicados á ul.

Ul - elemento de bloque da lista, será estendido para o ancho. Lin tamén é un bloque.

Entón, cree un index.html. Recopilamos o noso código. Neste punto, o navegador exhibe unha vertical, en vez de un menú horizontal. Pero contigo obxectivo - para facer un menú horizontal para o sitio. Para iso, cómpre CSS.

Que é CSS?

Se aínda ten que dominar o desenvolvemento de sitios web, é necesario para familiarizado co concepto de CSS. En realidade, estas son as regras para formato, procesamento, que son aplicados a diferentes elementos nas páxinas dun sitio web. Se nós describimos as propiedades dos elementos HTML estándar, terá que repetir isto varias veces, obtén unha duplicación dos mesmos anacos de código. tempo de carga da páxina no ordenador do usuario vai medrar. Para evitar isto, hai unha CSS. Basta describir unha vez un certo elemento, e despois simplemente indicar onde utilizar as propiedades dun estilo particular. É posible facer a descrición non só o texto da páxina en si, senón tamén noutro arquivo. Isto permitirá aplicar a descrición dos distintos estilos en todas as páxinas do sitio web. Tamén é conveniente modificar algunhas páxinas, modificar o ficheiro CSS. As follas de estilo permiten que se traballa con fontes a un nivel mellor que o HTML, axudando a evitar o agravamento das páxinas gráficas da web.

Usando follas de estilo para o desenvolvemento de menú

CSS-código ao menú:

1. # My_1menu {list-style: none; recheo: 6; ancho: 800 pixels; Margin: auto;}
2. # My_1menu li {float: left; Fonte: cursiva Arial 18px;}
3. # My_1menu a {color: # 756; display: block; Altura: 55 píxeles; A liña altura: 55 píxeles; padding: 0px 15px 0px 15px; background: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Agora imos ollar para o menú CSS horizontal resultante.

# My_1menu - para que haxa asignación estilo para o elemento UL con id = my_1menu, list-style: none - este comando para eliminar as marcas deixadas polos elementos programados.

width: 800px - o ancho do noso menú é de 800 píxeles.

padding: 0 - isto elimina o recheo dentro.

Margin: auto - vyravnivnie menú horizontal no centro da nosa páxina.

# My_1menu li - asignar estilos de li-elementos.

height: 55px - altura menú.

# My_1menu a: hover - asignar estilos a elemento e rato cando é inducida.

Non imos describir en detalle cada liña, como todo creador pode especificar os parámetros aquí. Esta base para o uso de estilos no menú na páxina web. Pode darlle un aspecto máis acabado e bonito, usando fotos. Asignar elemento, pero, por exemplo, background: url (img1.png) repetirase x. Haxa background: url (img2.png) repetirase x á: hover.

Utilice a súa imaxinación, preferencias creativas. Logo, con base nese coñecemento sobre como crear un simple menú no sitio web, pode desenvolver unha páxina co seu propio proxecto orixinal.