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

來源:互聯網
上載者:User
關鍵字 網頁製作 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>


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.