CSS翻頁效果,鼠標放上時變化,無需JS

http://www.inspirr.com

<!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>

Pain past is pleasure(inspirr)

2011年9月2日星期五

CSS翻頁效果,鼠標放上時變化,無需JS

CSS翻頁效果,鼠標放上時變化,無需JS

没有评论:

发表评论