用Css写了一个分页样式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css分页效果(一)</title>
<style type="text/css">
<!--
.pagination {
width: 70%;
float: left;
font-size: 12px;
line-height: 23px;
height: 23px;
color:#666666;
font-family: Verdana;
}
.pagination a {
float: left;
text-decoration: none;
font-weight: bold;
border: 1px solid #FFFFFF;
background-color: #FF6600;
color: #FFFFFF;
margin: 1px 1px 0 0;
padding: 0 5px 2px 5px;
line-height: normal;
}
.pagination a:hover {
border: 1px solid #FF6600;
background-color: #FFFFFF;
color: #FF6600;
}
.pagination .noncepage {
color: #ff6600;
background-color: #ffffff;
border: 1px solid #ff6600;
margin-right:3px;
}
.pagination .inputnumber {
font-family: Verdana;
width: 30px;
height: 18px;
border: 1px solid #ff6600;
font-weight: bold;
color: #ff6600;
}
.pagination .inputgo {
font-family: Verdana;
width: 25px;
height: 18px;
background-color: #ff6600;
border: 1px solid #ff6600;
font-size: 11px;
font-weight: bold;
color: #ffffff;
}
-->
</style>
</head>
<body>
<div class="pagination">
<a href=""><<</a>
<a href=""><</a>
<a href="">1</a>
<a href="">2</a>
<a href="" class="noncepage">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">></a>
<a href="">>></a>
Pages: 2 / 12
<input name="" type="text" class="inputnumber" />
<input name="" type="button" value="GO" class="inputgo" />
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css分页效果(一)</title>
<style type="text/css">
<!--
.pagination {
width: 70%;
float: left;
font-size: 12px;
line-height: 23px;
height: 23px;
color:#666666;
font-family: Verdana;
}
.pagination a {
float: left;
text-decoration: none;
font-weight: bold;
border: 1px solid #FFFFFF;
background-color: #FF6600;
color: #FFFFFF;
margin: 1px 1px 0 0;
padding: 0 5px 2px 5px;
line-height: normal;
}
.pagination a:hover {
border: 1px solid #FF6600;
background-color: #FFFFFF;
color: #FF6600;
}
.pagination .noncepage {
color: #ff6600;
background-color: #ffffff;
border: 1px solid #ff6600;
margin-right:3px;
}
.pagination .inputnumber {
font-family: Verdana;
width: 30px;
height: 18px;
border: 1px solid #ff6600;
font-weight: bold;
color: #ff6600;
}
.pagination .inputgo {
font-family: Verdana;
width: 25px;
height: 18px;
background-color: #ff6600;
border: 1px solid #ff6600;
font-size: 11px;
font-weight: bold;
color: #ffffff;
}
-->
</style>
</head>
<body>
<div class="pagination">
<a href=""><<</a>
<a href=""><</a>
<a href="">1</a>
<a href="">2</a>
<a href="" class="noncepage">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">></a>
<a href="">>></a>
Pages: 2 / 12
<input name="" type="text" class="inputnumber" />
<input name="" type="button" value="GO" class="inputgo" />
</div>
</body>
</html>