Come creare: Galleria di portfolio

Impara come creare una griglia di portfolio responsive utilizzando CSS.

Galleria di portfolio

Impara come creare una galleria di portfolio responsive, che cambia tra 4 colonne, 2 colonne e colonna a piena larghezza in base alla larghezza dello schermo:

试一试亲自

Come creare un sito di portfolio

Passo 1 - Aggiungi HTML：

<!-- 主内容（居中网站） -->
<div class="main">
<h1>MYLOGO.COM</h1>
<hr>
<h2>PORTFOLIO</h2>
<p>Modifica la dimensione della finestra del browser per vedere l'effetto responsivo.</p>
<!-- 作品集画廊网格 -->
<div class="row">
  <div class="column">
    <div class="content">
      <img src="beijing.jpg" alt="Beijing" style="width:100%">
      <h3>Il Mio Lavoro</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="hangzhou.jpg" alt="Hangzhou" style="width:100%">
      <h3>Il Mio Lavoro</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="chongqing.jpg" alt="Chongqing" style="larghezza:100%">
      <h3>Il Mio Lavoro</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="shenzhen.jpg" alt="Shenzhen" style="larghezza:100%">
      <h3>Il Mio Lavoro</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
</div>
<div class="content">
  <img src="bear.jpg" alt="Orso" style="larghezza:100%">
  <h3>Altri Lavori</h3>
  <p>Lorem ipsum..</p>
</div>
<!-- Fine contenuto principale -->
</div>

Secondo passaggio - Aggiungi CSS:

* {
  box-sizing: bordo;
}
corpo {
  colore di sfondo: #f1f1f1;
  margine: 20px;
  famiglia di caratteri: Arial;
}
/* Centralizza il sito */
.main {
  larghezza massima: 1000px;
  margine: auto;
}
h1 {
  dimensione del carattere: 50px;
  rottura parola: spezza tutto;
}
.row {
  margine: 8px -16px;
}
/* Aggiungi margine interno tra le colonne (se necessario) */
.row {
.row > .column {
  margine: 8px;
}
/* Crea quattro colonne affiancate di uguale larghezza. */
.column {
  flottante: sinistro;
  larghezza: 25%;
}
/* Pulisci il flusso dopo la riga */
.row:after {
  contenuto: "";
  visualizzazione: tavolo;
  pulisci: entrambi;
}
/* Contenuto */
.content {
  colore di sfondo: bianco;
  margine: 10px;
}
/* Layout responsive - crea due colonne invece di quattro */
@media schermo and (larghezza massima: 900px) {
  .column {
    larghezza: 50%;
  }
}
/* Layout responsive - rende due colonne accostate, non affiancate */
@media schermo and (larghezza massima: 600px) {
  .column {
    larghezza: 100%;
  }
}

试一试亲自

Pagine correlate

Tutorial:Come creare una galleria di opere con funzione di filtraggio