鼠标放上会放大的CSS分页按钮样式

2020-01-27 14:20:01

字体：大中小

来源：转载

供稿：网友

推荐一种实用的CSS分页样式，在鼠标放在分页按钮上的时候，按钮会放大显示，有朋友称之为鲁斯狼分页按钮，不知道为什么叫这个名字。其实之前有过类似的效果，这种分页样式现在仍在流行，简洁但又不缺失很好的操作体验，在一些大网站上经常会见到的分页效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>推荐一种实用的CSS分页样式</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">#nav {    list-style: none;    display: inline;}#nav li {    display: inline;    margin-right: 5px;    float: left;}#nav a {    color: #399;    text-decoration: none;    display: block;    font-size: 14px;    font-family: Geneva, Arial, Helvetica, sans-serif;    border: 1px solid #999;    width: 20px;    height: 20px;    line-height: 20px;    text-align: center;}#nav li a:hover {    font-size: 24px;    line-height: 40px;    height: 40px;    width: 40px;    position: absolute;    z-index: 10;    margin: -10px 0 0 -10px;    font-weight: bold;    color: #CC66FF;    border: 1px dotted #666666;    background: #EEE;}</style></head><body><ul id="nav">    <li><a href="#">?</a></li>    <li><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="#">?</a></li></ul></body></html>

上一篇：CSS自动加序号-多种有序列表数字序号效果

下一篇：CSS3实现Android 安卓图标

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注