Crea tu página web desde 0 - parte #12 - Creando menústeemCreated with Sketch.

in tutorial •  2 years ago

Hola a todos! espero que se encuentren bien.😜 😜

En este nuevo post vamos a construir la primera parte de nuestra página web, en este caso empezaremos con la cabecera o header, la cual esta compuesta por un menú....

Como vimos en el mockup o diseño previo, nuestro menú debe quedar así...

Lo primero que haremos es abrir nuestro editor de código y abrir nuestro archivo index.html donde crearemos la siguiente estructura....


<header>
    <nav>
        <ul>
            <li><a href="#section-1">Me</a></li>
            <li><a href="#section-2">Who i am</a></li>
            <li><a href="#section-3">Portfolio</a></li>
            <li><a href="#section-4">Contact</a></li>
        </ul>
    </nav>
</header>

Este código será el que nos estructure nuestro menú de navegación en nuestra página web, como ven hemos usado varios elementos html que nos ayudan a formar y estructurar cada item del menú... entonces nos debe quedar algo así...

Ahora si guardamos y miramos en el navegador nos quedara algo como esto...

Como vemos no es para nada amigable y creo que espantaría nuestro público al momento que ingresen al sitio, pero esto es por que aún no se le ha aplicado los estilos mediante css. 👌👌

Para esto vamos a nuestro archivo style.css y pegamos el siguiente código...

html, body {
    padding: 0px;
    margin: 0px;
}
body {
    font-size: 16px;
    font-family: sans-serif;
}
header {
    background: #080808;
}
nav {
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px;
}
nav ul {
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    display: inline-block;
    padding: 0px 10px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0px 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
nav ul li a:hover{
    color: #ccc;
}

Este pequeño código css nos da el estilo que queremos lograr con nuestra cabecera de página y menú, quedaría algo así...

Luego guardamos el archivo y recargamos la página en el navegador, debemos ver algo como esto...

😱 😱 😱

Como vemos el cambio que nos da la página con los estilos css aplicados es enorme, por eso la importancia de aprender y de usar css en el mundo web 😎

Bueno eso es todo por este post, en el próximo continuaremos creando el resto de la estructura de nuestro portafolio de servicios.

Saludos! 🤗 🤗

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
·

Este Post ha recibido un Upvote desde la cuenta del King: @dineroconopcion, El cual es un Grupo de Soporte mantenido por @wilbertphysique, @yoenelmundo y 5 personas mas que quieren ayudarte a llegar hacer un Top Autor En Steemit sin tener que invertir en Steem Power. Te Gustaria Ser Parte De Este Projecto?

This Post has been Upvote from the King's Account: @dineroconopcion, It's a Support Group run by @wilbertphysique, @yoenelmundo, and 5 other people that want to help you be a Top Steemit Author without having to invest into Steem Power. Would You Like To Be Part of this Project?

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by juanpchica from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

This post has received a 3.13 % upvote from @drotto thanks to: @banjo.

This post has been ranked within the top 25 most undervalued posts in the first half of Aug 12. We estimate that this post is undervalued by $21.58 as compared to a scenario in which every voter had an equal say.

See the full rankings and details in The Daily Tribune: Aug 12 - Part I. You can also read about some of our methodology, data analysis and technical details in our initial post.

If you are the author and would prefer not to receive these comments, simply reply "Stop" to this comment.

excelente informaccion amigo algundia aprendere

·

Gracias amigo, asi será