Come fare un CSS barra verticale

February 24

Come fare un CSS barra verticale


CSS o Cascading Style Sheets, viene utilizzato per indicare i browser come visualizzare gli elementi HTML. CSS può essere memorizzato esternamente da HTML e utilizza nomi di sezione per determinare quali stili di andare con ogni sezione. Ciò consente di risparmiare tempo perché gli sviluppatori Web possono modificare l'aspetto di un sito completamente modificando questo file. Incorporando una barra verticale CSS nel vostro sito può essere fatto in due modi.

istruzione

Usando una sezione DIV

1 Aprire la pagina Web in cui si desidera aggiungere alla barra verticale.

2 Aggiungi una sezione div chiamato "VBar" nella posizione appropriata usando il seguente tag:

<Div id = "VBar" </ div>

3 Salvare il file.

4 Aprire il file CSS. Aggiungere una sezione al file CSS con attributi per la sezione barra verticale, come segue:

VBar {

Larghezza: px;?

Altezza: px;

colore di sfondo:#??????;

}

Sostituire i punti interrogativi per i valori appropriati. Ad esempio, l'altezza e la larghezza dovrebbe essere incluso in pixel con un formato simile a 10px. Il colore di sfondo dovrebbe essere elencato utilizzando un valore esadecimale Web-safe a sei cifre, come ad esempio # 000000 per il nero o #FFFFFF per il bianco. Visita il CSS colori dei link nella sezione "Risorse" per più colori esadecimali.

5 Salvare il file.

Utilizzando un attributo sezione di frontiera

6 Aprire il file CSS.

7 Aggiungere un attributo border alla sezione della pagina che è adiacente alla posizione in cui si desidera che la barra verticale. Ad esempio, se si dispone di una sezione "contenitore" che è a sinistra di dove si vuole aggiungere la barra verticale, aggiungere un attributo border-destra per la sezione al fine di creare un bordo destro.

contenitore {

border-right: X;

}

Vedere la sezione "suggerimenti" per le diverse opzioni di attributo border.

8 Salvare il file.

Consigli e avvertenze

  • L'attributo "confine" può essere utilizzato per determinare la larghezza del bordo (#px, dove # viene sostituito con un numero) stile (solido, punteggiato, tratteggiato, doppio, cresta, groove, inserto, fin dall'inizio) oa colori (# ??? ???, dove i punti interrogativi vengono sostituiti con i numeri per indicare i colori sicuri per il Web).
  • Per esempio:
  • #container {
  • border-right: # 333333 3px solido;
  • }