Cómo cambiar el tamaño de las celdas en Excel y hacerlas del mismo tamaño. Cómo editar el espacio de una fila horizontal con el mouse

Dedicado a CSS, hablé de principios básicos CSS y casos típicos de su uso. fueron considerados Conceptos básicos de CSS, tipos posibles selectores, estructura HTML desde el punto de vista CSS. He enumerado las propiedades CSS más comunes y he mostrado cómo se pueden configurar para los elementos de la página. Presté suficiente atención a las propiedades CSS responsables de sangrías y bordes, representación de texto, imágenes, enlaces y listas. Finalmente se decidió por las propiedades específicas del estilo de la tabla.

Todo esto es bueno, pero la cuestión del uso aún permanece abierta. estilos CSS para formar la estructura y el diseño de la página. Anteriormente, cuando pocas personas conocían CSS y apenas emergía como una tecnología eficaz, las tablas se utilizaban casi universalmente para estos fines. Como regla general, ocupaban todo el espacio de la página y, utilizando las celdas de la tabla, se especificaban regiones para colocar secciones individuales. La presencia de propiedades como colspan y rowspan , que permiten pegar, respectivamente, varias columnas en una línea y varias líneas en una columna, dio aún mayor flexibilidad al marcado definido de esta manera. Muy a menudo, se utilizaban tablas anidadas como contenido de una celda, que a su vez podía tener sus propias tablas anidadas. Esta estructura de página si es grandes volúmenes se volvió pesado, difícil de sostener y nada flexible. Por ejemplo, para mover una sección de un lado de la página al otro, en algunos casos tuve que sentarme durante horas y reescribir manualmente el marcado.

Ahora, con el uso de CSS, todo se ha vuelto mucho más fácil. Basta con separar el contenido de la sección requerida en capa separada usando etiqueta div y simplemente establezca reglas de posicionamiento en la página usando propiedades CSS. Si luego necesita mover esta sección al lado opuesto de la página, simplemente puede cambiar las propiedades CSS sin tocar el código de la página. Todo es muy sencillo y cómodo. Sin embargo, para que esta simplicidad resulte evidente es necesario conocer estas posibilidades un poco más profundamente.

En este artículo hablaré sobre qué tipos de diseño de página existen, cómo usarlos y cómo crearlos. Pero empecemos desde el principio.

Opciones de diseño de página.

Como regla general, todas las páginas se pueden dividir en tres categorías:

Páginas de ancho fijo. Estas páginas tienen un límite en el ancho de sus elementos y, independientemente del tamaño de la ventana del navegador, el ancho de la región utilizada es fijo y no cambia mientras se trabaja con la página. Páginas similares se utilizan en lugares donde se establecen requisitos estrictos para la visualización de elementos de la página y la distribución incontrolada de algunos elementos es simplemente inaceptable. EN casos similares generalmente establecido ancho fijo etiqueta del cuerpo y centre la página para que se ajuste al ancho de la ventana del navegador. El valor de ancho más común para páginas de ancho fijo es 960 px; este tamaño permite que la página se vea bien en resoluciones de pantalla a partir de 1024x768.

Páginas de ancho flotante. – Ud. de este tipo páginas, el ancho de sus elementos no está especificado y cambian libremente sus tamaños, extendiéndose por toda la pantalla o sección principal y ocupando todo espacio libre. Este enfoque es más apropiado si el objetivo principal de la página es mostrar texto. En otros casos, el uso de estos métodos puede convertirte en Don Quijote, luchando inútilmente con un molino de viento, que en tu caso será el navegador.

"Páginas elásticas". Estas páginas combinan ambos enfoques. Los elementos de dichas páginas tienen un ancho fijo, pero pueden ampliarse o reducirse según el ancho de la ventana del navegador en rangos predefinidos. Para tales propósitos, puede usar las propiedades min-height, min-width, max-height y max-width que mencioné en la primera parte.

