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=utf-8" />
<title>無標題文檔</title>
<style >
 BODY {
 FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
 WIDTH: 60%; PADDING-LEFT: 25px;} 
DIV.youtube {
 PADDING-RIGHT: 6px; BORDER-TOP: #9c9a9c 1px dotted; PADDING-LEFT: 0px;
 FONT-SIZE: 13px; PADDING-BOTTOM: 4px; COLOR: #313031; PADDING-TOP: 4px;
 FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #cecfce;
 TEXT-ALIGN: right}
DIV.youtube A {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bold;
 PADDING-BOTTOM: 1px; MARGIN: 0px 1px; COLOR: #0030ce;
 PADDING-TOP: 1px; TEXT-DECORATION: underline}
DIV.youtube SPAN.current {
 PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px;
  COLOR: #000; PADDING-TOP: 1px; BACKGROUND-COLOR: #fff}
DIV.youtube SPAN.disabled {
 DISPLAY: none
}
DIV.msdn {
 PADDING-RIGHT: 6px; PADDING-LEFT: 0px; FONT-SIZE: 13px;
 PADDING-BOTTOM: 4px; COLOR: #313031; PADDING-TOP: 4px;
 FONT-FAMILY: Verdana,Tahoma,Arial,Helvetica,Sans-Serif;
 BACKGROUND-COLOR: #fff; TEXT-ALIGN: right}
DIV.msdn A {
 BORDER-RIGHT: #b7d8ee 1px solid; PADDING-RIGHT: 6px;
 BORDER-TOP: #b7d8ee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 4px;
 MARGIN: 0px 3px; BORDER-LEFT: #b7d8ee 1px solid; COLOR: #0030ce;
 PADDING-TOP: 5px; BORDER-BOTTOM: #b7d8ee 1px solid; TEXT-DECORATION: none}
DIV.msdn A:hover {
 BORDER-RIGHT: #b7d8ee 1px solid; BORDER-TOP: #b7d8ee 1px solid;
 BORDER-LEFT: #b7d8ee 1px solid; COLOR: #0066a7;
 BORDER-BOTTOM: #b7d8ee 1px solid; BACKGROUND-COLOR: #d2eaf6}
DIV.pagination A:active {
 BORDER-RIGHT: #b7d8ee 1px solid; BORDER-TOP: #b7d8ee 1px solid;
 BORDER-LEFT: #b7d8ee 1px solid; COLOR: #0066a7; BORDER-BOTTOM: #b7d8ee 1px solid;
 BACKGROUND-COLOR: #d2eaf6}
DIV.msdn SPAN.current {
 BORDER-RIGHT: #b7d8ee 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #b7d8ee 1px solid;
 PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 4px; MARGIN: 0px 3px;
 BORDER-LEFT: #b7d8ee 1px solid; COLOR: #444444; PADDING-TOP: 5px;
 BORDER-BOTTOM: #b7d8ee 1px solid; BACKGROUND-COLOR: #d2eaf6}
DIV.msdn SPAN.disabled {
 DISPLAY: none}
DIV.badoo {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 10px;
 COLOR: #48b9ef; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif;
 BACKGROUND-COLOR: #fff; TEXT-ALIGN: center}
DIV.badoo A {
 BORDER-RIGHT: #f0f0f0 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #f0f0f0 2px solid;
 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 0px 2px; BORDER-LEFT: #f0f0f0 2px solid;
 COLOR: #48b9ef; PADDING-TOP: 2px; BORDER-BOTTOM: #f0f0f0 2px solid;
 TEXT-DECORATION: none}
DIV.badoo A:hover {
 BORDER-RIGHT: #ff5a00 2px solid; BORDER-TOP: #ff5a00 2px solid;
 BORDER-LEFT: #ff5a00 2px solid; COLOR: #ff5a00; BORDER-BOTTOM: #ff5a00 2px solid}
DIV.badoo A:active {
 BORDER-RIGHT: #ff5a00 2px solid; BORDER-TOP: #ff5a00 2px solid;
 BORDER-LEFT: #ff5a00 2px solid; COLOR: #ff5a00; BORDER-BOTTOM: #ff5a00 2px solid}
DIV.badoo SPAN.current {
 BORDER-RIGHT: #ff5a00 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ff5a00 2px solid;
 PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px;
 COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #ff5a00 2px solid;
 BORDER-LEFT: #ff5a00 2px solid;BACKGROUND-COLOR: #ff6c16}
DIV.badoo SPAN.disabled {
 DISPLAY: none
}
.manu {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px;
 PADDING-TOP: 3px; TEXT-ALIGN: center}
.manu A {
 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: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid;
 TEXT-DECORATION: none}
.manu A:hover {
 BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid;
 BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid}
.manu A:active {
 BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid;
 BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid}
.manu .current {
 BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid;
 PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px;
 BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px;
 BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4}
.manu .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}
DIV.green-black {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
 MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center}
DIV.green-black A {
 BORDER-RIGHT: #2c2c2c 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #2c2c2c 1px solid;
 PADDING-LEFT: 5px; BACKGROUND: #2c2c2c; PADDING-BOTTOM: 2px;
 BORDER-LEFT: #2c2c2c 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px;
 BORDER-BOTTOM: #2c2c2c 1px solid; TEXT-DECORATION: none}
DIV.green-black A:hover {
 BORDER-RIGHT: #aad83e 1px solid; BORDER-TOP: #aad83e 1px solid; BACKGROUND: #aad83e;
 BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; BORDER-BOTTOM: #aad83e 1px solid}
DIV.green-black A:active {
 BORDER-RIGHT: #aad83e 1px solid; BORDER-TOP: #aad83e 1px solid; BACKGROUND: #aad83e;
 BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; BORDER-BOTTOM: #aad83e 1px solid}
DIV.green-black SPAN.current {
 BORDER-RIGHT: #aad83e 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aad83e 1px solid;
 PADDING-LEFT: 5px; FONT-WEIGHT: bold; BACKGROUND: url(image2.gif) #aad83e;
 PADDING-BOTTOM: 2px; BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px;
 PADDING-TOP: 2px; BORDER-BOTTOM: #aad83e 1px solid}
DIV.green-black SPAN.disabled {
 BORDER-RIGHT: #f3f3f3 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #f3f3f3 1px solid;
 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #f3f3f3 1px solid; COLOR: #ccc;
 MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #f3f3f3 1px solid}
DIV.viciao {
 MARGIN-TOP: 20px; MARGIN-BOTTOM: 10px}
DIV.viciao A {
 BORDER-RIGHT: #8db5d7 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #8db5d7 1px solid;
 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #8db5d7 1px solid; COLOR: #000;
 MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #8db5d7 1px solid; TEXT-DECORATION: none}
DIV.viciao A:hover {
 BORDER-RIGHT: red 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: red 1px solid;
 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: red 1px solid; MARGIN-RIGHT: 2px;
 PADDING-TOP: 2px; BORDER-BOTTOM: red 1px solid}
DIV.viciao A:active {
 BORDER-RIGHT: red 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: red 1px solid;
 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: red 1px solid; MARGIN-RIGHT: 2px;
 PADDING-TOP: 2px; BORDER-BOTTOM: red 1px solid}
DIV.viciao SPAN.current {
 BORDER-RIGHT: #e89954 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #e89954 1px solid;
 PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #e89954 1px solid;
 COLOR: #000; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #e89954 1px solid;
 BACKGROUND-COLOR: #ffca7d}
DIV.viciao SPAN.disabled {
 BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid;
 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccc 1px solid; COLOR: #ccc;
 MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px solid}
DIV.yahoo2 {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 0.85em; PADDING-BOTTOM: 3px;
 MARGIN: 3px; PADDING-TOP: 3px; FONT-FAMILY: Tahoma,Helvetica,sans-serif; TEXT-ALIGN: center}
DIV.yahoo2 A {
 BORDER-RIGHT: #ccdbe4 1px solid; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 50% bottom;
 BORDER-TOP: #ccdbe4 1px solid; PADDING-LEFT: 8px; PADDING-BOTTOM: 2px;
 BORDER-LEFT: #ccdbe4 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px;
 BORDER-BOTTOM: #ccdbe4 1px solid; TEXT-DECORATION: none}
DIV.yahoo2 A:hover {
 BORDER-RIGHT: #2b55af 1px solid; BORDER-TOP: #2b55af 1px solid; BACKGROUND-IMAGE: none;
 BORDER-LEFT: #2b55af 1px solid; COLOR: #fff; BORDER-BOTTOM: #2b55af 1px solid;
 BACKGROUND-COLOR: #3666d4}
DIV.yahoo2 A:active {
 BORDER-RIGHT: #2b55af 1px solid; BORDER-TOP: #2b55af 1px solid; BACKGROUND-IMAGE: none;
 BORDER-LEFT: #2b55af 1px solid; COLOR: #fff; BORDER-BOTTOM: #2b55af 1px solid;
 BACKGROUND-COLOR: #3666d4}
DIV.yahoo2 SPAN.current {
 PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px;
 COLOR: #000; MARGIN-RIGHT: 3px; PADDING-TOP: 2px}
DIV.yahoo2 SPAN.disabled {
 DISPLAY: none}
DIV.yahoo2 A.next {
 BORDER-RIGHT: #ccdbe4 2px solid; BORDER-TOP: #ccdbe4 2px solid; MARGIN: 0px 0px 0px 10px;
 BORDER-LEFT: #ccdbe4 2px solid; BORDER-BOTTOM: #ccdbe4 2px solid}
DIV.yahoo2 A.next:hover {
 BORDER-RIGHT: #2b55af 2px solid; BORDER-TOP: #2b55af 2px solid; BORDER-LEFT: #2b55af 2px solid;
 BORDER-BOTTOM: #2b55af 2px solid}
DIV.yahoo2 A.prev {
 BORDER-RIGHT: #ccdbe4 2px solid; BORDER-TOP: #ccdbe4 2px solid; MARGIN: 0px 10px 0px 0px;
 BORDER-LEFT: #ccdbe4 2px solid; BORDER-BOTTOM: #ccdbe4 2px solid}
DIV.yahoo2 A.prev:hover {
 BORDER-RIGHT: #2b55af 2px solid; BORDER-TOP: #2b55af 2px solid; BORDER-LEFT: #2b55af 2px solid;
 BORDER-BOTTOM: #2b55af 2px solid}
</style>
</head>

<body>
 <P>YouTube Style
<DIV class=youtube><SPAN class=disabled>Prev</SPAN><SPAN class=current>1</SPAN>
<A href="#?page=2">2</A><A href="#?page=3">3</A><A href="#?page=4">4</A>
<A href="#?page=5">5</A><A href="#?page=6">6</A><A href="#?page=7">7</A>...
<A href="#?page=199">199</A><A href="#?page=200">200</A><A href="#?page=2">Next</A></DIV>
<P></P>
<P>MSDN Search Style
<DIV class=msdn><SPAN class=disabled>&lt; Prev</SPAN><SPAN class=current>1</SPAN>
<A href="#?page=2">2</A><A href="#?page=3">3</A><A href="#?page=4">4</A>
<A href="#?page=5">5</A><A href="#?page=6">6</A><A href="#?page=7">7</A>...
<A href="#?page=199">199</A><A href="#?page=200">200</A><A href="#?page=2">Next &gt; </A></DIV>
<P></P>
<P>Badoo Style
<DIV class=badoo><SPAN class=disabled>&lt; Prev</SPAN><SPAN class=current>1</SPAN>
<A href="#?page=2">2</A><A href="#?page=3">3</A><A href="#?page=4">4</A>
<A href="#?page=5">5</A><A href="#?page=6">6</A><A href="#?page=7">7</A>...
<A href="#?page=199">199</A><A href="#?page=200">200</A><A href="#?page=2">Next &gt; </A></DIV>
<P></P>
<P>Blue Style
<DIV class=manu><SPAN class=disabled>&lt; Prev</SPAN><SPAN class=current>1</SPAN>
<A href="#?page=2">2</A><A href="#?page=3">3</A><A href="#?page=4">4</A>
<A href="#?page=5">5</A><A href="#?page=6">6</A><A href="#?page=7">7</A>...
<A href="#?page=199">199</A><A href="#?page=200">200</A><A href="#?page=2">Next &gt; </A></DIV>
<P></P>
<P>Green-Black Style
<DIV class=green-black><SPAN class=disabled>&lt; Prev</SPAN><SPAN class=current>1</SPAN>
<A href="#?page=2">2</A><A href="#?page=3">3</A><A href="#?page=4">4</A>
<A href="#?page=5">5</A><A href="#?page=6">6</A><A href="#?page=7">7</A>...
<A href="#?page=199">199</A><A href="#?page=200">200</A><A href="#?page=2">Next &gt; </A></DIV>
<P></P>
<P>viciao Style
<DIV class=viciao><SPAN class=disabled>&lt; Prev</SPAN><SPAN class=current>1</SPAN>
<A href="#?page=2">2</A><A href="#?page=3">3</A><A href="#?page=4">4</A>
<A href="#?page=5">5</A><A href="#?page=6">6</A><A href="#?page=7">7</A>...
<A href="#?page=199">199</A><A href="#?page=200">200</A><A href="#?page=2">Next &gt; </A></DIV>
<h3 align="right">www.865171.cn</h3>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章