Skip to content

Commit 01537e9

Browse files
张欧文张欧文
张欧文
authored and
张欧文
committed
building pagination
1 parent f33c834 commit 01537e9

File tree

1 file changed

+143
-0
lines changed

1 file changed

+143
-0
lines changed

‎starter/06-Components/04-pagination.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Pagination</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
15+
<style>
16+
* {
17+
margin: 0;
18+
padding: 0;
19+
box-sizing: border-box;
20+
}
21+
22+
body {
23+
font-family: "Inter", sans-serif;
24+
color: #343a40;
25+
line-height: 1;
26+
}
27+
28+
p {
29+
color: #717172dd;
30+
font-size: 18px;
31+
margin: auto -10px;
32+
}
33+
34+
.pagination {
35+
margin-top: 300px;
36+
width: 100%;
37+
display: flex;
38+
gap: 18px;
39+
justify-content: center;
40+
align-items: center;
41+
}
42+
43+
.btn {
44+
border: 2px solid #087f5b;
45+
height: 48px;
46+
width: 48px;
47+
background-color: #fff;
48+
border-radius: 50%;
49+
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
}
54+
55+
.btn--right {
56+
margin-left: -10px;
57+
}
58+
59+
.btn--left {
60+
margin-right: -10px;
61+
}
62+
63+
.btn-icon {
64+
stroke: #087f5b;
65+
align-self: center;
66+
justify-self: center;
67+
height: 28px;
68+
width: 28px;
69+
}
70+
.btn:hover {
71+
background-color: #087f5b;
72+
}
73+
.btn:hover .btn-icon {
74+
stroke: white;
75+
}
76+
77+
a:link,
78+
a:visited {
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
width: 40px;
83+
height: 40px;
84+
/* padding: 10px 10px 10px 10px; */
85+
text-align: center;
86+
color: #343a40;
87+
text-decoration: none;
88+
font-weight: 500;
89+
}
90+
91+
a:hover,
92+
a:active {
93+
color: white;
94+
background-color: #087f5b;
95+
border-radius: 50%;
96+
}
97+
</style>
98+
</head>
99+
<body>
100+
<div class="pagination">
101+
<button class="btn btn--left">
102+
<svg
103+
xmlns="http://www.w3.org/2000/svg"
104+
fill="none"
105+
viewBox="0 0 24 24"
106+
stroke-width="1.5"
107+
stroke="currentColor"
108+
class="btn-icon"
109+
>
110+
<path
111+
stroke-linecap="round"
112+
stroke-linejoin="round"
113+
d="M15.75 19.5L8.25 12l7.5-7.5"
114+
/>
115+
</svg>
116+
</button>
117+
<a href="#" class="pnumber">1</a>
118+
<a href="#" class="pnumber">2</a>
119+
<a href="#" class="pnumber">3</a>
120+
<a href="#" class="pnumber">4</a>
121+
<a href="#" class="pnumber">5</a>
122+
<a href="#" class="pnumber">6</a>
123+
<p class="dots">...</p>
124+
<a href="#" class="pnumber">23</a>
125+
<button class="btn btn--right">
126+
<svg
127+
xmlns="http://www.w3.org/2000/svg"
128+
fill="none"
129+
viewBox="0 0 24 24"
130+
stroke-width="1.5"
131+
stroke="currentColor"
132+
class="btn-icon"
133+
>
134+
<path
135+
stroke-linecap="round"
136+
stroke-linejoin="round"
137+
d="M8.25 4.5l7.5 7.5-7.5 7.5"
138+
/>
139+
</svg>
140+
</button>
141+
</div>
142+
</body>
143+
</html>

0 commit comments

Comments
 (0)