超实用的翻页效果

时间：2014-03-22 18:26:29 阅读：461 评论：0 收藏：0 [点我收藏+]

效果图：

bubuko.com,布布扣

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;
}

超实用的翻页效果,布布扣,bubuko.com

超实用的翻页效果

原文：http://www.cnblogs.com/LO-ME/p/3617651.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)