部分引入第三方的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>