Come controllare la larghezza del tag di ancoraggio

March 16

Come controllare la larghezza del tag di ancoraggio


tag di ancoraggio vengono utilizzati per creare collegamenti ad altre pagine web e documenti. Il collegamento stesso è rappresentato dal testo, immagine o altro elemento che viene utilizzato tra l'apertura e la chiusura del tag. Questa larghezza è fissa e sarà grande come dell'elemento stesso. La larghezza può essere modificata usando il "display" e "larghezza" attributi CSS (Cascading Style Sheets). Questo stile può essere assegnato al tag di ancoraggio per modificarne la larghezza.

istruzione

stile CSS

1 Creare un nuovo stile CSS sia all'interno del vostro "<style>" tag o in una pagina CSS esterno. Chiamare lo stile "linkwidth." Il codice per questo è:

<Style>

.linkwidth {

}

</ Style>

2 Assegnare l'attributo di "visualizzazione" per il nuovo stile. L'attributo "display" dovrebbe usare il valore "blocco". Il codice per questo è:

.linkwidth {

blocco di visualizzazione;

}

3 Assegnare l'attributo "larghezza" al nuovo stile. L'attributo "larghezza" deve essere impostata su una dimensione in pixel. Nell'esempio che segue, 100 pixel è la larghezza:

.linkwidth {

blocco di visualizzazione; width: 100px;

}

Anchor Tag

4 Creare un nuovo tag di ancoraggio all'interno del vostro corpo HTML. Creare un collegamento a un'altra pagina Web. Esempio di codice seguente:

<Body>

<a href="&lt;/a"> http://www.google.com "> & lt; / a>

</ Body>

5 Immettere del testo tra i tag. Questo verrà utilizzato come testo di ancoraggio. Esempio di codice seguente:

<a href="Example"> http://www.google.com "> Esempio di collegamento </a>

6 Assegnare lo stile CSS per il tag di ancoraggio utilizzando l'attributo "class". Il codice per questo è:

<a href="http://www.google.com" class="linkwidth"> Esempio link </a>

Consigli e avvertenze

  • Se si desidera che tutti i link ad adottare lo stesso stile, utilizzare la funzione "a: link" prefisso per di stile CSS. Esempio di codice:
  • <Style>
  • a: link {display: block; width: 100px;}
  • </ Style>