CSS翻页效果,鼠标放上时变化,无需JS

大中小文章来源：万象互联更新时间：2011-8-18 14:30:31

万象互联网络资讯网提示：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /titleDIV CSS实例：一款不错

<!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>DIV CSS实例：一款不错的CSS翻页效果（DIGG）</title>
<style type="text/css">
BODY {
FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;WIDTH: 60%; PADDING-LEFT: 25px;
}
DIV.digg {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
}
DIV.digg SPAN.disabled {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}
</style>
<body>
<p>
<a href="/" _fcksavedurl="/">Digg Style - websbook.com</a>
<div class="digg">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2" _fcksavedurl="#?page=2">2</a>
<a href="#?page=3" _fcksavedurl="#?page=3">3</a>
<a href="#?page=4" _fcksavedurl="#?page=4">4</a>
<a href="#?page=5" _fcksavedurl="#?page=5">5</a>
<a href="#?page=6" _fcksavedurl="#?page=6">6</a>
<a href="#?page=7" _fcksavedurl="#?page=7">7</a>
...
<a href="#?page=199" _fcksavedurl="#?page=199">199</a>
<a href="#?page=200" _fcksavedurl="#?page=200">200</a>
<a href="#?page=2" _fcksavedurl="#?page=2"> > </a>
</div>
</p>
</body>
</html>

提示：您可以先修改部分代码再运行

版权说明:本站原创文章,由万象互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/3856.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博

在线咨询

客服咨询
企业qq交谈
QQ：800009888

备案专员
企业qq交谈
QQ：973907313

域名专员
企业qq交谈
QQ：6584830

在线时间
8:00-21:00

域名注册查询

域名注册

虚拟主机

云服务器

上海网站建设

微信小程序

企业邮箱

网络营销

CSS翻页效果,鼠标放上时变化,无需JS

相关文章：