Recuadro para destacar parte del contenido de una página web.
Vamos a hacer de manera sencilla y práctica, un recuadro para destacar la parte del contenido que quieras de una página web.
Al maquetar una página web con HTML, es muy habitual querer destacar una porción de texto que se desee remarcar. Muchas veces utilizamos tablas y le damos un borde o un fondo para destacar su contenido, pero no siempre resultan muy vistosas. En este sencillo taller, apto para principiantes, vamos a mostrar la manera de hacer un recuadro bonito con pocos recursos.
Se trata de utilizar tablas, pero las decoraremos de una manera sencilla, pero que puede ser nueva para los menos experimentados. En principio, lo mejor será que echemos un vistazo a los ejemplos que vamos a construir.
Podeis verlo en vivo en el Bloc de pruevas
Como se ha podido ver en el ejemplo, vamos a construir tres recuadros distintos, aunque muy similares. Estos recuadros tienen un borde de 1 píxel y colores distintos para el fondo de la celda con la cabecera y el cuerpo del recuadro. Las pautas de constitución son las siguientes:
Crear una tabla con un color de fondo como deseemos y con espacio entre celdas de 1 píxel y espacio entre el borde de la celda y su contenido de 3 pixel
La tabla tendrá dos celdas. Una con la cabecera de la tabla, donde colocaremos el título del recuadro y otra con el contenido propiamente dicho.
Ambas celdas tendrán estilos propios.
El título estar más destacado, poniendo negrita o un color al texto que contraste bien y el cuerpo un color más tenue, para ayudar a la lectura del texto.
Los colores de fondo de las celdas se deben asignar tal como queramos que aparezca en la tabla.
Así el fondo de la tabla sólo se podrá ver en el espacio que hay entre celdas, que habíamos indicado que era un píxel.
El color del texto de la celda con el titular es blanco, para que contraste con el color de fondo de la celda, que es en este caso el mismo que el de la tabla, pues no se ha indicado ningún color en la celda.
Sin mas os dejo los codigos de las cajitas de marras
Primera tabla
![About [span]me[/span]](https://2.bp.blogspot.com/-FnVj7f2PWyk/Wkp9UxKJd5I/AAAAAAACsi4/XgeVJX5yl5EeeSOy2c8DtEmefWYMc0vwwCLcBGAs/s1600/esta%2Bes%2Bla%2Bbuena.jpg)
0 comentarios:
Publicar un comentario