Mga halimbawa ng CSS pagination

Alamin kung paano gumawa ng responsive pagination gamit ang CSS.

Simple na pagsasabihin

Kung may maraming pahina ang website, baka nais mong magdagdag ng anumang pagsasabihin sa bawat pahina:

Example

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

Try It Yourself

aktibong na puwede makalapag na pahina

Gamitin ang .active Maglagay ng klase para sa kasalukuyang pahina, at gamitin ito kapag may ilang kailangan na maglapag sa kanila: :hover Pagbabago ng kulay ng bawat link ng pahina sa pamamagitan ng pagbabago ng

Example

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

Try It Yourself

Malambot na aktibong na puwede makalapag na pahina

Kung kailangan mong magkaroon ng malambot na "active" at "hover" na pindutan, magdagdag ng border-radius pagbabago ng

Example

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

Try It Yourself

na puwede makalapag na transition

Ilagay ang transition Pagdagdag ng

Example

.pagination a {
  transition: background-color .3s;
}

Try It Yourself

Pahina na may hanggan

Gamitin ang border Pagdagdag ng hangganan sa pahina:

Example

.pagination a {
  border: 1px solid #ddd; /* Lutuing puti */
}

Try It Yourself

Malambot na hangganan

Mga payo:Magdagdag ng malambot na hangganan sa unang at huling link ng pahina:

Example

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Try It Yourself

liwanag sa pagitan ng mga link

Mga payo:Kung ayaw mong pagsama-sama ang mga link ng pahina, magdagdag ng margin pagbabago ng

Example

.pagination a {
  margin: 0 4px; /* Ang mga hangganan ng itaas at labas ay 0, maaring malilinaw na baguhin */
}

Try It Yourself

laki ng pahina

Gamitin ang font-size Pagbabago ng laki ng pahina sa pamamagitan ng pagbabago ng

Example

.pagination a {
  font-size: 22px;
}

Try It Yourself

pahina na naka-ganap na

Kung gusto mong ilinang ang pahina sa gitna, gamitin ang na-set na text-align:center Ang elementong kwadrado (gaya na ang <div>) ay naka-ikot sa kanya:

Example

.center {}}
  text-align: center;
}

Try It Yourself

More Examples

Example

Try It Yourself

Breadcrumbs

Another form of pagination is what is called "breadcrumbs":

Example

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "\00a0";
}

Try It Yourself