如何使用HTML和CSS进行分页？
2021-03-11 07:27
标签：margin html com title spec ice oct text 基本 组合HTML和CSS代码：这是以上两个部分的组合的最终代码。 如何使用HTML和CSS进行分页？ 标签：margin html com title spec ice oct text 基本 原文地址：https://www.cnblogs.com/xiewangfei123/p/12842344.htmlDOCTYPE html>
html>
head>
title>
How to make a Pagination
using HTML and CSS ?
title>
head>
body>
center>
h1>GeeksforGeeksh1>
p>A Computer Science Portal for Geeksp>
center>
div class="content">
h3>Interview Experiences:h3>
article>
Share Your Questions/Experience or share
your "Interview Experience", please mail
your interview experience to
contribute@geeksforgeeks.org. Also, to
share interview questions, please add
questions at Contribute a Question! You
can also find company specific Interview
Questions at our PRACTICE portal !
article>
div>
div class="pagination_section">
a href="#">>
a href="#" title="Algorithm">1a>
a href="#" title="DataStructure">2a>
a href="#" title="Languages">3a>
a href="#" title="Interview" class="active">4a>
a href="#" title="practice">5a>
a href="#">Next >>a>
div>
body>
html>
设计结构：在上一节中，我们创建了将要使用CSS的基本网站的结构。
CSS代码看起来不错的结构：/* header styling */
h1 {
color: green;
}
/* pagination position styling */
.pagination_section {
position: absolute;
top: 500px;
right: 230px;
}
/* pagination styling */
.pagination_section a {
color: black;
padding: 10px 18px;
text-decoration: none;
}
/* pagination hover effect on non-active */
.pagination_section 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;
}
DOCTYPE html>
html>
head>
title>
How to make a Pagination
using HTML and CSS ?
title>
style>
/* header styling */
h1 {
color: green;
}
/* pagination position styling */
.pagination_section {
position: absolute;
top: 500px;
right: 230px;
}
/* pagination styling */
.pagination_section a {
color: black;
padding: 10px 18px;
text-decoration: none;
}
/* pagination hover effect on non-active */
.pagination_section 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;
}
style>
head>
body>
center>
h1>GeeksforGeeksh1>
p>A Computer Science Portal for Geeksp>
center>
div class="content">
h3>Interview Experiences:h3>
article>
Share Your Questions/Experience or share
your "Interview Experience", please mail
your interview experience to
contribute@geeksforgeeks.org. Also, to
share interview questions, please add
questions at Contribute a Question! You
can also find company specific Interview
Questions at our PRACTICE portal !
article>
div>
div class="pagination_section">
a href="#">>
a href="#" title="Algorithm">1a>
a href="#" title="DataStructure">2a>
a href="#" title="Languages">3a>
a href="#" title="Interview" class="active">4a>
a href="#" title="practice">5a>
a href="#">Next >>a>
div>
body>
html>
上一篇：P37 排序（中）
下一篇：JS代码格式化时间戳