Come aggiungere bordi nel menu CSS

March 2

Come aggiungere bordi nel menu CSS


Con Cascading Style Sheet codice (CSS), è possibile modificare i bordi, i colori e le posizioni. Web designer scoprire nuovi trucchi styling usando CSS ogni giorno, ma uno dei più comuni CSS usa è per la progettazione di menu del sito web. È possibile aggiungere un bordo a qualsiasi menu e lo stile in base alle esigenze, specificando le cose come la larghezza, lo stile e il colore. È possibile utilizzare i bordi in combinazione con colori di sfondo, sfumature e ombre per farli risaltare.

istruzione

1 Aprire il file HTML contenente il menu CSS in un editor di codice. Individuare il codice per il menu e prendere nota del l'ID o il nome della classe. I menu sono di solito codificati come liste non ordinate, in modo che il nome di identità o di classe dovrebbe essere all'interno del tag <ul>. A volte si trova in un tag <div> che circonda link del menu.

2 Aprire il file .CSS per il tuo sito e individuare il nome ID o classe per il menu. Se il vostro sito non utilizza un file css esterno o non si conosce, quindi cercare tra i tag <head> per i tag <style> e trovare lì. Se si trovano ancora niente, aggiungere il codice necessario tra i tag <style>.

3 Aggiungere questo codice al codice CSS:

menù-id {border: 1px #eeeeee solido; }

Il codice precedente crea un bordo solido grigio con una larghezza di un pixel. Modificare il numero alla larghezza bordo che si desidera e cambiare "solida" "a qualsiasi impostazione che ti piace, come ad esempio" punteggiata "," tratteggiata "o" smussato stile. Sostituire "#eeeeee" con il codice esadecimale o il nome del colore per ogni colore che si desidera utilizzare. Modificare il codice CSS per una cosa del genere, se si utilizza un nome di classe invece del nome ID del menù:

.class-name {border: 1px #eeeeee solido; }

Consigli e avvertenze

  • La proprietà "confine" in CSS è una struttura a breve mano. È anche possibile ottenere specifici con proprietà, come ad esempio "border-width" o "border-top-style", se volete.
  • È possibile impostare i bordi appaiano solo su due lati o dare ogni lato uno stile diverso.