دکمه های صفحه بندی بسیار زیبا

انواع صفحه بندی (paging) هنگام طراحی سایت

paging,صفحه بندی

دکمه های صفحه بندی بسیار زیبا

منظور از صفحه بندی در طراحی سایت همان دکمه هایی است که بارها در سایتهای مختلف به عنوان مثال در صفحه مقالات دیده اید که روی هر دکمه عددی نوشته شده و با کلیک بر روی هر یک بین صفحات جابجا می شوید.

با استفاده از کدهای زیر یک نمونه Paging را پیاده سازی کنید. نمونه های دیگر را از طریق این لینک اجرا نمایید.

 

کد HTML مربوط به صفحه بندی

<ul class="pagination">
	<li><a href="#0">&lt;</a></li>
	<li><a class="active" href="#0">1</a></li>
	<li><a href="#0">2</a></li>
	<li><a href="#0">3</a></li>
	<li><a href="#0">4</a></li>
	<li><a href="#0">&gt;</a></li>
</ul>

کد CSS مربوط به صفحه بندی

<style>
body {
  background-color: #ff4242;
  font-family: "Lora", serif;
}
h2 {
  text-align: center;
  color: #fff;
  font-size: 40px;
  font-family: "Lora", serif;
  font-weight: 700;
  margin-top: 60px;
  text-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
}
h2 span {
  font-weight: 400;
}

.pagination {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px;
  background-color: #fff;
  border-radius: 40px;
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.pagination li {
  display: inline-block;
  list-style: none;
}
.pagination li a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  color: #252525;
  border-radius: 4px;
  margin: 5px;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
.pagination li a:hover, .pagination li a.active {
  color: #fff;
  background-color: #ff4242;
}
.pagination li:first-child a {
  border-radius: 40px 0 0 40px;
}
.pagination li:last-child a {
  border-radius: 0 40px 40px 0;
}
</style>

منبع:طراحی سایت ارزان

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود