El "diseño fijo"También se conoce como un diseño estático y se mide en"píxeles". Este tipo de diseño hace que el ancho del elemento se fije. Además, el diseño fijo se programa de una manera que no importa el tamaño o la resolución de la pantalla, el ancho del elemento no cambiará. Es beneficioso para los usuarios que desean presentar imágenes corporativas consistentes a todos los visitantes.

Este blog demostrará el procedimiento de crear un diseño de ancho fijo con CSS.

Cómo crear un diseño de ancho fijo usando CSS?

Con el fin de crear un diseño de ancho fijo, en primer lugar, dentro del elemento del cuerpo del HTML, agregue un elemento DIV con un nombre de clase "ancho fijo". Luego añade

y

elementos para agregar algo de contenido.

Html

Bienvenido a Linuxhint

Linuxhint es el mejor sitio web de tutorial en línea. Si quieres aprender programación bash, estás en el lugar correcto.

La estructura de marcado se ha completado y se puede ver en la imagen dada a continuación:

Ahora, aplicemos propiedades de estilo CSS a los elementos HTML anteriores.

Estilo todos los elementos

*
margen: 0px;
relleno: 0px;

Como sabemos, los diseños de ancho fijo usan el ancho de píxeles exacto, por lo que la propiedad de ancho se establecerá en "píxeles". Define que el ancho del elemento seguirá siendo el mismo que en cada tamaño de pantalla.

Estilo de ancho fijo Div

.ancho fijo
Color de fondo: RGB (238, 238, 238);
margen: auto;
Máxido: 400px;
Altura: 100 VH;

El ".ancho fijo"Se refiere a la clase Div-ancho fijo. Las siguientes propiedades se aplican al ancho fijo DIV:

• "color de fondo"Especifica el color del fondo del elemento.
• "margen"Especifica el espacio alrededor del elemento.
• "anchura máxima"Establece el ancho máximo del elemento.
• "altura"La propiedad establece la altura del elemento.

La salida del código mencionado se muestra a continuación:

Se puede observar que el ancho del ancho fijo de div es fijo. No cambia de acuerdo con los tamaños de pantalla.

Así es como se crea el diseño de ancho fijo en CSS.

Conclusión

Los diseños de ancho fijo establecen el ancho del elemento fijo. Permanecen igual en cada tamaño de pantalla. Si el ancho de la ventana del navegador es menor que el ancho del diseño, aparecerá una barra de desplazamiento horizontal, y el ancho del elemento no cambiará. Para que se fije el diseño, el ancho del elemento debe especificarse en "píxeles". Con la ayuda de un ejemplo práctico, este blog ha demostrado cómo crear un diseño de ancho fijo en CSS.