اگر وب سایت شما از نوع فروشگاه های اینترنتی یا وبلاگ ها است که دارای صفحات متعدد اند، صفحه بندی از وظایف اجباری شما است. یک مثال ساده از صفحه بندی در CSS را در کد زیر می بینید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
text-decoration:none;
}
</style>
</head>
<body>
<h2>Simple Pagination</h2>
<div class="pagination">
<ahref="#">«</a>
<ahref="#">1</a>
<ahref="#">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</body>
</html>
|
برای زیباتر کردن این مثال باید کلاسی به نام active. را به صفحه ی فعلی داده و با استفاده از hover: کاری کنیم که با حرکت موس روی این صفحات رنگ پس زمینه شان تغییر کند:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
text-decoration:none;
}
.pagination a.active {
background-color:#4CAF50;
color:white;
}
.pagination a:hover:not(.active) {background-color:#ddd;}
</style>
</head>
<body>
<h2>Active andHoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>
<div class="pagination">
<ahref="#">«</a>
<ahref="#">1</a>
<aclass="active"href="#">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</body>
</html>
|
گرد کردن زوایا
برای ایجاد ظاهری زیباتر می توانید زوایای این صفحات را با استفاده از border-radius گرد کنید.
به مثال زیر دقت کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
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 andHover Buttons</h2>
<div class="pagination">
<ahref="#">«</a>
<ahref="#">1</a>
<ahref="#"class="active">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</body>
</html>
|
استفاده از قابلیت transition
شما می توانید با استفاده از قابلیت transition کاری کنید که انیمیشن هایی مانند hover به نرمی هرچه تمام تر اجرا شده و آنی اتفاق نیفتند.
به مثال زیر دقت کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
text-decoration:none;
transition:background-color.3s;
}
.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>Transition Effect on Hover</h2>
<p>Move the mouse over the numbers.</p>
<div class="pagination">
<ahref="#">«</a>
<ahref="#">1</a>
<ahref="#"class="active">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</body>
</html>
|
اضافه کردن حاشیه
اکثر وب سایت های دنیای وب از border برای حاشیه دادن به قسمت صفحه بندی سایت خود استفاده می کنند که امری سلیقه ای است. اگر بخواهیم این کار را با مثال خود بکنیم چیزی جز اضافه کردن border به کدهای CSS نداریم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
text-decoration:none;
transition:background-color.3s;
border:1pxsolid#ddd;
}
.pagination a.active {
background-color:#4CAF50;
color:white;
border:1pxsolid#4CAF50;
}
.pagination a:hover:not(.active) {background-color:#ddd;}
</style>
</head>
<body>
<h2>Pagination with Borders</h2>
<div class="pagination">
<ahref="#">«</a>
<ahref="#">1</a>
<ahref="#"class="active">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</body>
</html>
|
اما هنوز هم جای ارتقاء وجود دارد. اگر گوشه های دو علامت « و » را گرد کنیم شکل قسمت صفحه بندی زیباتر می شود:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
text-decoration:none;
border:1pxsolid#ddd;
}
.pagination a.active {
background-color:#4CAF50;
color:white;
border:1pxsolid#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">
<ahref="#">«</a>
<ahref="#">1</a>
<aclass="active"href="#">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</body>
</html>
|
صفحات با فاصله
یکی دیگر از استایل های ممکن، ایجاد فاصله بین صفحات در قسمت صفحه بندی است. در چنین حالتی باید از marginاستفاده کنیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
text-decoration:none;
transition:background-color.3s;
border:1pxsolid#ddd;
margin:04px;
}
.pagination a.active {
background-color:#4CAF50;
color:white;
border:1pxsolid#4CAF50;
}
.pagination a:hover:not(.active) {background-color:#ddd;}
</style>
</head>
<body>
<h2>Pagination with Margins</h2>
<div class="pagination">
<ahref="#">«</a>
<ahref="#">1</a>
<ahref="#"class="active">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</body>
</html>
|
اندازه ی قسمت صفحه بندی
برای تعیین اندازه ی قسمت صفحه بندی می توان از خاصیت font-size استفاده کرد و به هیچ چیز پیچیده ی دیگری نیاز نیست:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
text-decoration:none;
transition:background-color.3s;
border:1pxsolid#ddd;
font-size:22px;
}
.pagination a.active {
background-color:#4CAF50;
color:white;
border:1pxsolid#4CAF50;
}
.pagination a:hover:not(.active) {background-color:#ddd;}
</style>
</head>
<body>
<h2>Pagination Size</h2>
<p>Change the font-size propertytomake the pagination smaller orbigger.</p>
<div class="pagination">
<ahref="#">«</a>
<ahref="#">1</a>
<ahref="#"class="active">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</body>
</html>
|
قرار دادن صفحه بندی در وسط صفحه
برای ترازبندی صفحه بندی باید ابتدا آن را درون یک عنصر نگه دارنده ی دیگر (مانند یک div) قرار دهید و سپس از قابلیتtext-align:center استفاده کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.center {
text-align:center;
}
.pagination {
display:inline-block;
}
.pagination a {
color:black;
float:left;
padding:8px16px;
text-decoration:none;
transition:background-color.3s;
border:1pxsolid#ddd;
margin:04px;
}
.pagination a.active {
background-color:#4CAF50;
color:white;
border:1pxsolid#4CAF50;
}
.pagination a:hover:not(.active) {background-color:#ddd;}
</style>
</head>
<body>
<h2>Centered Pagination</h2>
<div class="center">
<div class="pagination">
<ahref="#">«</a>
<ahref="#">1</a>
<ahref="#"class="active">2</a>
<ahref="#">3</a>
<ahref="#">4</a>
<ahref="#">5</a>
<ahref="#">6</a>
<ahref="#">»</a>
</div>
</div>
</body>
</html>
|
استایل های دیگر
البته استایل های دیگر صفحه بندی نیز وجود دارند. به طور مثال کد بسیار پیشرفته تری را در زیر می بینید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width">
<title>JSBin</title>
</head>
<body>
<style>
.wrap {
display:grid;
place-content:center;
height:100vh;
background:#90CAF9;
}
.wrap .nav {
display:flex;
flex-direction:column;
background:#fff;
position:relative;
overflow:hidden;
padding:0;
margin:0;
box-shadow:05px5px-5pxrgba(2,136,209,0.15),010px10px-5pxrgba(2,136,209,0.15),015px15px-5pxrgba(2,136,209,0.15),020px20px-5pxrgba(2,136,209,0.15);
}
.wrap .nav__link {
flex:1;
padding:50px;
list-style:none;
text-align:center;
position:relative;
font-size:20px;
font-weight:bold;
transition:0.5sease;
cursor:pointer;
user-select:none;
}
.wrap .nav__link:hover {
color:#0288D1;
}
.wrap .nav__link:hover:nth-of-type(2) ~ .nav__bar {
top:20%;
}
.wrap .nav__link:hover:nth-of-type(3) ~ .nav__bar {
top:40%;
}
.wrap .nav__link:hover:nth-of-type(4) ~ .nav__bar {
top:60%;
}
.wrap .nav__link:hover:nth-of-type(5) ~ .nav__bar {
top:80%;
}
.wrap .nav__bar {
top:0;
left:0;
position:absolute;
background:#0288D1;
width:5px;
height:20%;
transition:0.35scubic-bezier(0.32,1.4,0.13,1.4);
}
</style>
<div class="wrap">
<ul class="nav">
<li class="nav__link">1</li>
<li class="nav__link">2</li>
<li class="nav__link">3</li>
<li class="nav__link">4</li>
<li class="nav__link">5</li>
<div class="nav__bar"></div>
</ul>
</div>
</body>
</html>
|
یک مثال بسیار زیبای دیگر:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width">
<title>JSBin</title>
</head>
<body>
<style>
body {
margin:0;
background:#F6B533;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
}
a {
text-decoration:none;
outline:none;
display:block;
padding:20px0;
width:40px;
text-align:center;
color:white;
float:left;
}
div {
position:absolute;
top:0;
opacity:0;
width:40px;
overflow:hidden;
transition:.5slinear;
}
.left {
left:0;
}
.right {
right:0;
}
.line {
width:30px;
height:2px;
position:absolute;
bottom:10px;
left:-35px;
background:white;
transition:.5slinear.2s;
}
.left a:nth-child(2):hover ~ .line,
.right a:nth-child(2):hover ~ .line {
left:5px;
}
.left a:nth-child(3):hover ~ .line,
.right a:nth-child(3):hover ~ .line {
left:45px;
}
.left a:nth-child(4):hover ~ .line,
.right a:nth-child(4):hover ~ .line {
left:85px;
}
nav {
background:#FCFCFC;
color:#4D4644;
position:relative;
border-radius:6px;
overflow:hidden;
width:600px;
text-align:center;
box-shadow:0020pxrgba(0,0,0,.2);
transition:.3slinear;
}
.text {
display:inline-block;
letter-spacing:2px;
padding:20px10px;
cursor:pointer;
}
nav:hover div {
background:#D8CDC9;
opacity:1;
}
div:hover .prev {
opacity:0;
display:none;
}
div:hover .next {
display:none;
}
div:hover {
width:auto;
}
.prev:before {
content:"\f104";
font-family:FontAwesome;
}
.next:before {
content:"\f105";
font-family:FontAwesome;
}
</style>
<nav><span class="text">NEXT</span>
<div class="left">
<ahref=""class="prev"></a>
<ahref="">1</a>
<ahref="">2</a>
<ahref="">3</a>
<span class="line"></span>
</div>
<div class="right">
<ahref=""class="next"></a>
<ahref="">4</a>
<ahref="">5</a>
<ahref="">6</a>
<span class="line"></span>
</div>
</nav>
</body>
</html>
|
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