Para lograr mejores resultados, a menudo tiene sentido combinar los tres enfoques del diseño de la página: por ejemplo, hacer que todas las secciones auxiliares y de navegación, en las que la distribución incontrolada de elementos es inaceptable, tengan un ancho fijo, y hacer que el panel central sea "elástico" o incluso permitirle Ocupa todo el espacio restante después de las secciones fijas en la ventana del navegador.

Métodos de diseño de página

CSS le permite implementar de manera efectiva el marcado usando varias técnicas y tecnología. Las técnicas más comunes incluyen capas flotantes (en fuentes en inglés, esta técnica puede denominarse diseño flotante) y posicionamiento absoluto(posicionamiento absoluto). Además, subjetivamente, el marcado de la gran mayoría de sitios utiliza capas flotantes. A continuación intentaré considerar cada una de estas técnicas con más detalle.

Capas flotantes

Capas flotantes se implementan manipulando la propiedad flotante de los elementos de la página. Usando esta propiedad, las capas, párrafos y otros elementos se pueden colocar a la izquierda o a la derecha. lado derecho página o contenedor externo. Para hacer esto necesitas configurar propiedad flotante con el valor correspondiente: float: left, right, none; . El resto del contenido de la página "rodeará" este elemento presionado hacia un lado. Muy punto importante, lo cual hay que tener en cuenta que el contenido rodeará el elemento flotante solo cuando esté definido debajo de esta etiqueta en el código de la página y su ancho no sea mayor que el ancho restante de la página o contenedor exterior. Por lo tanto en en este caso Es muy importante determinar la secuencia de descripción de los elementos de la página en el archivo HTML.

A veces hay situaciones en las que es necesario asegurarse de que algún contenido no rodee un elemento flotante, sino que se dibuje debajo de este elemento. Un ejemplo de tal situación sería el panel de pie de página, que, pase lo que pase, siempre debe estar en la parte inferior de la página. Aquí la propiedad clear puede venir al rescate y toma los siguientes valores: clear: left; bien; ambos; ninguno . Esta propiedad obliga a que el contenido se dibuje debajo del elemento flotante. Además, utilizando los valores de esta propiedad, puede especificar a qué elementos flotantes se aplica esto: alineados a la izquierda, alineados a la derecha, ambos o ninguno. Entonces, si tiene un elemento con float:left , para mostrar el resto del contenido a continuación y no permitir que rodee el elemento dado, también debe usar clear:left .

Sin embargo, la funcionalidad descrita ciertamente no es suficiente para implementar de manera efectiva el marcado de páginas. Ahora es el momento de descubrir las técnicas para obtener más sintonia FINA marcas. En el caso de capas flotantes, la posición horizontal del elemento de la página generalmente se establece con usando CSS propiedades de margen, que, como ya sabemos, se utiliza para establecer la distancia desde el borde de un elemento a otro elemento. A primera vista, esto puede parecer algo extraño y poco práctico. Sin embargo, esto es sólo a primera vista. Característica única de esta propiedad es que se puede configurar valores negativos, desplazando así el elemento hacia la izquierda con respecto a él posición inicial. Bueno, en consecuencia, un valor positivo desplaza el elemento hacia la derecha (de hecho, por supuesto, el elemento permanece en su lugar, simplemente agregando la propiedad de margen para el elemento lo desplaza visualmente hacia atrás). valor dado).

Por lo tanto, puede establecer un ancho y alto fijos para elementos con usando ancho y altura respectivamente, especifique los valores flotantes y de margen requeridos y disfrute del resultado. Próximos pasos limitado sólo por tu imaginación e ingenio. Como ejemplo, quiero mostrar cómo se puede marcar una página. A continuación se muestra un ejemplo de una página dividida en secciones y el código para el archivo CSS y la página HTML.

