Przykłady karcie CSS
W tym rozdziale przedstawimy, jak utworzyć instancję stronicowania poprzez użycie CSS.
proste zakładki
Jeśli witryna ma wiele stron, musisz użyć zakładki do nawigacji dla każdej ze stron.
Poniższy przykład pokazuje, jak używać HTML i CSS do tworzenia strony internetowej:
Przykłady CSS
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
Kolor: czarny;
float: left;
padding: 16px 8 pikseli;
text-decoration: none;
}
Spróbuj »
Kliknij kartę i aktywowanych styl
Jeśli klikniesz na tej stronie, można użyć .active ustawić bieżącego stylu strony, można skorzystać z myszą :hover selektorów zmodyfikować styl:
Przykłady CSS
background-color: # 4CAF50;
kolor: biały;
}
ul.pagination li a: aktywowania: nie ( .active) {background-color: #ddd;}
Spróbuj »
Przykłady CSS
background-color: # 4CAF50;
kolor: biały;
}
ul.pagination li a: aktywowania: nie (.active) {background-color: #ddd;}
Spróbuj »
zaokrąglony styl
Można użyć border-radius nieruchomości do wybranej strony, aby dodać zaokrąglone narożniki styl:
Przykłady CSS
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Spróbuj »
Efekty przejścia Hover
Możemy dodać transition własności, aby przesunąć kursor myszy na stronie po dodaniu efektów przejścia:
Dzięki karcie granicznego
Możemy użyć border atrybut dodać stronę z ramką:
Zaokrąglone narożniki
Wskazówka: W pierwszej i ostatniej stronie linki paginacji link Dodaj filety:
Przykłady 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;
}
Spróbuj »
interwał stronicowania
Wskazówka: Można użyć margin właściwość, aby dodać przestrzeń bezpośrednio do każdej strony:
Przykłady CSS
Margines :. 0 4px; / * 0 jest górna i dolna Zapraszam do jego zmiany * /
}
Spróbuj »
rozmiar czcionki stronicowania
Możemy użyć font-size właściwość, aby ustawić rozmiar czcionki strony:
Zakładka Center
Jeśli chcesz wyśrodkować kartę, można (takich jak <div>), aby dodaćtekst wyrównać na elemencie pojemnika: Centrumstyl:
Więcej przykładów
Bułka tarta
Innym nawigacji w bułce tartej, przykłady przedstawiają się następująco:
Przykłady CSS
padding: 16px 8 pikseli;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb Li + li: before {
padding: 8 pikseli;
Kolor: czarny;
treść: "/ \ 00a0";
}
Spróbuj »