六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 53|回复: 0

用Css写了一个分页样式

[复制链接]

升级  20%

2

主题

2

主题

2

主题

童生

Rank: 1

积分
10
 楼主| 发表于 2013-1-29 07:49:31 | 显示全部楼层 |阅读模式
<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>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表