Schede nelle schede arrotondate sono uno stile comune di navigazione sui siti Web. I visitatori del sito clicca sulle schede per caricare pagine diverse all'interno del sito. Il metodo per rendere la navigazione a schede nelle schede arrotondate è simile al processo che rende le barre di spostamento, ma è necessario sapere come forma di ciascuna voce di menu in una scheda. La proprietà "casella-radius" in CSS consente di arrotondare gli angoli superiori due per trasformare le vostre voci di menu in schede. Tutti gli altri stili - scheda colori, colori del testo e font - dipendono gli stili desiderati per il tuo sito.

Istruzioni

1

Aggiungere un elenco non ordinato di pagina Web utilizzando il tag "< ul >". Inserire un link all'interno di ogni voce dell'elenco per creare una scheda cliccabile:

< ul id = "schede" >
< li >< un href="page1.html" > pagina 1 </li >
< li >< un href="page1.html" > pagina 2 </li >
< li >< un href="page1.html" > pagina 3 </li >
</UL >

2

Aprire il foglio di stile per il tuo sito. Se non hai ancora uno, creare un file vuoto e salvarlo come "mystyles. css". Utilizzare questo codice tra i tag "< head >" nella tua pagina Web per incorporare il foglio di stile:

< link rel = "stylesheet" href="mystyles.css" type = "text/css" / >

Il foglio di stile e la pagina Web deve essere nella stessa cartella per far funzionare il codice precedente.

3

Scrivere una regola di stile per l'elenco non ordinato, il nome di ID di targeting. All'interno della regola, punti elenco e rimuovere imbottitura lato sinistro:

schede () {

list-style: none; / rimuove i punti elenco /
padding-left: 0; / rimuove il rientro di elenco /
}

4

Le schede di stile di styling dei tag di ancoraggio:

le schede a {

colore di sfondo: blu;
colore: bianco;
padding: 5px 10px;
display: block; / necessarie quando ancore di riempimento /
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Nell'esempio precedente colori le linguette blu con testo bianco, pastiglie li un po' e rende i due angoli superiori arrotondati.

5

Ogni voce dell'elenco a sinistra per rendere le schede correre orizzontalmente attraverso lo schermo del galleggiante:

schede li {

float: left;
}

Non è possibile aggiungere "galleggiante: sinistra" di ancore come hai fatto con le altre proprietà perché in questo modo un problema dove le schede saranno simile alla seguente procedura.

6

Creare un stato hover per le schede:

schede a: hover {

colore di sfondo: verde;
}

Nell'esempio, quando si passa il mouse su una scheda, diventerà verde.