Escriu per cercar…

Layout

Un document col·loca les seves capses en files, columnes i graelles.

WebCodi
S'ensenya a
Llenguatges de marques i sistemes de gestió d’informacióDocuments estàticsASIXDAMDAWDAW-BIO

Introducció

A Box vas veure que cada element d’un document és una capsa.

A Estil vas aprendre a escriure una regla que li dona estil.

Però les capses continuen apilades una sota l’altra, cadascuna ocupant tota l’amplada.

Cap lloc web de veritat es veu així: tenen una capçalera, un menú al costat, targetes de tres en tres.

En aquesta activitat aprendràs a col·locar les capses on vols, i a fer que el document s’adapti a l’amplada de la pantalla.

Entorn de treball

Crea una carpeta amb el nom document-layout i obre-la amb VS Code.

Comença amb aquesta plantilla:

html
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <style type="text/tailwindcss">
    .grup {
      @apply border-2 border-red-500;
    }
    .caixa {
      @apply border-2 border-blue-500 bg-sky-100 p-2;
    }
  </style>
  <title>Layout</title>
</head>
<body class="p-5">
  <div class="grup">
    <div class="caixa">Dilluns</div>
    <div class="caixa">Dimarts</div>
  </div>
</body>
</html>

El <body> no porta la classe prose, com a Box: aquí les mides i els marges els poses tu.

Les dues regles del <style> són l’aspecte de les capses, i no les tornaràs a tocar en tota l’activitat.

Els has de posar un nom perquè els exemples en tenen moltes d’iguals, i repetir-los la llista de classes seria justament el que vas deixar de fer a Estil.

A l’HTML hi anirà només allò que canvia, que és el disseny.

Container

Una capsa block ocupa tota l’amplada que té disponible.

En una pantalla de 27 polzades, això vol dir línies de text de dos mil píxels que ningú no pot llegir.

html
Sense container
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <style type="text/tailwindcss">
    .caixa {
      @apply border-2 border-blue-500 bg-sky-100 p-4;
    }
    h1 {
      @apply text-2xl font-bold;
    }
  </style>
  <title>Sense container</title>
</head>
<body class="p-5">
  <div class="caixa">
    <h1>El quadern gris</h1>
    <p>COM QUE HI HA TANTA GRIP, han hagut de clausurar la Universitat. D'ençà d'aquest fet, el meu germà i jo vivim a casa, a Palafrugell, amb la família. Som dos estudiants desvagats.</p>
  </div>
</body>
</html>

La classe container limita l’amplada de la capsa.

No hi posa una amplada fixa: hi posa un màxim que salta a mesura que la finestra es fa gran, i que mai no és més gran que la finestra.

html
container
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <style type="text/tailwindcss">
    .caixa {
      @apply border-2 border-blue-500 bg-sky-100 p-4;
    }
    h1 {
      @apply text-2xl font-bold;
    }
  </style>
  <title>container</title>
</head>
<body class="p-5">
  <div class="caixa container">
    <h1>El quadern gris</h1>
    <p>COM QUE HI HA TANTA GRIP, han hagut de clausurar la Universitat. D'ençà d'aquest fet, el meu germà i jo vivim a casa, a Palafrugell, amb la família. Som dos estudiants desvagats.</p>
  </div>
</body>
</html>

Estàs llegint una vista prèvia.

Inicia sessió amb Google per llegir la pàgina completa.

Inicia sessió amb Google

Amb qualsevol compte de Google. Només et demanarem que acceptis les condicions del servei.