UNIFI | Utility editor

Utility per testing editor e stili pagine.

L'editor presenta una raccolta completa degli stili disponibili e delle loro combiinazioni. È possibile usare l'editor per provare gli stili e le funzionalità. Il risultato apparirà in tempo reale nel rettangolo in basso con il bordo rosso. Per maggiori informazioni cliccare qui .

<h2>Questo è un h2.</h2>
    <h3>Questo è un h3.</h3>
    <h4>Questo è un h4.</h4>
    <p>Questo è un paragrafo.</p>

<p>Questo è un paragrafo un po’ lungo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius varius elit, ut lobortis velit cursus ut. Praesent quis libero dictum, <a href="https://www.unifi.it/" target="_blank" rel="noopener">questo è un link </a>tristique ipsum ut, lobortis mi. Suspendisse a mollis quam. Aenean eu erat vitae massa porttitor posuere. Suspendisse non tempus tortor. Interdum et malesuada fames ac ante ipsum primis <a href="https://www.google.com/" target="_blank" rel="noopener">questo è un link con icona </a>. Mauris lacinia libero in nibh gravida, vitae euismod ligula vulputate.</p>
    <p>E questo è un altro. Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo.</p>

<blockquote>Questo è un blockquote. Aenean eu erat vitae massa porttitor posuere. Suspendisse non tempus tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris lacinia libero in nibh gravida, vitae euismod ligula vulputate.</blockquote>

<hr>

<p><a href="https://www.unifi.it/" target="_blank" rel="noopener">Link normali</a></p>
    <p><a href="https://www.google.com/" target="_blank" rel="noopener">Link esterni</a></p>
    <p><a href="https://www.unifi.it/file.pdf" target="_blank" rel="noopener">Link esterni</a></p>
    <p><a href="https://www.google.com/file.pdf" target="_blank" rel="noopener">Link a file</a></p>

<p><a class="hilite" href="https://www.unifi.it/" target="_blank" rel="noopener">Link in evidenza</a></p>

<hr>

<h3>Vari tipi di tabelle.</h3>

<table>
    <thead>
    <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>una</td>
    <td>tabella</td>
    <td>stretta</td>
    </tr>
    </tbody>
    </table>

<table>
    <thead>
    <tr>
    <td>colonna uno</td>
    <td>colonna due</td>
    <td>colonna tre</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>una</td>
    <td>tabella</td>
    <td>normale</td>
    </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    <td>Phasellus interdum ante vel ligula molestie faucibus.</td>
    <td>Quisque eros libero, faucibus nec metus sit amet, ultricies finibus nibh. Donec ut odio nec turpis congue viverra nec sed eros. Etiam a ligula augue.</td>
    </tr>
    </tbody>
    </table>

<table>
    <thead>
    <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
    <td>col4</td>
    <td>col5</td>
    <td>col6</td>
    <td>col7</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>unaTabellaMoltoLarga</td>
    <td>unaTabellaMoltoLarga</td>
    <td>unaTabellaMoltoLarga</td>
    <td>unaTabellaMoltoLarga</td>
    <td>unaTabellaMoltoLarga</td>
    <td>unaTabellaMoltoLarga</td>
    <td>unaTabellaMoltoLarga</td>
    </tr>
    </tbody>
    </table>

<table>
    <thead>
    <tr>
    <td>colonna uno</td>
    <td>colonna due</td>
    <td>colonna tre</td>
    <td>colonna quattro</td>
    <td>colonna cinque</td>
    <td>colonna sei</td>
    <td>colonna sette</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>un'altra</td>
    <td>tabella</td>
    <td>molto</td>
    <td>molto</td>
    <td>molto</td>
    <td>molto</td>
    <td>larga</td>
    </tr>
    </tbody>
    </table>

<hr>

<h2>Immagini</h2>

<h3>Esempi di gatti</h3>

<p><img src="http://placekitten.com/g/500/300" alt="gatto"></p>
    <p>Questo era un gatto a tutta larghezza. E questo è un paragrafo. Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo.</p>

<figure class="with-caption"><img src="http://placekitten.com/g/500/250" alt="gatto">
    <figcaption>Questo è un gatto grande con didascalia.</figcaption>
    </figure>

<hr>

<h2>Miniature</h2>

