| 如何使用HTML和CSS进行分页？ | 您所在的位置：网站首页 › 重新分页怎么弄 › 如何使用HTML和CSS进行分页？ |
如何使用HTML和CSS进行分页？
|
英文 | https://www.geeksforgeeks.org/how-to-make-a-pagination-using-html-and-css/?ref=rp 翻译 | web前端开发（web_qdkf) 要为页面创建分页效果非常简单，你可以使用Bootstrap，JavaScript以及最简单的HTML和CSS方法来实现。 当网站在单个页面上包含很多内容时，分页会很有用，因为单个页面将所有这些主题放在一起看起来都不太好。 很少有网站会使用滚动条来避免分页，反之亦然。但是，最好的外观呈现时滚动和分页相结合。 作为开发人员，你可以在页面上放置一些内容，以使该页面有些可滚动，直到烦人为止。 你可以使用分页将保留那些先前的内容并继续到新的内容页面，并且主题将相同。 在本文中，我们先创建分页的基本结构。在这里，我们还将附加title属性，以便用户可以知道分页的下一页上的内容类型。 HTML代码结构如下： How to make a Pagination using HTML and CSS ? GeeksforGeeksA Computer Science Portal for Geeks Interview Experiences: Share Your Questions/Experience or share your "Interview Experience", please mail your interview experience to [email protected]. Also, to share interview questions, please add questions at Contribute a Question! You can also find company specific Interview Questions at our PRACTICE portal ! >然后，我们再通过CSS创建网站的外观效果。 CSS代码结构如下： /* header styling */ h1 { color: green; } /* pagination position styling */ .pagination_p { position: absolute; top: 500px; right: 230px; } /* pagination styling */ .pagination_p a { color: black; padding: 10px 18px; text-decoration: none; } /* pagination hover effect on non-active */ .pagination_p a:hover:not(.active) { background-color: #031F3B; color: white; } /* pagination hover effect on active*/ a:nth-child(5) { background-color: green; color: white; } a:nth-child(1) { font-weight: bold; } a:nth-child(7) { font-weight: bold; } .content { margin: 50px; padding: 15px; width: 800px; height: 200px; border: 2px solid black; }最后，将HTML和CSS代码进行组合。 我们就得到了最终代码结构如下： How to make a Pagination using HTML and CSS ? /* header styling */ h1 { color: green; } /* pagination position styling */ .pagination_p { position: absolute; top: 500px; right: 230px; } /* pagination styling */ .pagination_p a { color: black; padding: 10px 18px; text-decoration: none; } /* pagination hover effect on non-active */ .pagination_p a:hover:not(.active) { background-color: #031F3B; color: white; } /* pagination hover effect on active*/ a:nth-child(5) { background-color: green; color: white; } a:nth-child(1) { font-weight: bold; } a:nth-child(7) { font-weight: bold; } .content { margin: 50px; padding: 15px; width: 700px; height: 200px; border: 2px solid black; } GeeksforGeeksA Computer Science Portal for Geeks Interview Experiences: Share Your Questions/Experience or share your "Interview Experience", please mail your interview experience to [email protected]. Also, to share interview questions, please add questions at Contribute a Question! You can also find company specific Interview Questions at our PRACTICE portal ! >最终效果如下： 本文完~ |
【本文地址】
公司简介
联系我们