ver imagen
índice.html	principal.css
Página principal	/*borrar valores predefinidos del navegador*/ relleno: 0; margen: 0; tamaño de fuente: 100%; peso de fuente: normal; } HTML { antecedentes: #C2C2C2; } /*definiendo margen izquierdo: auto; y margen derecho: automático; Colocamos el contenido del cuerpo en el centro de la pantalla*/ cuerpo { ancho: 1000px; altura: 1000px; margen izquierdo: automático; margen derecho: automático; antecedentes: #FFF; } #menú superior { claro: correcto; } #acceso { alineación de texto: centro; ancho: 300px; fondo: #F2F2F2; flotar: derecha; margen: 2px; relleno: 5px; borde: 1px sólido #FD8000; borde izquierdo: 5px sólido #FD8000; } .panel principal { fondo: #F2F2F2; borde: 1px sólido #FD8000; margen: 1px; relleno: 0px; } #principal { ancho: 518px; altura: 605 px; margen izquierdo: 205px; } #barra lateral superior { ancho: 200px; altura: 186px; flotador: izquierda; relleno: -5px; } #barra lateral inferior { ancho: 200px; altura: 396px; claro: izquierda; flotador: izquierda; } #barra lateral superior { ancho: 270px; altura: 605 px; flotar: derecha; margen derecho: 2px; } #pie de página { ancho: 1000px; altura: 30 píxeles; antecedentes: #FD8000; claro: ambos; }

posicionamiento absoluto

posicionamiento absoluto, como ya dije, no se usa con tanta frecuencia como las capas flotantes, pero también merece atención. A veces sucede que la recepción de capas flotantes por alguna razón resulta inaceptable y, por lo tanto, lo único que nos queda en tal situación es el posicionamiento absoluto. Sin embargo, la mayoría de las veces el posicionamiento absoluto se utiliza para el posicionamiento local, especificando la ubicación de un elemento en relación con la posición de otro. De una forma u otra, definitivamente necesitas conocer esta técnica.

en el nucleo esta técnica radica en el uso de la propiedad de posición, que puede tomar los siguientes valores: posición: absoluta, relativa, fija, estática. El valor absoluto especifica la posición del elemento en las coordenadas de la pantalla, o elemento padre, como se mostrará a continuación. relativo: define la posición relativa a la ubicación predeterminada. Especificar un desplazamiento usando este valor deja un "agujero" en la página, por lo que, como regla general, no vale la pena usarlo de esta manera, en la medida de lo posible, un poco más tarde. fijo – Indica la posición en la pantalla, independientemente del desplazamiento, es decir, por mucho que desplaces la barra de desplazamiento, el elemento seguirá en su posición. El valor estático es el posicionamiento normal; si no se especifica un tipo de posicionamiento para un elemento, este valor se aplica de forma predeterminada.

Una vez configurado propiedad de posición Para un elemento, tiene sentido especificar propiedades que definan las coordenadas del elemento: arriba, abajo, izquierda y derecha. Entonces, indicando para cualquier elemento de posición: absoluto, puede establecer su posición utilizando las propiedades anteriores en relación con uno u otro borde de la ventana del navegador. Sin embargo, si hablamos de cualquier elemento que, por ejemplo, se encuentre dentro de una capa, entonces el posicionamiento absoluto de dicho elemento se lleva a cabo en relación con los límites de esta misma capa.

Para aclarar esto, veamos un ejemplo sencillo. Digamos que tenemos un título y dentro del título hay una imagen. Entonces su posición relativa a este mismo encabezado se puede establecer así:

h1 ( posición: relativa; )

imagen h1 (

posición: absoluta;

arriba: 0;

derecha: 0;

}

Es decir, utilizando la posición: relativa; propiedad para el título. , parece que estamos diciendo realizar un posicionamiento “relativo a mí”, pero la propiedad posición: absoluta;

realiza el posicionamiento relativo a los límites del elemento padre. Al igual que con la técnica anterior, proporcionaré un ejemplo para dejar claro qué se debe utilizar y cómo.

ver imagen
índice.html	principal.css
Página principal bandera principal izquierda bien pie de página	html, cuerpo, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, código, dirección, variable, formulario, conjunto de campos, cita en bloque ( relleno: 0; margen: 0; tamaño de fuente: 100%; peso de fuente: normal; } HTML { fondo: #c2c2c2; } cuerpo { ancho: 1000px; altura: 1000px; margen izquierdo: automático; margen derecho: automático; antecedentes: #FFF; } /*paneles comunes de los sitios*/ .panel principal { fondo: #F2F2F2; borde: 1px sólido #FD8000; borde superior: 20px sólido #FD8000; margen: 1px; relleno: 1px; } panel principal h1 { margen superior: -20px; color: #FFF; peso de fuente: negrita; transformación de texto: capitalizar; } #contenido { posición: relativa; } #principal { posición: absoluta; izquierda: 205px; ancho: 584px; altura: 300 píxeles; } #izquierda { posición: absoluta; izquierda: 0px; ancho: 200px; altura: 300 píxeles; } #bien { posición: absoluta; derecha: 0px; ancho: 200px; altura: 300 píxeles; } #pie de página { posición: absoluta; arriba: 330px; izquierda: 0px; derecha: 0px; }

Entonces, ¿qué sigue?

Probablemente eso sea todo lo que hay que hacer con las marcas. Otros matices usando CSS para una tarea determinada ya será específica de su proyecto, navegador y requisitos. Por supuesto, ni siquiera ahora he hablado de muchas cosas. No te advertí sobre los detalles del marcado de páginas para IE 6.0 (oh, sí, debería escribir un libro aparte sobre esto). Hay muchas cosas ahí, incluso por lo que hablé, que no funcionarán o no funcionarán como te gustaría. Y para que funcione, necesitas usar hechizos mágicos como *html o zoom:1; No dijo nada sobre cómo lidiar con los problemas que surgen durante el marcado, cuando los paneles se arrastran inexplicablemente dónde y por qué (y créanme, esto sucederá, y más de una vez, y no solo a usted). No dije nada sobre propiedad del índice z , esto es muy importante, especialmente en el caso de posicionamiento absoluto, cuando el contenido de un elemento se superpone al contenido de otro. No te hablé de algo tan maravilloso. propiedad de desbordamiento

, lo que ayuda a lidiar con el contenido de los paneles, que no se quedan dentro y solo quieren saltar fuera de los límites de su capa. Y muchas, muchas, muchas cosas más sobre las que guardé silencio. No porque sea estúpido, sólo un poco vago.

Ahora es el momento de pasar a trabajar con texto en HTML. Un texto elegante y de alta calidad siempre tiene un efecto positivo en el tráfico del sitio web. etiquetas HTML

para texto le permite no solo decorar artículos, sino también dividirlos en párrafos, crear listas, resaltar fragmentos necesarios, agregar títulos y administrar tamaños, colores y fuentes de texto, lo que ayuda a mejorar la presentación de la información. Imagina una página web que parece 100% la página de un libro, ¿te quedarás en dicha página? Gran cantidad

Los usuarios cerrarán inmediatamente dicha página porque es demasiado gris, monótona y no despierta ningún interés. Por lo tanto, no debes descuidar las etiquetas de formato de texto en HTML.

Encabezados en HTML Trabajar con texto en HTML es imposible sin títulos; además, los títulos tienen mucho peso a la vista; robots de búsqueda

• , por lo que es mejor indicar frases clave de búsqueda en los títulos.

- - estas son etiquetas emparejadas que encierran encabezados. El número de esta etiqueta establece el nivel de importancia del título. El título principal del artículo se incluye en las etiquetas..., los subtítulos del segundo nivel se incluyen en las etiquetas..., etc.

• En la práctica, los niveles de subtítulos más populares son del 1º al 3º, el resto prácticamente nunca se encuentra. A continuación se muestran las etiquetas de encabezado, clasificadas según su importancia:
• ... - Título principal;
• ... - subtítulo;
• ... - subtítulo de cuarto nivel;
• ... - subtítulo de quinto nivel;
• ... es un subtítulo de sexto nivel.

Puede aplicar el parámetro align a estas etiquetas, que es responsable de alineación horizontal encabezados. Este parámetro puede tener los siguientes valores:

• izquierda: valor de alineación izquierda para el título (valor predeterminado);
• derecha: el valor de la alineación del título hacia el lado derecho;
• centro: el valor de la alineación del título con el centro;
• justificar: el valor de alineación del ancho del título.

Los valores de los parámetros se especifican utilizando el símbolo = y los valores mismos deben estar entre comillas "". Por ejemplo, creemos una página con encabezados. diferentes niveles, también estableceremos diferentes parámetros de alineación horizontal para los encabezados.

Apertura esta pagina en el navegador, debería obtener el siguiente resultado:

Tenga en cuenta que todos los títulos están resaltados. en negrita sin etiquetas html adicionales para texto. Con CSS, los encabezados se pueden configurar en cualquier tamaño y estilo, independientemente de su nivel.

Párrafos y separación de palabras nueva linea

Dar formato al texto en HTML es imposible sin utilizar párrafos y dividir el texto en una nueva línea. Además, es más fácil diseñar los párrafos agregando estilos a la etiqueta adecuada.

• Esta etiqueta emparejada debe rodear todos los párrafos de la página. De forma predeterminada, la etiqueta deja una línea en blanco en la parte superior y otra en la parte inferior del párrafo. Como en el caso de los títulos, la etiqueta responsable de los párrafos tiene un parámetro de alineación, con todos sus valores. Por ejemplo, creemos tres párrafos con diferentes parámetros:

• 
  - Este etiqueta única, que es capaz de empaquetar el contenido de cualquier página en una nueva línea. La mayoría de las veces se usa para texto, si comparas la etiqueta con programa de palabras, entonces es él quien imita presionando Enter. (Número de etiquetas
  = número de pulsaciones en “enter”). Echemos un vistazo esta etiqueta En realidad:

Como puede ver, después de especificar la etiqueta
, el contenido posterior (ya sea texto, imagen, vídeo, etc.) se transfiere automáticamente a una nueva línea. Si especifica 2 etiquetas seguidas, la transferencia será doble.

tipo de texto

Ahora pasemos a las etiquetas que afectan directamente apariencia texto. Trabajar con texto en HTML implica: cambiar la fuente, el color, el tamaño, subrayar, tachar y otras formas de cambiar la apariencia del texto.

• o - estas etiquetas deben contener texto en negrita. Por regla general, texto en negrita usado para resaltar frases clave y fragmentos importantes de texto;
• o - estas etiquetas dan al texto una apariencia de cursiva y funcionan según el mismo principio que las etiquetas anteriores. Menos cursiva fragmentos importantes texto, también se utiliza para realzar el estilo del texto.
• o - estas etiquetas se utilizan para subrayar determinadas palabras o frases del texto. No recomendamos utilizar guiones bajos en texto plano, porque según conceptos generalmente aceptados, sólo los enlaces están subrayados. Aunque nadie prohibió hacer esto.

Usemos las etiquetas HTML anteriores para texto como ejemplo:

• - dado en sí mismo etiqueta emparejada no hace nada, sin embargo, si le das parámetros con valores, puede ser muy útil. Echemos un vistazo más de cerca a los parámetros de esta etiqueta:

• cara: asigna una fuente de texto. Los más populares: times new roman, arial, calibri. Puede especificar varias fuentes separadas por comas, en caso de que la primera no sea compatible con el navegador, se utilizará la siguiente en la lista;
• tamaño: este parámetro establece el tamaño del texto. Hay tamaños del 1 al 7, el valor predeterminado es 3;
• color - gracias este parámetro establece el color del texto. El valor predeterminado es negro, es decir, color negro. El color se puede configurar de tres maneras: Tabla de códigos de colores.

vamos a arreglarlo conocimiento HTML etiquetas para texto y trabaje en las habilidades usando el siguiente ejemplo:

Etiquetas HTML heredadas para texto

Hay algunas etiquetas heredadas que los programadores web rara vez utilizan, pero es posible que aún las necesites. Hace unos 5 años hubo un rumor de que los navegadores dejarían de admitirlos, pero todavía funcionan muy bien.

• - un contenedor (etiqueta emparejada) que muestra su contenido en el centro de la página. A veces ayuda mucho.
• - la etiqueta se utiliza para tachar texto. Muy específico y no etiqueta popular, sin embargo, aún hoy se puede utilizar.
• - etiqueta responsable de "cotizaciones". Algunas personas piensan que es mejor usar esta etiqueta que las comillas del teclado. Se utiliza para resaltar títulos y citas.
• - citas largas, bloques importantes y se recomienda que las oraciones significativas estén rodeadas por esta etiqueta emparejada. El contenido de la etiqueta tiene una ligera sangría en los lados derecho e izquierdo.
• - quieres darle a tu texto una fuente antigua máquina de escribir, entonces esta etiqueta te ayudará. Vista más cercana: fuente de máquina de escribir

Ahora puedes crear páginas HTML con contenido de texto elegante. Pero recuerda, todo es bueno con moderación. El texto seco y aburrido es indudablemente malo, pero si tu texto brilla con todos los colores del arco iris, corres el riesgo de parecer una organización poco seria. En general, todo depende del tema del sitio y de su público objetivo.

Fecha de primera publicación: 06/07/2016
Fecha última actualización: 06.07.2016

Buen día, fieles lectores y suscriptores. La publicación actual está dedicada a análisis detallado Temas: "Bloquear el marcado de página CSS responsivo". En este artículo te contaré qué significa el diseño de bloques, cuáles son sus ventajas y qué herramientas se utilizan para ello.

Además, compartiré conocimientos sobre varios enfoques simples. implementación de adaptabilidad y haré una copia de seguridad de todas las descripciones. ejemplos concretos. Bueno, ¡comencemos a aprender!

Pan de jengibre y palitos

El diseño en bloque de páginas web es un método de diseño de páginas. bloques(capas), que se crean usando una etiqueta especial< div> .

Inicialmente, los desarrolladores utilizaron un diseño tabular, pero pasó a un segundo plano después de la aparición del tipo descrito. ¿Por qué sucedió esto? Y todo porque marcar páginas en capas tiene una lista bastante grande de ventajas y solo un par de desventajas. Echemos un vistazo más de cerca a cada uno de ellos.

Delicioso pan de jengibre

Reducir el volumen de código. Al utilizar tablas como diseño estructurado para el contenido y los controles del sitio, documento html Había muchas etiquetas anidadas en las que incluso los desarrolladores experimentados se confundían.

El uso de bloques elimina este problema. El código contiene una pequeña cantidad de divs, cada uno de los cuales tiene reglas de estilo establecidas a través de una clase prescrita. Por ejemplo:

…

…

…

control flexible objetos. Debido a que cada capa es responsable clase especifica, fue posible redefinir rápidamente y sin dañar otros bloques la apariencia del seleccionado, moverlo por la página web o cambiar la apariencia de la presentación. Además, el diseño de bloques le permite resolver problemas complejos con colocación de capas no estándar.

Una ventaja significativa paraSEO. EN vistas de tabla todo el contenido del servicio web se distribuyó entre celdas, lo que complicó enormemente el trabajo de los robots de búsqueda. usando lo mismo diseño de bloque este problema Yo también lo decidí.

Todo el contenido del sitio se divide en bloques según su significado, que se firman mediante clases. Es por eso programas de búsqueda fácil de encontrar información necesaria y realizar la indexación. Esto significa que el sitio llega a la cima cuando muestra resultados en consultas de búsqueda.

capacidad de crear diseño responsivo páginas web. Para aquellos que aún no saben qué es el diseño responsivo, les aconsejo que lean el artículo correspondiente. artículos en mi blog sobre esta tecnología. Por ahora, solo diré que la adaptabilidad permite que los servicios se vean iguales y atractivos en pantallas con cualquier resolución, ya sea una computadora de escritorio o un teléfono inteligente.

Fue gracias al diseño en capas que esta oportunidad estuvo disponible. Por supuesto que requiere conocimientos adicionales, pero merece la pena.

Tropiezos

La aparición de dificultades durante el desarrollo. En comparación con diseño tabular, entonces ciertamente es más sencillo. Basta con conocer algunas etiquetas básicas con las que se crean las tablas y simplemente llenar con información las celdas creadas.

EN marcado de bloque Todo puede parecer un poco más complicado. Especialmente para un principiante. Porque es necesario conocer bien no solo el código html, sino también conocer la mayoría de las propiedades de CSS. Sin embargo, las dificultades surgirán sólo al principio al estudiar tecnología, pero después la vida le parecerá un cuento de hadas.

Desmontaje con compatibilidad entre navegadores. Porque este enfoque apareció algo más tarde que el tabular; no todas las situaciones con su funcionamiento están estandarizadas. Y es por eso que a veces diferentes navegadores La visualización de su sitio puede verse ligeramente diferente. Para corregir las deficiencias, en algunos casos habrá que ser creativo.

Técnicas simples para crear adaptabilidad.

Bueno, pasemos ahora directamente al análisis de varios mecanismos simples para crear adaptabilidad de sitios web. Para hacer esto, crearemos un diseño de página simple.

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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

Cuerpo de ejemplo de Bootstrap (relleno:0; margen:0; fondo: url("http://www.bankoboev.ru/fons/ODQ1MA==/Bankoboev.Ru_avtomobili_na_nochnyh_dorogah.jpg"); tamaño de fuente: 19px; color: # fff; alineación de texto: centro; ) .header( fondo: rgba(80, 80, 80, .8); relleno: 24px; borde inferior: 3px sólido #B5B5B5; ) .menu( fondo: rgba(80, 80 , 80, .5); float: tamaño de fuente: 16px; alineación de texto: izquierda; altura: 331px; li (tipo de estilo de lista: ninguno;) contenedor (decoración de texto: subrayado; relleno: 29px; fondo: rgba(0, 1, 0, .4); img( alto: 220px; ancho: 350px; contorno: 6px sólido #CFCFCF; ) .photo( pantalla: bloque en línea; ) .footer( fondo: rgba(0, 1, 0, .8); relleno: 11px;) Sitio web de SuperAuto Galería de fotos Video Contactos tesla ¡Reservados todos los derechos!

Cuerpo de ejemplo de Bootstrap (relleno:0; margen:0; fondo: url("http://www.bankoboev.ru/fons/ODQ1MA==/Bankoboev.Ru_avtomobili_na_nochnyh_dorogah.jpg"); tamaño de fuente: 19px; color: # fff; alineación de texto: centro; ) .header( fondo: rgba(80, 80, 80, .8); relleno: 24px; borde inferior: 3px sólido #B5B5B5; ) .menu( fondo: rgba(80, 80 , 80, .5); float: tamaño de fuente: 16px; alineación de texto: izquierda; altura: 331px; li (tipo de estilo de lista: ninguno;) contenedor (decoración de texto: subrayado; relleno: 29px; fondo: rgba(0, 1, 0, .4); img( alto: 220px; ancho: 350px; contorno: 6px sólido #CFCFCF; ) .photo( pantalla: bloque en línea; ) .footer( fondo: rgba(0, 1, 0, .8); relleno: 11px;) Sitio web de SuperAuto

Aquí encontrarás imágenes y videos relacionados con temas automotrices.

Galería de fotos

Video

Contactos

tesla ¡Reservados todos los derechos!

Como puede ver, la apariencia del recurso de Internet creado se muestra correctamente hasta que el tamaño de la pantalla se vuelve demasiado pequeño. Por lo tanto, agreguemos propiedades css algunos parámetros.

Empecemos con bloques con clases. encabezado, . contenedor y . pie de página agregue la propiedad min-width: 355px. Ahora su página de contenido solo se reducirá a tamaño especificado y luego aparecerá un pergamino.

EN en este ejemplo No necesitaba implementar adaptabilidad para fotos. Sin embargo, se puede lograr el ajuste automático del tamaño de la imagen escribiendo las siguientes líneas en los estilos.