Сompaginación Div. Su uso en las diferentes formas de ejecución
En internet una gran cantidad de material sobre el div. Por lo tanto, he decidido crear un artículo que va a contener todo lo que se refiere a bloques de la compaginación. En este artículo aprenderás cómo crear la primera página cuando se utiliza el bloque de la compaginación. Pero el énfasis principal de este artículo quiero hacer en los diferentes problemas que enfrentan los usuarios en general, especialmente aquellos que están empezando a familiarizarse con Div. En este artículo vamos a ver las diferentes opciones de consumo de div. Sabemos que se puede hacer con estos bloques, como modificar y cómo utilizarlos. Debajo de este artículo verás los comentarios, dejen sus comentario, preguntas, y yo decida Su problema y voy a agregar algo de Su problema en el artículo principal para el resto de usuarios.
Div – compaginación, qué es eso?
Antes los sitios de componer con la ayuda de tablas, que es ineficiente, y en vez de este modo vino nuevo — compaginación de bloque, utilizando Div. Los métodos de la compaginación de los sitios reflejan las etiquetas que se utilizan en la creación de un sitio web. Antes se trataba de la etiqueta <table> ahora, la etiqueta <div>.
Si mostrar prácticamente cualquier moderno sitio, se puede notar la similitud, a saber, la presencia en estos sitios mismas zonas: menú (menu), contenido (content), titulo (header), ent página (footer). Estas zonas son prácticamente cualquier sitio.
Las ventajas de bloques div compaginación
Las ventajas de esta compaginación de los siguientes:
- menos código y significa menos “basura” de etiquetas en la página
- posibilidad de más de marcado flexible, ya que cada div no está atado a nada (a diferencia de las celdas de la tabla)
- posibilidad de intercambiar los bloques en el código de una manera inusual (por ejemplo, primero el contenido y luego viene el titulo)
- mucho más opciones para los diferentes javascripts
- la versión moderna (tabla compaginación más no se aplica)
Empezar a crear el código mediante el uso de Div (la etiqueta <div>)
Empezar vamos con un sencillo, y el objetivo de crear un diseño de sitio web que se indica anteriormente. Todo el código que debe escribir en las páginas, voy a insertar en los correspondientes códigos.
Vamos a crear un simple plantilla de la página, usando div. Este código debe insertarse después de <body> y antes de </body>. Bueno eso espero que les diga que no es necesario.
|
1 2 3 |
<div> block 1 </div> <div> block 2 </div> <div> block 3 </div> |
En la página aparecen las palabras: bloque 1, bloque 2, bloque 3, que van en una columna, en la página no hay nada más. Este efecto se puede obtener mediante el uso de html la etiqueta <p>. Ahora comienza el proceso muy interesante. Para gestionar un div, modificarlos, debemos utilizar el archivo CSS. No voy a profundizar mucho en él, así como creo que Usted sabe lo que es.
Es deseable inmediatamente a sí mismo acostumbrar al conectar un archivo de estilos a sus páginas de inmediato, en lugar de insertar en cada archivo de estilos. Finalmente, tenemos que tener dos archivos: index.html y style.css — los archivos de datos se debe crear en cualquier editor de textos, la principal, es correcto especificar la extensión del archivo al guardarlo.
Ahora haremos para nuestros div de la barra divisoria de color rojo. Atención, el siguiente código que deberá introducir en el css.
|
1 2 3 |
div{ border: 1px solid red; } |
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <link href=»style.css» rel=»stylesheet»> <head> <body> <div> block 1 </div> <div> block 2 </div> <div> block 3 </div> </body> </html> |
La creación de estos dos archivos (style.css y index.html) y la apertura de index.html vemos lo mismo que en el caso anterior, pero cada div será un borde rojo. “Manejar” bloques estaremos con el uso de CSS y apropiación de concreto div su propia clase. Escribir style=”color: #a00;” (es decir, el uso de estilos inline) directamente en la página html no se puede, porque se es difícil de configurar una página.
La propiedad float para Div
Hemos creado una selección de nuestros bloques de la línea roja. Vamos a colocar estos bloques en posición horizontal. Para hacer esto, utilizamos la propiedad CSS- float. Esta propiedad es responsable de la alineación de los bloques, y con la ayuda de esta propiedad podemos alinear los bloques como nosotros queremos. Ahora vamos a colocar los bloques horizontalmente, uno detrás de otro. ATENCIÓN! Establecer la alineación puede solamente a la izquierda o a la derecha, por el centro de la alineación no! Escribiremos nuestro código en el CSS.
|
1 2 3 4 |
.div{ border: 1px solid red; float: left; } |
Si ahora abrimos la página en el navegador, veremos que la div se sitúan uno detrás de otro. Su anchura depende del contenido que se encuentra en estos div, y se calcula automáticamente por el navegador. Si la segunda div establecer las propiedades float:right, veremos que el segundo bloque se acercó a la parte derecha de nuestra página. Una manera fácil de crear el orden de la div y de formación a la carta o el contenido. En el futuro cada div es deseable dar el ancho, para que luego no resultaba toda innecesaria nos oropel.
Importante! Quiero señalar que si Usted acaba de comenzar a trabajar en css, en seguida te acostumbras al uso de las clases en css y no id. Esto Le ayudará en el futuro, especialmente cuando Usted va a trabajar con bibliotecas de jQuery. Además, los títulos de las clases es muy recomendable escribir “brillante”. Por ejemplo, para que el contenido es deseable dar a la clase Div.content, y para el menú- .sidebar. Si desea seleccionar una propiedad para un elemento específico en Su página, a continuación, utilice el #de id.
Importante! En el código Se puede observar en html <div style=”clear: both;”></div>. Debemos decirle al navegador que después de este comando, todos los demás div deben ir por debajo de las anteriores. Si esto no se hace, puede resultar en una mala situación, cuando la div se alinean en una columna, o gthtrhsdf.n mutuamente. Es un equipo de navegador html la etiqueta <br>, pero para div.
La propiedad padding y margin para div
Importantes propiedades en el blog de la compaginación de la div y la capacidad de utilizarlos para desarrollar individuales de soluciones de diseño para Su sitio web. Inicialmente, si perder estas propiedades de div (bloques), obtenemos que todos los div se encuentran firmemente el uno al otro, independientemente de que van uno detrás de otro o una debajo de la otra. Gracias a nuestras propiedades, tales como el padding y margin, puede definir los intervalos entre el div, o dentro de un div. Por ejemplo:
|
1 2 3 4 5 6 |
.div{ border: 1px solid red; float: left; padding: 10px; margin-right: 10px; } |
Este código en CSS nos indicaron de Div distancia entre ellos, así como la distancia interno contenido en el interior de la unidad.
Si es necesario, para un bloque (div) se encontraba a cierta distancia de la unidad, que está al lado, debemos utilizar la propiedad margin.
Importante! La propiedad padding y margin tienen las siguientes opciones: Si modificamos el número de píxeles, con los cuatro lados se hace es la distancia. Si establecer dos valores, por ejemplo: margin: 10px 5px, de arriba y de abajo se distancia en 10px, y a la izquierda y a la derecha de 5px.
Importante! También existen intervalos personalizados. Esto se define la asignación de las propiedades de las palabras bottom (abajo), top (arriba), left, right. En nuestro ejemplo, utilizamos el espacio a la derecha.
La propiedad border — pedir la frontera de nuestro div
A veces debemos establecer una clara frontera de nuestros bloques, para demostrar la diferencia entre ellos. En este caso, tenemos que la propiedad border. Gracias a esta propiedad podemos definir la frontera de nuestro Div de nuestra elección. Esta propiedad tiene tres parámetros, que están separadas por espacios. La primera, la anchura, se establece pixeles. Este será el ancho de la frontera. La segunda opción es el estilo. Estilos de mucho, y necesitaría otro artículo, para describirlos. Cuáles pueden ser los estilos? Por ejemplo, el doble borde, o intermitente. Y así sucesivamente. En nuestro ejemplo utilizamos solid — una sola línea anchos. El tercer parámetro es el color. El color se puede especificar el 16 de código, a una palabra en inglés, por ejemplo, black.
También puede especificar un límite para cada una de las partes de nuestro div, para ello es necesario utilizar un top, bottom, left, right. El ejemplo de código siguiente.
|
1 2 3 4 5 6 7 |
.div{ border: 1px solid red; float: left; padding: 10px; margin-right: 10px; border: 1px solid red; } |
La propiedad width y height para div
Ahora podemos pedirle a nuestro div anchura y la altura, esto hará que el div más claros. Es necesario añadir a las propiedades de cada clase div width:300px; height:500 px. Ahora abrimos la página, veremos que los bloques se han convertido en mucho más y ahora se ven completos. La anchura y la altura se puede especificar en píxeles o en porcentaje.
Wrapper. Que es y para qué es necesario?
Hemos llegado hasta el instante de la compaginación del sitio, es decir hasta el wrapper. Usted debe seleccionar su uso en el futuro o no, pero yo aconsejo de usar. Pero, para empezar, debemos comprender que esto es.
Normalmente, cuando se crea el sitio que usted necesita, para que un sitio por el centro de la ventana del navegador. Generalmente, hacemos un sitio fijo parámetros, la anchura o la altura. Por lo tanto, nos gustaría que todo esto bien se veía. Por eso ha aparecido div-bloque, que llamamos el Wrapper. Él es una especie de contenedor en el que se encuentran el resto de los bloques.
Cómo usarlo? Para ello, creamos un div wrapper después de la etiqueta <body>, después de esto, colocamos en el interior de una wrapper el resto de los bloques de nuestro sitio y, a continuación, cerrar el div wrapper.
En el CSS le damos un wrapper de un ancho fijo (por lo general indican 990 px, pero aquí se puede experimentar, esto se debe a que en este momento la mayoría de los usuarios utilizan una resolución de 1024×768, pero la resolución está aumentando todo el tiempo, por lo tanto, en el futuro, este valor será necesario cambiar), y también le indicamos lo siguiente: margin-left: auto; margin-right: auto;
Todo esto hará que el sitio por el medio, es necesario tener en cuenta que el de la etiqueta <body> también tienen sus márgenes, por lo que es recomendable eliminar. Pegue el código siguiente en el archivo CSS.
|
1 2 |
body, html{ margin: 0px; padding: 0px; |
Si queremos cambiar la distancia de la parte superior o desde cualquier otro lado, lo mejor es usar la propiedad margin de el wrapper.
Div compaginación – creamos el código de la unidad de diseño de páginas. Resultado
Ha llegado el momento de crear todo el sitio web, que se muestra en la imagen de arriba. A continuación he indicado código, que debe estar en la index.html y en el style.css.
Archivo CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
body, html{ font: 12px tahoma; margin: 0px; padding: 0px; } div{ text-align: center; } .wrap{ width: 990px; margin-left: auto; margin-right: auto; background: #ddd; padding: 10px; } .header{ background: #e25e5e; height: 100px; margin-bottom: 10px; padding: 10px; } .sidebar{ float: left; padding: 10px; width: 300px; background: #5ee28d; height: 700px; } .content{ float: left; padding: 10px; margin-left: 10px; background: #5e86e2; width: 640px; height: 700px; text-align: left; } .bottom{ background: #141926; height: 60px; margin-top: 10px; padding: 10px; } |
Desde el código, que ha sido descrito más arriba, Usted puede ver que, gracias a un bloque compaginación, hemos reducido nuestro código en el index.html a un mínimo, la página es muy funcional, fácil de modificar, mediante la edición de un solo archivo style.css. Eso es todo, puede disfrutar de este código o de hacer lo que en el caso de esta.
ACTUALIZACIÓN
ATENCIÓN! Voy a seguir actualizando esta página y agregar propiedades diferentes, que se va a establecer la Div. Por lo tanto, a menudo actualice esta página para estar al día de los últimos cambios que se refieren a la div. Buena suerte en la creación de código.
Contact Us
You are used to see a contact form here. Almost everyone does it. But while examining the behavior of people, we came to the conclusion that the form is completely unnecessary. In any case, it all comes down to discuss your project on WhatsApp. Why should we waste your time filling out various forms?