部分引入第三方的js代码。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>情人节主题</title>
<style>
body{
background-color: #FFEFD5;
overflow: hidden;
}
.fontDiv{
padding:20px;
width:52%;
float: right;
font-size: 24px;
color: #FF88C2;
font-family: 幼圆;
}
.fontDiv img{
width:100%;
height:40px;
}
.symbol{
float: right;
width:10%;
height:110px;
}
.symbol img{
margin: 10px 0 0 0;
width:100px;
height:100px;
border-radius: 50%;
}
.title{
width:35%;
}
.title img{
width:400px;
height:110px;
}
.content{
margin-top:-15px;
}
.flower{
margin-top:-40px;
}
.flower img{
width: 350px;
height:100px;
margin-left: 70px;
}
.photos img{
height:250px;
width:250px;
margin:15px 0 0 15px;
-webkit-box-shadow: 3px 3px 5px #C0C0C0;
-moz-box-shadow: 3px 3px 5px #C0C0C0;
box-shadow: 3px 3px 5px #C0C0C0;
}
.photo1,.photo2,.photo3{
padding:10px;
float: left;
background: white;
z-index: -1;
margin-top:-20px;
}
.photo1{
margin-left:88px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.photo2{
margin-left:140px;
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
transform: rotate(-7deg);
}
.photo3{
margin-left:110px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}
.musicDiv{
float: right;
margin-top:300px;
}
.musicDiv img{
height: 50px;
width:50px;
}
</style>
<script type="text/javascript" class="autoinsert"
src="../frameworks/jquery-2.1.4/jquery-2.1.4.min.js"></script>
<script src="js/snowfall.jquery.js"></script>
<script type="application/javascript">
// 背景音乐的播放与暂停
window.onload = function(){
var music = document.getElementById("music");
var controlMusic = document.getElementById("controlMusic");
controlMusic.onclick = function(){
if(music.paused){
music.play();
}else{
music.pause();
}
}
}
</script>
</head>
<body>
<script>
$(document).snowfall('clear');
$(document).snowfall({
image: "../images/蓝色玫瑰.png",
flakeCount:30,
minSize: 5,
maxSize: 22
});
</script>
<div class="head">
<div class="fontDiv">
<marquee>祝亲爱的情人节快乐~天天开心~</marquee>
<img src="../images/底纹.png" alt="图片找不见了">
</div>
<div class="symbol">
<img src="../images/6.jpg" alt="图片显示不出来了">
</div>
<div class="title">
<img src="../images/标题.png" alt="图片找不见了">
</div>
</div>
<div class="content">
<div class="lines">
<img src="../images/横线.png" alt="图片找不见了" width="100%">
<div class="flower">
<img src="../images/花藤1.png" alt="图片找不见了">
<img src="../images/花藤2.png" alt="图片找不见了">
<img src="../images/花藤1.png" alt="图片找不见了">
</div>
</div>
<div class="photos">
<div class="photo1">
<img src="../images/2.jpg" alt="图片显示不出来了。。。。">
<p>斜躺三十度,悄然间发自内心的颤动,<br>
是思念你的角度。
2014我们在一起</p>
</div>
<div class="photo2">
<img src="../images/5.jpg" alt="图片显示不出来了。。。。">
<p>此刻,我多羡慕那只飞在云端的雄鹰,<br>
只因为他可以看见你。<br>
2015我们在一起</p>
</div>
<div class="photo3">
<img src="../images/6.jpg" alt="图片显示不出来了。。。。">
<p>呆呆的只想你,算着你什么时候回来。<br>
别离太久,思念太深,
2016我们在一起</p>
</div>
</div>
<div class="musicDiv">
<audio autoplay src="../audio/陈奕迅,王菲%20-%20因为爱情.mp3" id="music"></audio>
<img src="../images/音符.png" alt="图片显示不出来了" id="controlMusic">
</div>
</div>
</body>
</html>