Estilos en las listas html con css. Menu horizontal y vertical.
Archivos
- index.html
- estilo.css (vertical)
- estilo.css (horizontal)
index.html
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="encabezados.css"> </head> <body> <ul> <li><a href="#">Opción 1</a></li> <li><a href="#">Opción 2</a></li> <li><a href="#">Opción 3</a></li> <li><a href="#">Opción 4</a></li> <li><a href="#">Opción 5</a></li> </ul> </body> </html> |
estilo.css (vertical)
*{ padding: 0px; margin: 0px; } .menu{ font-family: arial; font-weight: bold; font-size: 12px; color: black; } .menu li{ list-style: none; padding-left: 10px; padding-right: 10px; border-color: lightblue; border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; border-right-width: 1px; border-right-style: solid; border-left-width: 1px; border-left-style: solid; background-color: #cef3ff; width: 80px; text-align: center; } .menu li a{ color: blue; text-decoration: none; } estilo.css (horizontal) *{ padding: 0px; margin: 0px; } .menu{ font-family: arial; font-weight: bold; font-size: 12px; color: black; } .menu li{ float: left; list-style: none; padding-left: 10px; padding-right: 10px; border-color: lightblue; border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; border-right-width: 1px; border-right-style: solid; border-left-width: 1px; border-left-style: solid; background-color: #cef3ff; margin-right: 10px; } .menu li a{ color: blue; text-decoration: none; } |