超实用的翻页效果

效果图：

HTML文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超实用的翻页</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    
    
<ul class="white">
    <li class="first"><a href="###">1</a></li>
    <li><a href="###">2</a></li>
    <li><a href="###">3</a></li>
    <li><a href="###">4</a></li>
    <li><a href="###">5</a></li>
    <li><a href="###">6</a></li>
    <li><a href="###">7</a></li>
    <li><a href="###">8</a></li>
    <li><a href="###">9</a></li>
    <li><a href="###">10</a></li>
</ul>    

<ul class="black">
    <li class="first"><a href="###">1</a></li>
    <li><a href="###">2</a></li>
    <li><a href="###">3</a></li>
    <li><a href="###">4</a></li>
    <li><a href="###">5</a></li>
    <li><a href="###">6</a></li>
    <li><a href="###">7</a></li>
    <li><a href="###">8</a></li>
    <li><a href="###">9</a></li>
    <li><a href="###">10</a></li>
</ul>    

<ul class="blackgreen">
    <li class="first"><a href="###">1</a></li>
    <li><a href="###">2</a></li>
    <li><a href="###">3</a></li>
    <li><a href="###">4</a></li>
    <li><a href="###">5</a></li>
    <li><a href="###">6</a></li>
    <li><a href="###">7</a></li>
    <li><a href="###">8</a></li>
    <li><a href="###">9</a></li>
    <li><a href="###">10</a></li>
</ul>    


</body>
</html>

样式文件：

* {
    padding:0;
    margin:0;
}
body {
    margin:40px;
    font-size:12px;
}
ul {
    background:white;
    width:600px;
    height:25px;
    list-style-type:none;
    padding:10px;
}
ul li {
    float:left;
    margin-right:5px;
}
ul li a {
    display:block;
    padding:3px 8px;
    border:1px solid black;
    text-decoration:none;
    color:black;
}
ul li a:hover,ul li.first a {
    background:black;
    color:white;
    font-weight:bold;
}

ul.black {
    background:black;
}
ul.black li a {
    border:1px solid white;
    color:white;
}
ul.black li a:hover,ul.black li.first a {
    background:#333;
    color:white;
    font-weight:bold;
}

ul.blackgreen {
    background:white;
}
ul.blackgreen li a {
    border:1px solid #f60;
    color:black;
}
ul.blackgreen li a:hover,ul.blackgreen li.first a {
    background:green;
    color:white;
    font-weight:bold;
}

 

posted @ 2014-03-22 15:38  胡椒粉hjf  阅读(695)  评论(0)  编辑  收藏  举报