Cómo hacer una bandera para un sitio con CSS
Hacer un banner es una parte básica del diseño de la tela. Muchos primeros diseñadores utilizan tablas de tiempo para crear el diseño de la bandera y el sitio web. Sin embargo, el uso de CSS puede definir el fondo, los colores, el tamaño y las fronteras de la bandera. Tablas hacen un diseño difícil de manejar con el tiempo, mientras que CSS le permite cambiar los elementos según sea necesario. Es necesario un conocimiento básico de HTML para lograr esto poco de scripting. Si bien hay muchas maneras de crear un banner con CSS, en este tutorial vamos a crear una bandera bicolor centrada con el texto que está alineado a la derecha.
Contenido
- Video: tutorial html y css | colocar bandera en la pagina con animacion
- Video: tutorial html ~ tutorial html y css posicionamiento de divs en el contenedor general basico
- Consejos advertencias
Cosas que necesitará
- Un editor de texto
- Una página web
- Un selector de color
Abra su archivo html. Después de la etiqueta BODY poner en las etiquetas DIV y dar la DIV una etiqueta de identificación. Llamar al banner ID
.Escriba el texto de su bandera entre las etiquetas DIV que acaba de crear, . Encerrar la prueba en las etiquetas H1, . Esto hará que su texto más grande que el tamaño predeterminado en más de cuatro puntos.
Abra su archivo CSS. Configurar el estilo de la bandera escribiendo:
bandera {}. El #banner le dirá los navegadores buscando el estilo de id = “bandera” que esto es para una etiqueta de identificación y que lleva el nombre de la bandera.Entre el {} tendrá que escribir en los estilos. Hay muchos estilos en CSS. Nosotros sólo vamos a usar algunos estilos. En primer lugar queremos centrar el banner en la página.
bandera {margin: 0 auto}Esto utiliza márgenes para centrar la página web con el automóvil y poner a cero los márgenes superior e inferior.
Añadir los otros estilos.
bandera {margin: 0 autoIR
Anchura: 780px
IRVideo: tutorial html y css | colocar bandera en la pagina con animacion
Video: Tutorial HTML ~ tutorial html y css posicionamiento de divs en el contenedor general basico
Altura: 300px
IR
Fronterizas: # ff0000 10px sólida
IR
Antecedentes: #ffffff
IR
Color: # FF0000
IR
Font-size: 18px
IR
Text-align: right
IR
Padding-right: 10px;}Anchura y altura definen el tamaño de la bandera. La frontera es una línea continua de diez píxeles alrededor de la caja. Será rojo como se define en el código hexadecimal, es decir, el # seguido de las seis letras y números después de ella. El fondo está establecido en blanco. De color define el color del texto, que es otra vez rojo, para que coincida con la frontera. Tamaño de las letras define el tamaño del texto. Text-align posiciona el texto. En este caso se ha posicionado el texto a la derecha de la caja. El relleno crea un espacio entre el contenido, como texto, dentro de la bandera y el borde de la bandera. Padding-derecha se fija para dar 10px de espacio entre el texto y el borde derecho.
Guarde los archivos.
Consejos advertencias
- Para cambiar los colores, utilizar el selector de color para elegir un color de la pantalla. El selector de color le mostrará el código hexadecimal de ese color.