D5 by @giorgio-g97 - Codewith.it

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

References

getDefinisce un metodo di invio di dati al server
<textarea>Area di testo libero espandibile per form HTML
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
srcIndica la provenienza di una risorsa esterna (tramite URL).
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<p>Serve a definire paragrafi di testo

Users

Log in to search for users

Explore

Find inspiration

JEANSON ANCHETA

esercitazione n.1

Orologio Digitale

Tabella con ricerca

informatica 13/10

Autovalutazione.it

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;
}