您的位置：首页 > 其它

实现简单的分页

2016-08-15 19:57 204 查看 
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页码的制作</title>
<style>
/*在此定义相关CSS样式*/

* {
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
font-size: 12px;
}

.page {
height: 40px;
margin-top: 100px;
text-align: center;
}

a {
border: 1px solid #E8E8E8;
text-decoration: none;
margin: 5px;
padding: 5px 10px;
display: inline-block;
color: #333;
}

.begin {
color: #FFFFFF;
background-color: #cc1b1b;
}

.page a:link,
.page a:visited {
color: #000;
}

.page a:hover,
.page a:active {
color: #FFFFFF;
background-color: #cc1b1b;
}
</style>
</head>

<body>
<!--在此制作页码的基本结构-->
<div class='page'>
<a href='#'>首页</a>
<a href='#'><</a>
<a href='#' class='begin'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a href='#'>……</a>
<a href='#'>></a>
<a href='#'>尾页</a>
</div>
</body>

</html>

效果图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航