Esempi di scheda CSS
In questo capitolo introdurremo come creare un'istanza di paging attraverso l'uso di CSS.
schede semplici
Se il tuo sito ha molte pagine, sarà necessario utilizzare la scheda per rendere la navigazione per ogni pagina.
L'esempio seguente mostra come utilizzare HTML e CSS per creare la pagina:
Esempi CSS
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 16px 8px;
text-decoration: none;
}
Prova »
Fare clic sulla scheda stile e hover
Se si fa clic su questa pagina, è possibile utilizzare .active per impostare lo stile di pagina corrente, è possibile utilizzare il mouse-over :hover selettori per modificare lo stile:
Esempi CSS
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: non ( .active) {background-color: #ddd;}
Prova »
Esempi CSS
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: non (.active) {background-color: #ddd;}
Prova »
stile arrotondato
È possibile utilizzare il border-radius proprietà per la pagina selezionata per aggiungere arrotondato stile angoli:
Esempi CSS
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Prova »
effetti di transizione al passaggio del mouse
Siamo in grado di aggiungere il transition di proprietà per muovere il mouse sulla pagina quando si aggiungono gli effetti di transizione:
Con scheda Bordo
Possiamo usare il border attributo per aggiungere una pagina con un bordo:
angoli arrotondati
Suggerimento: Nella prima e l'ultima pagina link di paginazione un link filetti:
Esempi CSS
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li: last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Prova »
intervallo di paging
Suggerimento: è possibile utilizzare il margin proprietà per aggiungere uno spazio direttamente a ogni pagina:
Esempi CSS
margine :. 0 4px; / * 0 è per parte superiore e inferiore Sentitevi liberi di cambiarlo * /
}
Prova »
font size Paging
Siamo in grado di utilizzare il font-size proprietà per impostare la dimensione del carattere pagina:
scheda centro
Se si vuole scheda Center, è possibile (come <div>) per aggiungeretext-align sul elemento contenitore: CentroStile:
Altri esempi
Pangrattato
Un'altra navigazione come pangrattato, esempi sono i seguenti:
Esempi CSS
padding: 16px 8px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb Li + li: prima {
padding: 8px;
color: black;
tenore: "/ \ 00A0";
}
Prova »