En el post anterior expliqué como aplicar estilo a los formulario.
Ahora voy a aplicar un estilo un poco más elaborado, mantenemos la misma estructura html pero ahora la hoja de estilos varía un poco
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | #form { width:450px; margin:auto; background-color:#84AA00; border:none; } #form legend{ font-weight:bold; font-size:12px; color:#FFFFFF; background-color:#000000; padding:3px 8px 3px 8px; } #form ol{ list-style:none; } #form ol li{ padding-bottom:5px; } #form ol li label{ width:120px; float:left; text-align:left; color:#FFFFFF; } #form input[type=text] { border:none; background-image:url(f1.jpg); background-repeat:no-repeat; background-color:#84AA00; height:30px; width:254px; } #form input.btn { padding:3px; color:#FFFFFF; background-color:#576F00; border:1px solid #000000; } |
Como verás además del estilo de siempre para quitar los numeros a la lista y alinear las etiquetas le he agregado un grafico de fondo a las cajas de texto para obtener un formulario má atractivo además de tener un fondo más llamativo
Otros post sobre maquetación CSS
- Maquetación a tres columnas
- Maquetación a dos columnas
- Tablas versus divs
- Menu css usando ul y li
- Aplicar estilos a formularios
Si te pareció interesante este post, no olvides darles una revisada a los GoogleAds
Hola amigo, disculapa pero las imagenes que usas las podrias poner.
Descargalas del ejemplo usando firebug puedes ver las direcciones o click derecho > ver fondo > guardar