-
Cómo diseñar cajas DIV
-
HTML es el lenguaje subyacente utilizado para el diseño de páginas Web. HTML contiene una serie de elementos que se utilizan para la creación de subdivisiones en páginas Web. Algunos de estos elementos HTML incluyen: tablas, etiquetas span, capas y etiquetas DIV. etiquetas DIV se utilizan a menudo con hojas de estilo CSS y son populares entre los diseñadores de páginas web para su flexibilidad, facilidad de uso y el formato. El uso de etiquetas DIV puede crear diferentes sub-divisiones o secciones de caja para mantener el contenido y formato. La definición de una etiqueta DIV es simple y requiere la apertura <DIV> y de cierre </ DIV>.
Instrucciones
1 Bloc de notas abierta. Escribe o copia y pega el siguiente código:
<Html>
<Title> Mi Cajas DIV </ title>
<Style type = "text / css">
<! -
box1 {
height: 300px;Anchura: 300px;
background-color: # 003366;
}
caja2 {
background-color: #FF0000;altura: 300px;
Anchura: 300px;
}
caja2 {
float: right;}
->
</ Style>
</ Head>
<Body>
<Div id = "box1"> Esta es la caja 1 y su azul </ div>
<Div id = "caja2"> Esta es la caja 2 y su rojo </ div>
</ Body>
</ Html>
El código anterior define dos cajas DIV en la página web mediante la abierta <div> y el cierre </ div> etiquetas. Uno se llama: box1 y el otro se llama: caja2. Después, el código utiliza CSS para definir sus atributos tales como su color de fondo, las posiciones, anchura y altura.
2 Haga clic en "Archivo", "Guardar como". Seleccione "Todos los archivos" como el "Guardar como tipo".
3 Guarde el archivo como un archivo HTML mediante la colocación de ".html" al final del nombre de archivo. Por ejemplo: MyBoxDivs.html.
4 Ir a donde guardó su página Web en su disco duro. Haga doble clic en él. Se abrirá en su navegador. Verá que hay dos cajas DIV, uno rojo y el otro azul.
