Come sbarazzarsi dei bordi dell'immagine sul link in CSS

April 15

Quando si sposta la mano su un collegamento Web, il cursore cambia forma. I browser applicare effetti visivi speciali per i collegamenti che aiutano gli utenti a riconoscere rapidamente. collegamenti di testo, per esempio, possono apparire sottolineata se gli sviluppatori del sito non ignorare questo comportamento predefinito utilizzando i CSS. i collegamenti di immagine - consistenti in immagini - hanno bordi intorno a loro. Gli utenti sanno che possono fare clic sulle immagini a causa dei confini. Se si desidera rimuovere questi confini, aggiungere un semplice "noBorder" classe CSS al documento HTML.

istruzione

1 Avviare qualsiasi editor HTML o Notepad. Aprire uno dei documenti HTML.

2 Copiare il codice seguente e incollarlo in sezione body del documento:

<a href="http://www.whitehouse.gov">

<Img class = "noBorder" alt = "test" />

</a>

Questo codice crea un tag di ancoraggio. Il tag img all'interno dei punti di ancoraggio in un file denominato "myImage.gif." Sostituire quel nome con l'URL di un'immagine sul Web o il nome di un'immagine sul disco rigido. Si noti che il tag img fa riferimento a una classe CSS chiamato "noBorder." Punti di proprietà href del tag di ancoraggio al sito web della Casa Bianca.

3 Aggiungere il seguente codice CSS alla sezione stile del documento:

.noBorder {border: 0px}

Questa classe imposta la larghezza del bordo di qualsiasi elemento che fa riferimento alla classe di zero pixel.

4 Salvare il documento. Avviare il browser e aprire il documento. Non appare alcuna bordo intorno all'immagine. Clicca sull'immagine per visitare il sito web della Casa Bianca.