Un enfoque simple y extremadamente realista sería este: (Tenga en cuenta que no he probado el código, por lo que es posible que deba ajustarlo ligeramente)
Primero haga el contenedor del menú:
- ¿Cuáles son todos los lenguajes de desarrollo web ordenados de peor a mejor? (incluidos los lenguajes de script como php?
- ¿Qué debo hacer para fortalecerme en el desarrollo web?
- ¿Qué necesito para hacer un sitio web como 'Facebook'?
- Cómo mover WordPress de un subdominio a un dominio principal
- ¿Qué es mejor para los usuarios de MyPhone, una versión de sitio web sensible o una aplicación?
Luego agregue los contenedores de botones. Para facilitar, supongo que todos los botones comparten el mismo ancho:
Luego agrega las imágenes. Sugerencia, como probablemente no sean íconos de FontAwesome o Material Design, ¡cree una imagen Sprite [1]!
Luego agrégalos:
Ahora agregue el texto de su menú:
Ahora mantén las cosas simples y agrega tus estilos:
.menu-container {
ancho: 100%;
fondo: # 999;
}
.button-container {
pantalla: bloque en línea;
ancho: 10%;
alinear texto: centro;
margen: 0 automático;
relleno: 5px 0;
}
.button-container: hover {
fondo: #bbb;
}
.button-container a {
color: #fff;
}
/ * Imágenes * /
/ ********** /
.sprite {
background-image: url (lala.png)
repetición de fondo: sin repetición;
altura: 30px;
ancho: 30px;
}
.sprite.home-icon {
posición de fondo: 0xp 30px;
}
.sprite.search-icon {
posición de fondo: 0xp 60px;
}
.sprite.random-icon {
posición de fondo: 0xp 90px;
}
Esto debería cubrir sus conceptos básicos y orientarlo en las direcciones correctas, ahora depende de usted hacer sus estilos finales 🙂
¡Buena suerte!
Nota:
He colocado tus elementos de texto en contenedores. En general, esta es una buena idea para espaciar los botones en consecuencia si no tienen sus propios anchos. Solo agregarlos de esta manera solo crea un código más estructurado en mis ojos. Es más fácil trabajar en el futuro 🙂
Notas al pie
[1] Sprites CSS: qué son, por qué son geniales y cómo usarlos | CSS-Tricks
