Cómo usar CSS div para crear imágenes en la barra de navegación

Cómo usar css div para crear imágenes en la barra de navegación:

Pensamiento: li en ul está configurado línea por línea, por lo que debes configurar CSS display: inline en Haga el li línea por línea. Luego, debe configurar display: block en la etiqueta a de ul li, pero el li principal de a no establece un ancho específico, por lo que debe configurar display: inline-block en a para permitir que herede lado a lado con li. Y al mismo tiempo hacer que los estilos establecidos de ancho y alto surtan efecto.

1. Código CSS:

ul#nav{?ancho: 100?alto: 60px ?fondo: #00A2CA;

ul#nav?li{display：inline;?height：60px}?

ul#nav?li?a{display：inline-block;?padding：0?20px;?height： 60px; ?altura de línea: 60px; color: #FFF; ?familia de fuentes: "\5FAE\8F6F\ 96C5\9ED1"; ?a: hover{background: #0095BB}/* Establece el color de fondo que cambia cuando el mouse se desliza o se desplaza */?

2. Código HTML

lt; id ="nav"gt;?

lt;ligt;lt;a?href="/"gt;Homelt;/agt;lt;/ligt;?

lt; ligt ;lt;a?href="/html/"gt;Tutoriales HTMLlt;/agt;lt;/ligt;?

lt;ligt;lt;a?href="/rumen/"gt ; conceptos básicos de CSSlt;/agt;lt;/ligt;?

lt;ligt;lt;a?href="/css-tool/"gt;Herramienta de desarrollo CSSlt;/agt;lt;/ligt;?

lt;ligt ; lt;a?href="/css-texiao/"gt;Efecto CSSlt;/agt;lt;/ligt;?

lt;ligt;lt;a?href="/wenji/ "gt ;Problema CSSlt;/agt;lt;/ligt;?

lt;/ulgt;?

3. Captura de pantalla del efecto