`
fanggangJava
  • 浏览: 24688 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

用Css写了一个分页样式

    博客分类:
  • java
阅读更多
<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>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

Global site tag (gtag.js) - Google Analytics