¿Qué chico guapo puede enseñarme cómo hacer una barra de navegación CSS?

Este es un código de barras de navegación completo. Te agregué un comentario. Se puede utilizar de forma flexible. En cuanto a las tres imágenes, puedes hacerlas tú mismo según el tamaño en CSS, 2px es suficiente. Los colores al pasar el cursor suelen ser más brillantes que los colores de enlace y exploración. Si no puede hacer eso, puede encontrar mi información de contacto en mi blog y solicitar materiales.

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES " " http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transicional . DTD " & gt;

& lthtml xmlns = " http://www . w3 . org/1999/XHTML " & gt;

& lthead & gt

& ltmeta http-equiv = " Tipo de contenido " Contenido = " text/html; charset=gb2312" />

& lttitle & gtBarra de navegación

& lt! -Controlar el estilo CSS de la barra de navegación-& gt;

& ltstyle type="text/css "

* {

Margen: 0;

Relleno: 0;

tamaño de fuente: 12px

texto: centrado

}

Texto {

Color de fondo: # fff

}

#nav {

Ancho: 700px

Margen: 20px auto 0 auto

}

#nav li{

Pantalla: en línea;

tipo-estilo de lista: Ninguno;

}

Navegación #ALI: Enlace, Navegación #ALI: Visitado {

Flotante: Izquierda

Espaciado lateral - derecha: 1px;

Alto: 26px

Alto de línea: 26px

Relleno: 0 20px

Decoración de texto: ninguna;

Color: # 333;

Backend: URL (enlace . jpg);

}

#Ali Navegación: Círculo{

Color: # 000;

Fondo: URL (desplazar el cursor . jpg

}

#首页#NavigationAli#cur1, #divcss); #navigationali#cur2, #csslayout #navigationali#cur3, #css20 #navigationali#cur4, #website #navigationali#cur5, #moban #navigationali#cur6 {

Color: # fff

Fondo: URL (. jpg actual);

}

#Backline {

Ancho: 100%

Alto: 3px;

Desbordamiento: oculto;

Fondo: # 06f

}

& lt/style & gt;

<! -Controlar el final de la barra de navegación de estilo CSS-& gt;

& lt/head & gt;

& ltbody & gt

& ltbody id = " casa " & gt

& lt! - Generar una lista desordenada de navegación ->;

& ltul id = " nav " & gt

& ltLi& gt& lta href = " index . html " id = " cur 1 " >Página de inicio

& lt李& gt& lta href="#" id="cur2 " >Exposición de obras

& lt李& gt& lta href="#" id= "cur3 " >Diseño de sitio web

& lt李& gt& lta href="#"

id="cur4 " >Contáctenos

& lt李& gt& lta href="#" id="cur5 " >Excelente apreciación del sitio

& lt李& gt& lta href= " #" id="cur6 " >Descarga de plantilla

& lt/ul & gt;

& lt! -Fin de generar lista de navegación desordenada->

<! - Línea inferior de navegación ->;

& ltdiv id="topline" >& lt/div>

& lt/body>

</html>