La creazione di menu è probabilmente uno dei punti principali nello sviluppo di siti e programmi. Inoltre, una buona elaborazione e progettazione logica di un tale menu è il volto di un sito o di qualsiasi programma. Ad esempio, prendiamo Microsoft e il sistema operativo Windows 7. Dopo il rilascio di Windows 7, Microsoft ha sentito molte critiche che non erano lusinghiere per sé. Ci sono state molte critiche, ma molto spesso voci di menu posizionate in modo scomodo. Leggi attentamente questo tutorial su come creare un menu a discesa orizzontale con CSS ed Expression Web. Gli stili dei tag cambieranno per creare il menu
Istruzioni
Passo 1
Vai a Gestisci stili e quindi fai clic sul pulsante Nuovo stile. Dai il nome Selector ul li al nuovo stile che hai appena creato. Ricorda inoltre di assicurarti che il nuovo stile debba essere definito nel file drop-down.css.
Passo 2
Per allungare un menu orizzontale, devi dire alle voci di menu che sarà orizzontale. Successivamente, è necessario determinare la larghezza di ciascuna voce di menu e rimuovere tutti i punti non necessari davanti a tutte le voci dell'elenco.
Passaggio 3
Per l'allineamento orizzontale vai su Layout e imposta l'attributo di visualizzazione su inline. Imposta l'attributo float a sinistra. Fare clic sul pulsante Applica. Tutti gli elementi dell'elenco devono essere impostati su una riga. Affinché non si sovrappongano, è necessario effettuare le seguenti operazioni: impostare il valore Posizione dell'attributo larghezza su 150 px. Ora controlla. Tutti gli elementi dell'elenco dovrebbero avere la stessa dimensione.
Passaggio 4
Ora dobbiamo provare a rimuovere i punti davanti agli elementi dell'elenco. Per fare ciò, vai su List e imposta l'attributo list-style –type su nessuno.
Passaggio 5
Fare clic su OK per accettare tutte le modifiche.
Passaggio 6
Per regolare la dimensione del carattere per lo stile ul li, devi fare quanto segue. In Gestisci stili, fai clic con il pulsante destro del mouse sullo stile ul li necessario per selezionare Modifica stile. Si aprirà la familiare finestra di dialogo per l'aggiunta o la modifica degli attributi. Vai alla categoria Font e imposta l'attributo font-family su Arial, Helvetica, sans-serif. Quindi, vai all'attributo font-size e impostalo su 0.9em. Successivamente, imposta l'attributo di trasformazione del testo, imposta il valore in maiuscolo.
Passaggio 7
L'altezza degli elementi nel menu creato può essere regolata nella categoria Posizione. Imposta l'attributo dell'altezza su 30 px.
Passaggio 8
Successivamente, è necessario salvare il file menu.html. A tale scopo, Expression Web aprirà la finestra Salva file incorporati richiesta per salvare il file. Salva nel file drop-down.css. Fare clic su OK per salvare.
Passaggio 9
Ora controlla il tuo risultato. Per affidabilità, è meglio testarlo in diversi browser. Per verificare il risultato ottenuto nel browser predefinito, è necessario premere il tasto F12 sulla tastiera.
