D5 by @giorgio-g97 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

methodDetermina il metodo di invio dei dati di un form al server
idIdentifica univocamente un elemento HTML
<hr>Inserisce una linea orizzontale
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
typeSpecifica la tipologia/funzione di un elemento.
<object>Incorpora risorse varie nella pagina web.

Users

Log in to search for users

Explore

Find inspiration

black - social bar

Lista con ricerca

Italiano-Cinema [Container]

Esercitazione 1

TABELLA RIEPILOGATIVA

Il mio primo sito(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        margin-left: 4rem;
        margin-top: 4rem;
      }
      .container div {
        width: 70px;
        height: 60px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
      <div>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
      </div>
    </div>
  </body>
</html>

body {
  background-color: #e8e1d7;
}

.container div {
  display: inline-block;
  position: relative;
  /* Es. 10.b */
  font-size: 1rem;
}

.container div span:first-of-type {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
}

/* Es. 7 */

.container div span:nth-of-type(2) {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translate(-50%, 0%);
}

/* Es. 8 */

.container div:last-child span:last-of-type {
  position: absolute;
  top: 50%;
  left: 110%;
  transform: translate(0%, -60%);
}

/* Es. 9 */

.container div:first-child span:last-of-type {
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translate(0%, -50%);
}

/* Es. 10 */

.container {
  font-size: 0;
}

.container div:nth-child(2n) {
  border: 1px solid red;
}

.container div:nth-child(2n+1) span:nth-child(2n){
  color: green;
}

.container div:nth-child(2) span:last-of-type {
  color: blue;
}

.container div:nth-child(6) span:not(:last-of-type) {
  color: yellow;
}