interiores , junto con tres diferentes estilos CSS . Cosas que necesitará de computadora con Windows 7
Bloc de notas u otro editor de texto
Internet Explorer u otro navegador
Mostrar más instrucciones
Cómo crear una página Web
1
Haga clic en el botón "Inicio" , seleccione la opción de menú "Todos los programas " , haga clic en la opción " Accesorios " y haga clic en la opción de menú " Bloc de notas " .
2
Escriba el marcado siguiente en la ventana de documento :
Div
anidada <html> es el elemento más externo y permite que el navegador sabe que debe traducir el contenido como HTML. El elemento head contiene elementos que definen la información general de la página. En este ejemplo , el elemento <title> define el texto que aparece en la barra de título cuando se muestra la página. El elemento <body> contiene el contenido presentado en la página. <br> <p> 3 Haga clic en el menú " Archivo" y haga clic en la opción de menú " Guardar" para que aparezca la opción "Guardar como" cuadro de diálogo . <br> 4 <p> Seleccione " Todos los archivos " de la opción "Guardar como tipo" lista desplegable . Esto es necesario para prevenir la extensión ". Txt" se añada al final del nombre de archivo. <br> 5 <p> Type " DivsExample.html " en el campo " Nombre de archivo" . <br> <br> 6 <p> Vaya a la ubicación donde desea guardar el archivo. Asegúrese de que se acuerde para su uso en los pasos posteriores. <br> 7 <p> clic en el botón "Guardar" para guardar el archivo. <br> Probar la página <br> 8 <p> clic en el botón "Inicio" y haga clic en el elemento de menú "Equipo" . <br> 9 <p> Vaya a la ubicación donde guardó " DivsExample.html " . <br> 10 < p> doble clic en " DivsExample.html " y verificar que las pantallas de título correcto en la barra de título del navegador . Si no es así , compruebe el margen de beneficio que ha escrito para asegurarse de que usted no escribe nada mal . <br> Cree el exterior Div <br> 11 <p> Escriba el siguiente marcado entre la etiqueta head y < /head> : . <p> <br> <style type="text/css"> <br> <p> outerDiv { <br> <p> frontera : 2px sólidos <style> elemento se utiliza para definir estilos CSS en línea . Usted preceder el nombre del estilo con un "." para indicar que se ha seleccionado el estilo basado en el valor del atributo "class" del elemento. Por lo tanto , acaba de crear un estilo CSS en línea que se aplicará también todos los elementos con un atributo de clase en " outerDiv " . Defina las propiedades del estilo entre llaves . Las propiedades se definen como "nombre de : . Pares de valores " <br> 12 <p> Escriba el siguiente marcado entre la <body> y la etiqueta < /body> : <br> <p> < div class = " outerDiv "> <br> <p> caja exterior <br> <p> < /div > <br> <p> al establecer el atributo "class" del elemento <div> a " outerDiv " , usted indica que el estilo que ha definido en el paso 1 se debe aplicar a la div . El contenido del elemento <div> es " externo de la caja . " Este es el texto que se mostrará dentro de la caja . <br> 13 <p> Haga clic en el menú " Archivo" y haga clic en la opción de menú " Guardar" . <br> 14 <p> Llevar el " Nested " ventana del navegador demostración Div al primer plano. Haga clic derecho en la ventana y haga clic en la opción de menú " Actualizar" . Una caja con una frontera del moreno se debe mostrar . Debe contener la "caja exterior . " Text Si no se muestra correctamente , compruebe su margen de beneficio y corregir cualquier error . <br> Crear una Inner Div <br> 15 <p> Agregue el siguiente código de marcado CSS dentro del elemento <style> debajo de la llave de cierre ( } ) del outerDiv estilo se puede aplicar a cualquier elemento que tiene su atributo "class " en " vBarDiv " . El estilo define una barra de negro el 100 por ciento de 100 píxeles de alto y 300 píxeles de largo , que se posicionan en relación con los demás elementos <br> 16 <p> Escriba el siguiente marcado por debajo de la " Caja externa " text : . <br> <p> <div class="vBarDiv"> <br> <p> < /div > <br> 17 <p> Haga clic en el menú " archivo" y haga clic en la opción de menú " Guardar" . <br> 18 <p> Coloque la ventana del navegador " Nested Div demostración " al primer plano. Haga clic derecho en la ventana y haga clic en la opción de menú " Actualizar" . Un cuadro negro debe establecerse dentro de la caja marrón con borde , debajo del texto. Si no es así , compruebe para asegurarse de que usted no hizo un error de mecanografía . <br> Crear Otras Divisiones interiores <br> 19 <p> Escriba el siguiente código de marcado CSS debajo de la llave de cierre del el estilo varBarDiv definición de estilo crea un cuadro rojo que es de 100 píxeles de ancho . El contenido de la caja se centrarán <br> 20 <p> Agregue el marcado siguiente después de la " Caja externa " text : . <br> <p> <div Class="wordDiv"> <br> <p> Inner <br> <p> < /div > <br> 21 <p> Agregue el siguiente marcado debajo del elemento <div> que señala a la barra de negro : <br> <p> < div class = > <br> <p> Box
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programacion/computer-programming-languages/87803.html' >Cómo editar los datos en un objeto DataSet </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/computer-programming-languages/87805.html' >Cómo declarar las variables como un formulario en VBA </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Artículos relacionados </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87424.html" title="Como subconjunto de una matriz en MATLAB " target="_self">Como subconjunto de una matriz en MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88813.html" title="Cómo agregar barras de línea a un sitio Web " target="_self">Cómo agregar barras de línea a un sitio Web </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86759.html" title="Cómo quitar NaNs y INF de una matriz en MATLAB " target="_self">Cómo quitar NaNs y INF de una matriz en MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87652.html" title="Cómo ocultar un DIV vacío " target="_self">Cómo ocultar un DIV vacío </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87938.html" title="Unidad de programación del controlador Tutorial " target="_self">Unidad de programación del controlador Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88114.html" title="Cómo crear Servicios Web GIS " target="_self">Cómo crear Servicios Web GIS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86392.html" title="Los mejores lugares para poner Registros de Aplicaciones de red " target="_self">Los mejores lugares para poner Registros de Aplicacione…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88613.html" title="Cómo calcular los cuadros por segundo " target="_self">Cómo calcular los cuadros por segundo </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88889.html" title="Cómo crear Subíndice Utilización de códigos HTML " target="_self">Cómo crear Subíndice Utilización de códigos HTML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86326.html" title="Cómo instalar un archivo IPA en un simulador iPhone " target="_self">Cómo instalar un archivo IPA en un simulador iPhone </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Artículos destacados </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96457.html" title="Cómo convertir un entero a una cadena en Visual Basic " target="_self">Cómo convertir un entero a una cadena en Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86570.html" title="Ventajas y desventajas de un nanocomputadora " target="_self">Ventajas y desventajas de un nanocomputadora </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/93702.html" title="Cómo utilizar las secuencias de comandos de Python para MobiDeDRM " target="_self">Cómo utilizar las secuencias de comandos de Python par…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/95496.html" title="Codificación XML y ASP " target="_self">Codificación XML y ASP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96490.html" title="Cómo hacer de programación de base de datos con Visual Basic " target="_self">Cómo hacer de programación de base de datos con Visua…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90647.html" title="Cómo convertir String en Formato de fecha en Java " target="_self">Cómo convertir String en Formato de fecha en Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90409.html" title="¿Cómo subir archivos de gran tamaño a un sitio Web de Java " target="_self">¿Cómo subir archivos de gran tamaño a un sitio Web d…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88421.html" title="Cómo restaurar archivos de cola " target="_self">Cómo restaurar archivos de cola </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86953.html" title="Cómo hacer un juego en QBasic " target="_self">Cómo hacer un juego en QBasic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91269.html" title="Cómo crear un mapa de calor " target="_self">Cómo crear un mapa de calor </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
