- In website, Pagination is a simple sequence of pages.
- These pages have similar content to display and are interconnected to the users.
- Multiple pages may be needed for a better user experience, easier navigation, personas, the buyer’s journey, and other reasons.
- It is a prime example of e-commerce websites.
- In a single page, it would be inefficient for Amazon to list all of its items in a single category.
- If necessary, products specifications and images can be divided into several websites.
For example,
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%3Cstyle%3E%0A.pagination%20a%20%7B%0A%20%20color%3A%20black%3B%0A%20%20float%3A%20left%3B%0A%20%20padding%3A%208px%2016px%3B%0A%20%20text-decoration%3A%20none%3B%0A%20%20transition%3A%20background-color%20.3s%3B%0A%7D%0A%0A.pagination%20a.active%20%7B%0A%20%20background-color%3A%20dodgerblue%3B%0A%20%20color%3A%20black%3B%0A%7D%0A%0A.pagination%20a%3Ahover%3Anot(.active)%20%7Bbackground-color%3A%20%23ddd%3B%7D%0A%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%0A%3Ch2%3EWelcome%20to%20Wikitechy%3C%2Fh2%3E%0A%3Cp%3EResponsive%20pagination%20with%20hover%20effects%3A%3C%2Fp%3E%0A%0A%3Cdiv%20class%3D%22pagination%22%3E%0A%20%20%3Ca%20href%3D%22%23%22%3E%26laquo%3B%3C%2Fa%3E%0A%20%20%3Ca%20href%3D%22%23%22%3E1%3C%2Fa%3E%0A%20%20%3Ca%20class%3D%22active%22%20href%3D%22%23%22%3E2%3C%2Fa%3E%0A%20%20%3Ca%20href%3D%22%23%22%3E3%3C%2Fa%3E%0A%20%20%3Ca%20href%3D%22%23%22%3E4%3C%2Fa%3E%0A%20%20%3Ca%20href%3D%22%23%22%3E5%3C%2Fa%3E%0A%20%20%3Ca%20href%3D%22%23%22%3E6%3C%2Fa%3E%0A%20%20%3Ca%20href%3D%22%23%22%3E%26raquo%3B%3C%2Fa%3E%0A%3C%2Fdiv%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”” highlight=”” provider=”manual”/]Output:
