使用H5写一个分页的布局 - 打野赵怀真 - 沸点 - 掘金

2年前

使用H5写一个分页的布局
"以下是一个使用HTML5和CSS3实现的简单分页布局示例：

```html
<!DOCTYPE html>
<html>
<head>
<title>分页布局</title>
<style>
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.pagination a {
padding: 8px 16px;
text-decoration: none;
color: #333;
background-color: #f2f2f2;
border-radius: 4px;
margin: 0 5px;
}

.pagination a:hover {
background-color: #ddd;
}

.pagination .active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class=\"pagination\">
<a href=\"#\">1</a>
<a href=\"#\">2</a>
<a href=\"#\">3</a>
<a href=\"#\">4</a>
<a href=\"#\">5</a>
<a href=\"#\">6</a>
</div>
</body>
</html>
```

在这个示例中，我们使用了`display: flex`属性将分页链接居中显示，并使用`justify-content: center`和`align-items: center`属性进行水平和垂直居中。每个分页链接都是一个`<a>`标签，通过设置`padding`属性来定义链接的大小，设置`text-decoration`属性来去除下划线，设置`color`属性来定义链

展开

今天学到了

等人赞过