<figure class="miniature-container"><img src="https://i.pravatar.cc/300?img=1">
    <figcaption><strong><u>Titolo</u></strong><br>Descrizione</figcaption>
    </figure>

<figure class="miniature-container"><img src="https://i.pravatar.cc/300?img=5">
    <figcaption><strong><u>Titolo</u></strong><br>Descrizione</figcaption>
    </figure>

<figure class="miniature-container"><img src="https://i.pravatar.cc/300?img=7">
    <figcaption><strong><u>Titolo</u></strong><br>Descrizione</figcaption>
    </figure>

<hr>
    <h3>Media embed</h3>
    <div class="iframe-container"><iframe src="https://www.youtube.com/embed/yKenAJfr818" allowfullscreen="allowfullscreen"></iframe></div>

<hr>

<h3>Elenchi ordinati:</h3>
    <ol>
    <li>primo</li>
    <li>secondo</li>
    <li>terzo</li>
    </ol>
    <ol style="list-style-type: lower-alpha;">
    <li>primo</li>
    <li>secondo</li>
    <li>terzo</li>
    </ol>
    <ol style="list-style-type: upper-alpha;">
    <li>primo</li>
    <li>secondo</li>
    <li>terzo</li>
    </ol>
    <h3>Elenchi disordinati:</h3>
    <ul>
    <li>pippo</li>
    <li>pluto</li>
    <li>topolino</li>
    </ul>
    <ul style="list-style-type: circle;">
    <li>pippo</li>
    <li>pluto</li>
    <li>topolino</li>
    </ul>
    <ul style="list-style-type: square;">
    <li>pippo</li>
    <li>pluto</li>
    <li>topolino</li>
    </ul>

<hr>

<h2>Questo è un h2 seguito da un p.</h2>
    <p>Questo è un paragrafo un po' lungo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius varius elit, ut lobortis velit cursus ut. Praesent quis libero dictum, tristique ipsum ut, lobortis mi. Suspendisse a mollis quam. Aenean eu erat vitae massa porttitor posuere. Suspendisse non tempus tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris lacinia libero in nibh gravida, vitae euismod ligula vulputate.</p>
    <h3>Questo è un h3 seguito da un p.</h3>
    <p>E questo è un altro. Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo.</p>

<h4>Questo è un h4 seguito da un p.</h4>
    <p>Questo è un paragrafo un po' lungo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius varius elit, ut lobortis velit cursus ut. Praesent quis libero dictum, tristique ipsum ut, lobortis mi. Suspendisse a mollis quam. Aenean eu erat vitae massa porttitor posuere. Suspendisse non tempus tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris lacinia libero in nibh gravida, vitae euismod ligula vulputate.</p>
    <h4>E un altro.</h4>
    <p>E questo è un altro. Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Questo è evidenziato blu. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo.</p>

<h2>Questo è un h2 seguito da un h3 .</h2>
    <h3>Questo è un h3 seguito da un p.</h3>
    <p>E questo è un altro. Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo.</p>

<h3>Questo è un h3 seguito da un h4.</h3>
    <h4>Questo è un h4 seguito da un p.</h4>
    <p>E questo è un parafo. Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo.</p>

<hr>

<section class="fisarmonica">
        <h3> Questa è una fisarmonica</h3>
        <div>
        <p> Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Questo è evidenziato blu. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo. </p>
      </div>
    </section>

<section class="fisarmonica open">
        <h3> Questa è una fisarmonica aperta</h3>
        <div>
        <p> Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Questo è evidenziato blu. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo. </p>
      </div>
    </section>

<section class="timeline open">
      <section class="fisarmonica open">
        <h3> Questa è una timeline</h3>
        <div>
        <p> Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Questo è evidenziato blu. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo. </p>
      </div>
    </section>
    <section class="fisarmonica">
      <h3> Questa è una timeline</h3>
      <div>
      <p> Maecenas vitae felis elit. Vestibulum arcu orci, posuere non sodales sit amet, tincidunt quis ipsum. In nec elit leo. Questo è evidenziato blu. Curabitur eget leo ipsum. Pellentesque pretium nunc quis sapien volutpat pellentesque. Donec a nibh sapien. Fusce eget laoreet ligula, ut pulvinar leo. </p>
    </div>
  </section>
  </section>

Informazioni sugli stili:

Modifica diretta dell’HTML