<!DOCTYPE html><html><head><title>Título de la página</title><!-- METATAGS, archivos externos, etc. --></head><body>Contenido de la página</body></html>
Para implementar un diseño responsivo debemos agregar un archivo CSS, que llamaremos estructura.css, se ubicará dentro de una carpeta css y su código es:
* {box-sizing: border-box;}body {margin: 0;padding: 0;width: 100%;}.fila {margin: 0 auto;}.fila::after {content: "";clear: both;display: table;}[class*="col-"] {width: 100%;float: left;}html {font-size: 16px;}.fila {width: 80%;}[class*="col-"] {padding: 1rem;}.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}
El archivo para probar si nuestra página funciona sería el archivo index.html:
<!DOCTYPE html><html><head><title>Inlearning Code - Responsive</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Archivo CSS --><link href="css/estructura.css" rel="stylesheet" type="text/css" /></head><body><header class="fila"><div class="col-10" style="background-color: #b4e3cc;">COL 10</div><div class="col-2" style="background-color: #ff5733;">COL 2</div></header><div class="fila"><div class="col-4" style="background-color: #decd3e;">COL 4</div><div class="col-4" style="background-color: #a4e57c;">COL 4</div><div class="col-4" style="background-color: #dfc80c;">COL 4</div></div><footer class="fila"><div class="col-12" style="background-color: #ffa200;">COL 12</div></footer></body></html>
El resultado sería:
No hay comentarios:
Publicar un comentario