007_今年七夕，我用代码表白
程序员文章站
2023-12-30 22:05:16
...
源码：
<!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>七夕表白网页演示-5</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link type="image/x-icon" href="favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link href="css/prettyPhoto.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/content_switch.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/cScroll.js"></script>
<script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script src="js/prettyPhoto.js"></script>
<body onpaste="return false" ondragstart="return false" onmouseover="window.status='';return true" oncopy="return false;">
<frameset> <frame src="index.html"> </frameset>
<script>
function stop(){
alert('TY，我爱你');
return false;
}
document.oncontextmenu=stop;
</script>
<body onselectstart="return false" onpaste="return false" oncopy="return false;"
oncut="return false;" >
</a>
<script>
function checkhtml5()
{
if ($.browser.msie && parseInt($.browser.version, 10) < 9) {
document.body.innerHTML="<div style=' clear: both; text-align:center; position: relative; height: 50px; margin-top: 30px; padding: 20px; background-color: red; color: white; font-size:20px;'>你的浏览器非常落后，不支持 HTML5!<br/>请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。</a></div>";
}
}
</script>
<style>
a.wb_sina {
float:left;
margin-top:20px;
margin-left:15px;
display:inline-block;
padding:4px 10px;
border-radius:3px;
background-color:#e55345;
background-image:-moz-linear-gradient(top,#e96249,#e03c40);
background-image:-ms-linear-gradient(top,#e96249,#e03c40);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#e96249),to(#e03c40));
background-image:-webkit-linear-gradient(top,#e96249,#e03c40);
background-image:-o-linear-gradient(top,#e96249,#e03c40);
background-image:linear-gradient(top,#e96249,#e03c40);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e96249',endColorstr='#e03c40',GradientType=0);
background-repeat:repeat-x;
text-shadow:0 -1px 0 rgba(0,0,0,.5);
border:1px solid #cf2b28;
color:#fff!important;
box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);
}
a.wb_sina:hover {
background-image:-moz-linear-gradient(top,#e03c40,#e96249);
background-image:-ms-linear-gradient(top,#e03c40,#e96249);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#e03c40),to(#e96249));
background-image:-webkit-linear-gradient(top,#e03c40,#e96249);
background-image:-o-linear-gradient(top,#e03c40,#e96249);
background-image:linear-gradient(top,#e03c40,#e96249);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e03c40',endColorstr='#e96249',GradientType=0);
}
a.wb_sina span {
display:inline-block;
vertical-align:-5px;
margin-right:7px;
height:20px;
width:24px;
background:url(./images/weibo.png) no-repeat;
}
a.wb_tencent {
float:left;
margin-top:20px;
margin-left:15px;
display:inline-block;
padding:4px 10px;
border-radius:3px;
background-color:#0e7fcc;
background-image:-moz-linear-gradient(top,#1288d4,#0771c1);
background-image:-ms-linear-gradient(top,#1288d4,#0771c1);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#1288d4),to(#0771c1));
background-image:-webkit-linear-gradient(top,#1288d4,#0771c1);
background-image:-o-linear-gradient(top,#1288d4,#0771c1);
background-image:linear-gradient(top,#1288d4,#0771c1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1288d4',endColorstr='#0771c1',GradientType=0);
background-repeat:repeat-x;
text-shadow:0 -1px 0 rgba(0,0,0,.5);
border:1px solid #0D6EB8;
color:#fff!important;
box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);
}
a.wb_tencent:hover {
background-color:#0e7fcc;
background-image:-moz-linear-gradient(top,#0771c1,#1288d4);
background-image:-ms-linear-gradient(top,#0771c1,#1288d4);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#0771c1),to(#1288d4));
background-image:-webkit-linear-gradient(top,#0771c1,#1288d4);
background-image:-o-linear-gradient(top,#0771c1,#1288d4);
background-image:linear-gradient(top,#0771c1,#1288d4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0771c1',endColorstr='#1288d4',GradientType=0);
}
a.wb_tencent span {
display:inline-block;
vertical-align:-5px;
margin-right:7px;
height:20px;
width:24px;
background:url(./images/weibo.png) no-repeat 0 -20px;
}
#abox
{
position: fixed;
_position: absolute;
right: 15px;
z-index: 99999999;
}
</style>
</head>
<body onLoad="checkhtml5()">
<div id="abox">
</div>
<div class="page_spinner">
<div></div>
</div>
<div class="over">
<div class="centre">
<div class="main">
<!--header -->
<header>
<h1><span id="logo"><img src="images/logo1.png" alt="" usemap="#logo"></span></h1>
<nav class="menu">
<ul id="menu">
<li id="nav1"><img src="images/nav1.png" alt=""><span>爱情</span></li>
<li id="nav2"><img src="images/nav2.png" alt=""><span>记事</span></li>
<li id="nav3"><img src="images/nav3.png" alt=""><span>絮叨</span></li>
<li id="nav4"><img src="images/nav4.png" alt=""><span>留言</span></li>
<li id="nav5"><img src="images/nav5.png" alt=""><span>相册</span></li>
<li id="nav6"><img src="images/nav6.png" alt=""><span>沙漏</span></li>
</ul>
</nav>
<img src="images/spacer.gif" alt="" id="navigation" usemap="#navigation">
<map name="navigation" class="navigation">
</map>
<map name="logo" class="map_logo"></map>
</header>
<!--header end-->
<!--content -->
<map name="back" class="map_back"></map>
<article id="content">
<ul>
<li id="page_Home">
<img src="images/bg_content.png" alt="" class="bg_cont">
<span class="back"><img src="images/nav1.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
<div class="pad">
<h2>爱情</h2>
不经意相识, 或许是缘分，或许是注定的。<br />
以后不管有怎么样，我都会在。<br />
就算全世界都都抛弃你，记得还有我。<br />
再累都不用害怕，因为你有我。<br />
记得在你最需要的时候想起我。<br/>
我不知道能为你做什么，但是，我知道一定会一直对你好。 </div>
</li>
<li id="page_About">
<img src="images/bg_content.png" alt="" class="bg_cont">
<span class="back"><img src="images/nav2.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
<div class="pad">
<h2>记事</h2>
<div class="relative">
<div class="scroll">
<span>2015/2/13-20</span>
<p> 一起走来不容易</p>
<p> 好好去珍惜</p>
<p> 放心。</p>
<p> 我会一直陪着你</p>
<p> 记得在你最需要的时候想起我。</p>
<p> You are my only girl</p>
<p> 我问你如何才能让你相信我说的话。</p>
<p> 现在我告诉你，其实一直都喜欢你。在乎你。</p>
</div>
</div>
</div>
</li>
<li id="page_Talk">
<img src="images/bg_content.png" alt="" class="bg_cont">
<span class="back"><img src="images/nav3.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
<div class="pad">
<h2>絮叨</h2>
<div class="relative">
<div class="scroll">
<div style="width:100%;float: left; border-bottom: 1px solid #CCCCCC;">我们开始了。。。<br/><span style="float: right"> --2012/04/19</span></div>
<div style="width:100%;float: left">等待更新<br/><span style="float: right"> --2015/4/*</span></div>
</div>
</div>
</div>
</li>
<li id="page_Message">
<img src="images/bg_content.png" alt="" class="bg_cont">
<span class="back"><img src="images/nav4.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
<div class="pad">
<h2>留言</h2>
<div class="relative">
<div class="scroll">
<div style="min-height: 300px; padding-bottom: 50px;">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="3" data-title="留言板" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"ws234"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
</div>
</div>
</div>
</div>
</li>
<li id="page_Blog">
<img src="images/bg_content.png" alt="" class="bg_cont">
<span class="back"><img src="images/nav5.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
<div class="pad">
<h2>相册</h2>
<div class="relative">
<div class="scroll">
<ul class="gallery fancybox">
<li style="line-height:120px"><a href="images/uploadimage/1.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/1.jpg" alt=""></a></li>
<li style="line-height:120px"><a href="images/uploadimage/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/1.jpg" alt=""></a></li>
<li style="line-height:120px"><a href="images/uploadimage/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/2.jpg" alt=""></a></li>
<li style="line-height:120px"><a href="images/uploadimage/4.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/2.jpg" alt=""></a></li>
<li style="line-height:120px"><a href="images/uploadimage/5.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/3.jpg" alt=""></a></li>
<li style="line-height:120px"><a href="images/uploadimage/6.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/3.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>
</li>
<li id="page_Time">
<img src="images/bg_content.png" alt="" class="bg_cont">
<span class="back"><img src="images/nav6.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
<div class="pad">
<h2>沙漏</h2>
<div id="loveHeart" style="margin-top: 30px;font-size: 25px;">
<span style="">你知道我爱你爱了多久了吗？</span>
<div id="elapseClock" style="margin: 10px 0px 10px 0px;"></div>
<img src="images/1.gif" /> <img src="images/2.gif" /><br/><br/>
<div id="loveu">
爱：从2012-04-19开始！<br/>
<div class="signature" style="float: right; margin-right: 50px;">by ：FQ </div>
</div>
</div>
</div>
</div>
</li>
</ul>
</article>
<!--content end-->
</div>
</div>
<div class="bg1">
<div class="main">
<!--footer -->
<footer style="line-height:20px">
<div id="copyright"> 欢迎关注微信公众号：JavaWeb架构师 <script language="JavaScript"></script>
</object>
</div>
<!-- {%FOOTER_LINK} -->
</footer>
<!--footer end-->
</div>
</div>
</div>
<script>
$(window).load(function() {
$('.page_spinner').fadeOut();
$('body').css({overflow:'visible'});
})
</script>
<script type="text/javascript">//修改时光沙漏时间
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2012, 04, 19);
together.setHours(17);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
setTimeout(function () {
adjustWordsPosition();
startHeartAnimation();
}, 3000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
</script>
<audio id="bgmMusic" src="http://mp3.haoduoge.com/s/2016-08-18/1471532196.mp3" preload="auto" type="audio/mp3" autoplay loop></audio>
<!--coded by koma-->
<!--LIVEDEMO_00 -->
</div>
</body>
</html>完整源码下载：
关注下面的公众号，并回复：今年七夕，我用代码表白.code