Hay dos tipos de diseño de sitio: tabular y bloque. Y mientras que el primero es más conveniente para crear páginas html simples, el segundo es ideal si necesita agregar elementos individuales en forma de bloques.
Instrucciones
Paso 1
Hay dos técnicas que le permitirán desarrollar un diseño de bloque usted mismo: incrustando hojas de estilo en cascada en un documento o conectándolas desde un recurso externo. Ambos dan el mismo resultado, por lo que no existe una diferencia fundamental entre ellos. En el primer caso, pegue el siguiente código en cualquier lugar del archivo style.css:
.block1 {
}
Block1: el nombre del bloque, puede escribir cualquier otro. Entre las llaves, especifique los parámetros en el siguiente formato: nombre de atributo> dos puntos> valor> punto y coma (incluido el colocado antes de la llave). Los siguientes elementos se utilizan comúnmente:
- ancho - ancho (500px, 100%, etc.);
- altura - altura (200px, 25%, etc.);
- fondo - color de fondo (amarillo, rojo, # 000000);
- relleno - relleno alrededor del contenido dentro del bloque (0px, 20%);
- margen - márgenes externos del bloque (15px, 40%);
- borde - marco (borde: negro sólido 0px;);
- flotación - alineación (izquierda, derecha);
- radio del borde - redondeo de las esquinas (radio del borde: 10px;).
Paso 2
En el segundo uso de CSS, agregue el estilo entre las etiquetas y:
.block1 {
}
Y agregue los parámetros que desee.
Paso 3
Inserte el bloque en el lugar deseado en el sitio usando el comando:
Bloque 1
Guarde y actualice la página, debería aparecer. Tenga en cuenta que la alineación de la altura puede variar dependiendo de qué tan completo esté el contenido. Por ejemplo, si configura 300px, pero solo escribió una línea de texto, no se mostrará en su totalidad. Esto se puede corregir, por ejemplo, usando una tabla con los parámetros requeridos, que deben colocarse dentro del bloque, es decir entre etiquetas y. Y para que los bordes no sean visibles, inserte el atributo
