Mfano wa kipaguli cha CSS

Kueleza kama tuambia kufanya kipaguli cha kipya kwa kutumia CSS.

Kipaguli cha kawaida

Kamaanisha kamaanisha kwa ukurasa kwa ukurasa kwa kumtaarifu kufanya ukurasa una kipaguli cha ukurasa kwa kila ukurasa:

Mivyo

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

Jifunze Tena

kigele cha kulenga cha kuzungumza

kwa .active Kigele cha kulenga cha kimoja cha kuzingatia, na tumia kwenye kila ukurasa wakati wa kuzingatia kwa kifungu: :hover Mifano ya kubadilisha rangi ya kila viungo vya ukurasa:

Mivyo

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

Jifunze Tena

mbomu ya kimoja na kuzungumza kwa kigele cha kulenga

Ikiwa utahitaji mabomu ya kimoja na kuzungumza kwa vitu vya "active" na "hover", tia huzuni border-radius Mifano ya:

Mivyo

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

Jifunze Tena

kwa uharibifu wa kuzungumza kwa kifungu

Tumia transition Mifano ya kumengeneza kwa viungo vya ukurasa, kumengeneza uharibifu wa rangi wa ukurasa wakati wa kuzungumza na kifungu:

Mivyo

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

Jifunze Tena

kigele cha kulenga na mabomu

Tumia border Mifano ya kumengeneza mabomu kwenye kigele cha kulenga:

Mivyo

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

Jifunze Tena

mbomu ya mbindi

Mbinu:Kuongeza mabomu ya mbindi kwenye viungo vya kigele cha kulenga kuanzia na kufikia:

Mivyo

.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;
}

Jifunze Tena

muda kati kati ya viungo

Mbinu:Ikiwa hatutahitaji kusaidia viungo vya ukurasa, tia huzuni margin Mifano ya:

Mivyo

.pagination a {
  margin: 0 4px; /* Ujumbe wa kijumbe cha juu na chini ni 0, inaweza kubadilishwa kwenye sababu mbalimbali */
}

Jifunze Tena

ukubwa wa kigele cha kulenga

Tumia font-size Mifano ya kubadilisha ukubwa wa kigele cha kulenga:

Mivyo

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

Jifunze Tena

kigele cha kulenga cha kimoja

Kuwa niweze kuwa na uharibifu wa kimoja, tumia kigele cha kulenga kwa kumengeneza text-align:center kigele cha kina kina (kama <div>) kinadumu kwake:

Mivyo

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

Jifunze Tena

Mivyo Zaidi

Mivyo

Jifunze Tena

Breadcrumbs

Tovuti ya Tazamaingiza ya Kina ni pengine ya 'Breadcrumbs':

Mivyo

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";
}

Jifunze Tena