会python真的可以为所欲为0(回)
379天前
这里还有人吗1(回)
565天前这里还有人吗0(回)
565天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
789天前到处都是羊，不想上班0(回)
869天前
鸽子
0(回)
873天前<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
<title>CSS3打造3D分页导航</title> |
<link href="css/default.css" rel="stylesheet" type="text/css" /> |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> |
<script type="text/javascript"> |
$(document).ready(function() { |
$("#pager a").click(function() { |
$(this).addClass("on").siblings().removeClass("on"); |
} |
);}); |
</script> |
<style> |
@font-face { |
font-family:'WebSymbolsRegular'; |
src:url('fonts/websymbols-regular-webfont.eot'); |
src:url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/websymbols-regular-webfont.woff') format('woff'),url('fonts/websymbols-regular-webfont.ttf') format('truetype'),url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); |
} |
#pager { |
position:relative; |
display:block; |
overflow:visible; |
display:inline-block; |
margin:300px 400px; |
} |
#pager a { |
font:bold 20px/30px Tahoma,Arial; |
cursor:pointer; |
text-decoration:none; |
color:#464646; |
display:block; |
float:left; |
margin-right:1px; |
box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(255,255,255,0.7) 1px 0 0,inset rgba(255,255,255,0.7) -1px 0 0,rgba(0,0,0,0.3) 0 3px 0; |
padding:2px 10px; |
min-width:10px; |
text-align:center; |
position:relative; |
text-shadow:#fff 0 1px 0; |
background:#cdcdcd; |
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9))); |
background:-webkit-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); |
background:-moz-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); |
background:-ms-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); |
background:-o-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); |
} |
#pager a:after { |
content:''; |
position:absolute; |
bottom:-3px; |
height:100%; |
display:block; |
width:100%; |
left:0; |
box-shadow:inset rgba(255,255,255,0.2) 1px 0 0,inset rgba(255,255,255,0.2) -1px 0 0,rgba(0,0,0,0.4) 0 1px 0; |
} |
#pager a:first-child::after { |
border-radius:500px 0 0 500px; |
} |
#pager a:last-child::after { |
border-radius:0 50px 50px 0; |
} |
#pager a.on:after { |
bottom:-1px; |
} |
#pager a:before { |
content:''; |
position:absolute; |
top:1px; |
height:100%; |
box-shadow:rgba(0,0,0,0.4) 0 3px 0; |
width:1px; |
display:block; |
background:rgba(0,0,0,0.4); |
right:-1px; |
} |
#pager a:last-child::before { |
display:none !important; |
} |
#pager a:first-child { |
border-radius:50px 0 0 50px; |
font-family:'WebSymbolsRegular'; |
} |
#pager a:last-child { |
border-radius:0 50px 50px 0; |
font-family:'WebSymbolsRegular'; |
} |
#pager a:hover { |
box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(255,255,255,0.7) 1px 0 0,inset rgba(255,255,255,0.7) -1px 0 0,inset rgba(255,255,255,1) 0 0 15px,rgba(0,0,0,0.2) 0 3px 0; |
} |
#pager a:active { |
box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(0,0,0,0.3) 1px 0 0px,inset rgba(0,0,0,0.3) -1px 0 0px,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.2) 0 2px 0; |
top:1px; |
text-shadow:#fff 0 0 15px; |
} |
#pager a:active:after { |
bottom:-2px; |
} |
#pager a:active:before { |
box-shadow:rgba(0,0,0,0.4) 0 2px 0; |
top:0px; |
} |
#pager a.on { |
box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,inset rgba(0,0,0,0.3) 1px 0 0px,inset rgba(0,0,0,0.3) -1px 0 0px,inset rgba(255,255,255,0.7) 0 2px 0,inset rgba(255,255,255,0.7) 0 -1px 0,inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.3) 0 1px 0; |
top:2px; |
text-shadow:#fff 0 0 15px; |
} |
#pager a.on:before { |
box-shadow:rgba(0,0,0,0.4) 0 3px 0; |
top:-1px; |
} |
#pager a.on:active:after { |
bottom:-1px; |
} |
</style> |
</head> |
<body> |
<div id="pager"> |
<a href="javascript:void(0)"><</a> |
<a href="javascript:void(0)" class="on">1</a> |
<a href="javascript:void(0)">2</a> |
<a href="javascript:void(0)">3</a> |
<a href="javascript:void(0)">4</a> |
<a href="javascript:void(0)">5</a> |
<a href="javascript:void(0)">6</a> |
<a href="javascript:void(0)">></a> |
</div></body> |
</html> |
