Aprende crea y diseña tu propio negocio de páginas web tutorial

erick777 (54)in #spanish • 7 years ago (edited)

Un gusto en saludarles mis queridos lectores para mí es un placer de traerles la 6ta parte del curso de diseño web.
Estuve un poco alejado de estos tutoriales ya que es algo que requiere un poco de tiempo y dedicación, pero me estaba trabajando en otros proyectos de mis estudios universitarios.

Sin más preámbulo comencemos, hoy les mostrareré un menú desplegable con css y html.

`Paso 1`

Comenzamos por crear una lista para el menú.
Si desconoces como crear una lista visita mi post en el siguiente enlace Lista

`Paso 2`

Colocamos la etiqueta nav con un atributo id para identificar el menu.

`Paso 3`

Colocamos los href="#". Estos son los que llevan a los link enlazados de las páginas que colocamos en el menú.

`Paso 4`

Se colocan las propiedades en el documento css para darle el estilo a el menú ya que hay muchos tipos de propiedades, puedes probarlos todos los que gustes aquí una pagina de propiedades css explicadas cada una de ellas.

`Aquí podemos visualizar como nuestro menú va mostrando un mejor estilo`

`Paso 5`

Para crear este tipo de menú, aplicaremos la regla CSS display que hará que los enlaces dentro del desplegable sólo se muestren al pasar el ratón.

PD: Si te fijas, por defecto escondemos los enlaces del submenú con display: none y luego los mostramos aplicando display: block con el selector :hover

Además, para que nuestros enlaces aparezcan de forma vertical y no horizontal como en el menú principal, aplicaremos la regla CSS de float: none

`Nuestro resultado.`

`PD: Colocamos una foto de fondo para un mejor aspecto de nuestro menú`

Esto a sido todo por el dia de hoy, espero que hayan aprendido algo de este tutorial cualquier duda dejenmela en los comentarios que con gusto les respondere.

Apoyemos el trabajo de @cervantes como Witnesses en esta página: https://steemit.com/~witnesses

_{Imagen proporcionadas por el usuario @carlos-cabeza}

Tambien apoya el trabajo de @castellano y @moisescardona como Witnesses en esta página: https://steemit.com/~witnesses

sígueme en mis redes sociales

Anteriores Tutoriales

Tutorial 1	Tutorial 2	Tutorial 3	Tutorial 4	Tutorial 5
Introduccion	Parrafos, titulos y etiquetas	Tablas y listas	Formularios	Enlazar un documento css con html

`Todas las imágenes son capturas de pantalla de mi propiedad`

#tutorial #cervantes #tecnologia #proconocimiento

7 years ago in #spanish by erick777 (54)

$0.24

Sort:

Trending

[-]

dolivero (56) 7 years ago

¡Gracias por el tutorial! Está súper útil :)

$0.00

[-]

erick777 (54) 7 years ago

Gracias por haberte pasado, saludos

$0.00

[-]

terandg (58) 7 years ago

Hey esto esta buenísimo! Yo estoy por hacer un diplomado en paginas web y creo que tus tutoriales en definitiva me serán útiles para llegar con una base en el html (y)

$0.00

[-]

erick777 (54) 7 years ago

sii que bueno que mis tutoriales te sirvan de algo, espero que puedas sacar tu diplomado, Saludos

$0.00

[-]

carolinacardoza (75) 7 years ago

creo que una de las mejores creaciones del hombre, ha sido el internet, con ello llegamos a muchos sitios, a muchas personas. tenemos que utilizar estas herramientas para promocionar nuestros negocios.

$0.00

[-]

erick777 (54) 7 years ago

Claro muy ciertas tus palabras, cada día el mundo avanza tecnológicamente hablando no hay que quedarse atrás por así decirlo.

$0.00

[-]

arissusan (34) 7 years ago

Excelente información. Es una muy buena herramienta tecnológica! gracias por compartirla.

$0.00

[-]

erick777 (54) 7 years ago

Gracias a ti por tomarte tu tiempo de visualizarlo, espero que allá sido de tu agrado,