CSS ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

فهرست مطالب

    نمایش فهرست مطالب

.ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﻮﮕﺨﺳﺎﭘ ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﮏﯾ CSS ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻪﻧﻮﮕﭼ ﻪﮐ ﺪﯾﺮﯿﮕﺑ ﺩﺎﯾ

ﻩﺩﺎﺳ ﯼﺪﻨﺑ ﻪﺤﻔﺻ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﯽﻋﻮﻧ ﻪﺤﻔﺻ ﺮﻫ ﻪﺑ ﺪﯿﻫﺍﻮﺨﺑ ﺖﺳﺍ ﻦﮑﻤﻣ ،ﺪﯾﺭﺍﺩ ﺩﺎﯾﺯ ﺕﺎﺤﻔﺻ ﺎﺑ ﯽﺘ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>

<h2>Simple Pagination</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>

ﯽﯾﺎﺠﺑﺎﺟ ﻞﺑﺎﻗ ﻭ ﻝﺎﻌﻓ ﯼﺪﻨﺑ ﻪﺤﻔﺻ

:ﺎﻬﻧﺁ ﯼﻭﺭ ﺱﻮﻣ ﺖﮐﺮﺣ ﻡﺎﮕﻨﻫ ﻪﺤﻔﺻ ﺪﻧﻮﯿﭘ .ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻡﺍﺪﮐ ﺮﻫ ﮓﻧﺭ ﺮﯿﯿﻐﺗ ﯼﺍﺮﺑ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

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

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Active and Hoverable Pagination</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>

ﺭﻭﺎﻨﺷ ﻞﺑﺎﻗ ﻭ ﻝﺎﻌﻓ ﺩﺮﮔ ﯼﺎﻫ ﻪﻤﮐﺩ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ border-radius ﯽﮔﮋﯾﻭ ،ﺪﯿﺷﺎﺑ ﻪﺘﺷ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

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

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>

ﺭﻭﺎﻨﺷ ﻞﺑﺎﻗ ﺭﺍﺬﮔ ﺮﺛﺍ

:ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺭﻭﺎﻨﺷ ﺭﺩ ﺭﺍﺬﮔ ﺮﺛﺍ ﮏﯾ ﺎﺗ ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﻪﺤﻔﺻ ﯼﺎﻫﺪﻧﻮﯿﭘ ﻪﺑ ﺍﺭ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Transition Effect on Hover</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>

ﯼﺍ ﻪﯿﺷﺎﺣ ﯼﺪﻨﺑ ﻪﺤﻔﺻ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﻪﺑ ﻪﯿﺷﺎﺣ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ border<

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Borders</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>

ﺩﺮﮔ ﯼﺎﻫﺯﺮﻣ

ﻪﺘﮑﻧ: ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﺭﺩ ﺩﻮﺧ ﺪﻧﻮﯿﭘ ﻦﯾﺮﺧﺁ ﻭ ﻦﯿﻟﻭﺍ ﻪﺑ ﺍﺭ ﺩ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

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

.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;
}
</style>
</head>
<body>

<h2>Pagination with Rounded Borders</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>

ﺎﻫﺪﻧﻮﯿﭘ ﻦﯿﺑ ﻪﻠﺻﺎﻓ

ﻪﺘﮑﻧ: ﯽﻤﻧ ﺮﮔﺍﯽﮔﮋﯾﻭ ،ﺪﯿﻨﮐ ﯼﺪﻨﺑ ﻩﻭﺮﮔ ﺍﺭ ﻪﺤﻔﺻ ﯼﺎﻫﺪﻧﻮﯿﭘ ﺪﯿﻫﺍ

ﻝﺎﺜﻣ

 .pagination a {
  margin: 0 4px; /* 0 is for top 
and bottom. Feel free to change it */
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Margins</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>

ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﻩﺯﺍﺪﻧﺍ

:ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ font-size ﯽﮔﮋﯾﻭ ﺎﺑ ﺍﺭ ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﻩ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  font-size: 22px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination Size</h2>

<p>Change the font-size property to make the pagination smaller or bigger.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>

ﺰﮐﺮﻣ ﺭﺩ ﯼﺪﻨﺑ ﻪﺤﻔﺻ

.ﺪﯿﭽﯿﭙﺑ ﻥﺁ ﺭﻭﺩ text-align:center ﺎﺑ ﺍﺭ (<div>

ﻝﺎﺜﻣ

 .center {
  text-align: center;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Centered Pagination</h2>

<div class="center">
  <div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
  </div>
</div>

</body>
</html>

ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:white;
}
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<p>Next/Previous buttons:</p>
<div class="pagination">
  <a href="#">&#10094;</a>
  <a href="#">&#10095;</a>
</div>

<p>Navigation pagination:</p>
<div class="pagination">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

</body>
</html>

ﯼﺭﺎﺧﻮﺳ ﯼﺎﻫﺭﺩﻮﭘ

:ﺖﺳﺍ "ﻥﺎﻧ ﻩﺩﺮﺧ" ﺡﻼﻄﺻﺍ ﻪﺑ ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﻉﺍﻮﻧﺍ ﺯﺍ ﺮﮕﯾﺩ ﯽﮑﯾ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
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";
}

ul.breadcrumb li a {color: green;}
</style>
</head>
<body>

<h2>Breadcrumb Pagination</h2>

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

</body>
</html>

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024