<html>
<head>
<meta charset="gb2312">
<title>PHP CSS3 &#30446;&#24405;&#30452;&#35835;&#24335;Lightbox&#30011;&#24266;</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" />
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
	<h1>PHP CSS3 &#30446;&#24405;&#30452;&#35835;&#24335;Lightbox&#30011;&#24266;</h1>
    <h2>&#25302;&#21160;&#22270;&#29255;&#31227;&#21160;&#21040;&#20219;&#24847;&#20301;&#32622;&#65292;&#21333;&#20987;&#25918;&#22823;&#65292;&#21487;&#19978;&#19968;&#24352;&#12289;&#19979;&#19968;&#24352;&#25773;&#25918;&#65281;</h2>
	<div id="gallery">

		<div id="pic-1" class="pic" style="top:227px;left:91px;background:url(imgthumbs1-california-surfing.jpg) no-repeat 50% 50%; -moz-transform:rotate(13deg); -webkit-transform:rotate(13deg);">
		<a class="fancybox" rel="fncbx" href="img/original/1-california-surfing.jpg" target="_blank">1-california-surfing</a>
		</div>
		<div id="pic-2" class="pic" style="top:124px;left:264px;background:url(imgthumbs2-breast-stroke.jpg) no-repeat 50% 50%; -moz-transform:rotate(31deg); -webkit-transform:rotate(31deg);">
		<a class="fancybox" rel="fncbx" href="img/original/2-breast-stroke.jpg" target="_blank">2-breast-stroke</a>
		</div>
		<div id="pic-3" class="pic" style="top:204px;left:284px;background:url(imgthumbs4-green-beach.jpg) no-repeat 50% 50%; -moz-transform:rotate(-40deg); -webkit-transform:rotate(-40deg);">
		<a class="fancybox" rel="fncbx" href="img/original/4-green-beach.jpg" target="_blank">4-green-beach</a>
		</div>
		<div id="pic-4" class="pic" style="top:99px;left:202px;background:url(imgthumbsbahnhoff.jpg) no-repeat 50% 50%; -moz-transform:rotate(6deg); -webkit-transform:rotate(6deg);">
		<a class="fancybox" rel="fncbx" href="img/original/bahnhoff.jpg" target="_blank">bahnhoff</a>
		</div>
		<div id="pic-5" class="pic" style="top:314px;left:361px;background:url(imgthumbsbamboo.jpg) no-repeat 50% 50%; -moz-transform:rotate(37deg); -webkit-transform:rotate(37deg);">
		<a class="fancybox" rel="fncbx" href="img/original/bamboo.jpg" target="_blank">bamboo</a>
		</div>
		<div id="pic-6" class="pic" style="top:170px;left:370px;background:url(imgthumbsblue-green-nature.jpg) no-repeat 50% 50%; -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg);">
		<a class="fancybox" rel="fncbx" href="img/original/blue-green-nature.jpg" target="_blank">blue-green-nature</a>
		</div>
		<div id="pic-7" class="pic" style="top:291px;left:44px;background:url(imgthumbscolosseum.jpg) no-repeat 50% 50%; -moz-transform:rotate(16deg); -webkit-transform:rotate(16deg);">
		<a class="fancybox" rel="fncbx" href="img/original/colosseum.jpg" target="_blank">colosseum</a>
		</div>
		<div id="pic-8" class="pic" style="top:225px;left:317px;background:url(imgthumbsendurance.jpg) no-repeat 50% 50%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);">
		<a class="fancybox" rel="fncbx" href="img/original/endurance.jpg" target="_blank">endurance</a>
		</div>
		<div id="pic-9" class="pic" style="top:3px;left:86px;background:url(imgthumbsfarm.jpg) no-repeat 50% 50%; -moz-transform:rotate(32deg); -webkit-transform:rotate(32deg);">
		<a class="fancybox" rel="fncbx" href="img/original/farm.jpg" target="_blank">farm</a>
		</div>
		<div id="pic-10" class="pic" style="top:391px;left:15px;background:url(imgthumbsindustrial-mech.jpg) no-repeat 50% 50%; -moz-transform:rotate(29deg); -webkit-transform:rotate(29deg);">
		<a class="fancybox" rel="fncbx" href="img/original/industrial-mech.jpg" target="_blank">industrial-mech</a>
		</div>
		<div id="pic-11" class="pic" style="top:362px;left:19px;background:url(imgthumbssahale-wa.jpg) no-repeat 50% 50%; -moz-transform:rotate(34deg); -webkit-transform:rotate(34deg);">
		<a class="fancybox" rel="fncbx" href="img/original/sahale-wa.jpg" target="_blank">sahale-wa</a>
		</div>
		<div id="pic-12" class="pic" style="top:181px;left:248px;background:url(imgthumbssands-of-life.jpg) no-repeat 50% 50%; -moz-transform:rotate(-22deg); -webkit-transform:rotate(-22deg);">
		<a class="fancybox" rel="fncbx" href="img/original/sands-of-life.jpg" target="_blank">sands-of-life</a>
		</div>
		<div id="pic-13" class="pic" style="top:209px;left:109px;background:url(imgthumbsspice.jpg) no-repeat 50% 50%; -moz-transform:rotate(-31deg); -webkit-transform:rotate(-31deg);">
		<a class="fancybox" rel="fncbx" href="img/original/spice.jpg" target="_blank">spice</a>
		</div>
		<div id="pic-14" class="pic" style="top:198px;left:349px;background:url(imgthumbssports-car.jpg) no-repeat 50% 50%; -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg);">
		<a class="fancybox" rel="fncbx" href="img/original/sports-car.jpg" target="_blank">sports-car</a>
		</div>
		<div id="pic-15" class="pic" style="top:28px;left:303px;background:url(imgthumbstonemapped.jpg) no-repeat 50% 50%; -moz-transform:rotate(-35deg); -webkit-transform:rotate(-35deg);">
		<a class="fancybox" rel="fncbx" href="img/original/tonemapped.jpg" target="_blank">tonemapped</a>
		</div>
		<div id="pic-16" class="pic" style="top:230px;left:163px;background:url(imgthumbswhoooosh.jpg) no-repeat 50% 50%; -moz-transform:rotate(-17deg); -webkit-transform:rotate(-17deg);">
		<a class="fancybox" rel="fncbx" href="img/original/whoooosh.jpg" target="_blank">whoooosh</a>
		</div>    <div class="drop-box">
    </div>
	</div>
	<div class="clear"></div>
</div>
<div id="modal" title="??????">
	<form action="">
	<fieldset>
		<label for="url">???????</label>
		<input type="text" name="url" id="url" class="text ui-widget-content ui-corner-all" onfocus="this.select()" />
	</fieldset>
	</form>
</div>
<div style="text-align:center;">
<p>&#26356;&#22810;&#28304;&#30721;&#65306;<a href="http://www.mycodes.net/" target="_blank">&#28304;&#30721;&#20043;&#23478;</a></p>
</div>
<script src="http://www.mycodes.net/js/tongji.js"></script>
<script src="http://www.mycodes.net/js/youxia.js" type="text/javascript"></script>
<script type="text/javascript"  src="https://idm-su.baidu.com/su.js"></script>
</body>
</html>