Come fare un menu CSS Orizzontale Verticale

February 17

Cascading Style Sheets, o CSS, è uno strumento utile perché separa la maggior parte della formattazione visiva e strutturale di un documento HTML dal contenuto del documento, rendendo sia più facile da leggere e modificare. Lo fa mettendo la formattazione in un documento separato. CSS fornisce anche un accesso Web progettista di strumenti e formattazione che non sono disponibili in HTML solo. Invece di costruire menu in una serie di tabelle nidificate, come deve essere fatto in HTML puro, il progettista può sviluppare rapidamente ed efficientemente elenchi che può essere disposto orizzontalmente o verticalmente. Modifica di un menu orizzontale esistente verticale richiede una piccola quantità di riformattazione.

istruzione

1 Individuare gli elementi del menu nel file HTML. Ci sono diversi modi per visualizzare un menu orizzontale, in modo che il formato esatto dipenderà dal file originale. Rimuovere tutti i tag di formattazione che circondano direttamente il contenuto della lista.

2 Creare una nuova lista non ordinata che circonda il contenuto del menu. Inizia con "<ul id = nav>" (che sostituisce "nav" con la vostra scelta di identificazione). Posizionare una apertura "<li>" e la chiusura "</ li>" attorno ad ogni elemento che ha bisogno di una propria casella di menu separato. Dopo tutto il contenuto viene etichettato, chiudere la lista non ordinata con il tag "</ ul>".

3 Trovare la voce corrispondente nel file CSS che applicato al menu originale. Il formato attuale e l'identificazione di queste voci dipenderà da come è stato creato il menu originale. Dopo aver individuato le vecchie voci, cancellarli dal file CSS.

4 Formare una nuova voce nel file CSS per la lista non ordinata appena creato. Tipo "#nav ul" per identificare la voce con l'ID univoco che è stato impostato nel file HTML, ricordando di sostituire "nav" con l'ID che hai effettivamente utilizzato. Posizionare una parentesi graffa di apertura "{" e iniziare una nuova riga. Digitare "list-style-type: none;" "Margin: 0;" e "padding: 0;" ciascuno su una riga separata. Il primo elemento di rimuovere i punti elenco e gli altri due controllare lo stile visivo del menu. Aggiungere "}" per chiudere la voce.

5 Aggiungere qualsiasi altra formattazione che si desidera applicare per l'aspetto visivo del menu. Aggiungere bordi o regolare il margine e padding, se lo si desidera. Impostare il margine e padding a zero è fatto solo per ignorare le impostazioni predefinite del browser, in modo da cambiare per soddisfare il vostro disegno. Prova diverse combinazioni di impostazioni per creare presenze diverse per la lista.

Consigli e avvertenze

  • Un esempio di voce in HTML per una lista non ordinata:
  • <Ul id = nav>
  • <Li> <a href="home.html"> casa </a> </ li>
  • <Li> <a href="products.html"> Prodotti </a> </ li>
  • <Li> <a href="about.html"> Chi </a> </ li>
  • </ Ul>
  • Un esempio di voce CSS:
  • #nav ul
  • {
  • list-style-type: none;
  • margin: 0;
  • padding: 0;
  • }
  • Ogni elemento elencato con un separato <li> tag apparirà in una scatola separata sulla lista.