Schema della sezione

  • 23/05/2019

    • Attributi di stile

      • Posizionare un oggetto
        • in un punto preciso:
          • position: absolute; left: 100px; top: 200px;
        • spostato rispetto alla sua posizione naturale:
          • position: relative; left: 10px; top: 20px;
        • nella sua posizione naturale:
          • position: static;
        • sovrapporre oggetti:
          • z-index: 1;
        • esempi:

    • Esercizio

      Si realizzino le seguenti pagine:


    • Esercizi

       1. Si scrivano una classe con nome .sx per posizionare un blocco a sinistra in modalità float ed una classe con nome .dx per posizionare un blocco a destra in modalità float.

      Utilizzando le due classi e la faccina.png si realizzi la seguente pagina.

      2. Si scrivano due classi con nome .cornice-sx e .cornice-dx per visualizzare blocco float di larghezza 200px, con una cornice di colore rosso, la prima classe a sinistra e la seconda classe a destra.

      Utilizzando le due classi, si realizzi la seguente pagina.

      3. Si scriva una classe .inizio che realizzi un oggetto float a sinistra, con carattere di 100px e altezza della linea 80% (utilizzare l'attributo CSS line-height:80%;).

      Utilizzando questa classe ri realizzi la seguente pagina.

      4. Si scriva una classe .box per realizzare una cornice blu di larghezza 200px, e la si utilizzi per realiizare la seguente pagina.

      5. (Difficile) Si scrivano 5 classi:

      • .box: per visualizzare un box con cornice e sfondo giallo
      • .testata: per visualizzare un testo con font di altezza 130%
      • .fondo: per visualizzare un testo con font di altezza 85%
      • .sinistro: una colonna di larghezza 160px e sfondo giallo chiaro, con un bordo destro (border-right)
      • .centrale: una colonna centrale con sfondo giallo chiaro

      e le si utilizzino per realizzare la seguente pagina.