master

分支 (2)

管理

管理

master

liuguanghtml

html
/
流星雨.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放页面</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
/*清除浏览器默认样式*/
*{margin:0; padding:0;}
/*整体控制音乐播放界面*/
#box-video{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	}
/*插入视频*/
#box-video video{
	min-width:100%;
	min-height:100%;
	max-width:4000%;
	max-height:4000%;
	position:absolute;
	top:50%;
	left:50%;
    transform:translate(-50%,-50%)
	}
/*唱片部分*/
.cd{
	width:422px;
	height:422px;
	position:absolute;
	top:25%;
	left:10%;
	z-index:2;
	border-radius:50%;
	border:10px solid #FFF;
	box-shadow:5px 5px 15px #000;
	background:url(图片/f4.jpg) no-repeat;
	}
.center{
	width:100px;
	height:100px;
	background-color:#000;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;
	z-index:3;
	border:5px solid #FFF;
	background-image:url(图片/yinfu.gif);
	background-position: center center;
	background-repeat:no-repeat;
	}
/*歌词部分*/
.song{
	position:absolute;
	top:25%;
	left:50%;
	}
@font-face{
	font-family:MD;
	src:url(font/MD.ttf);
	}
h1{
	font-family:MD;
	font-size:60px;
	font-family:"华文彩云";
	color:#00ffff;
	}
p{
	width:556px;
	height:300px;
	font-family:"华文彩云";
	color:#00ffff;
	padding-left:30px;
	line-height:30px;
	background:url(图片/f17.jpg) repeat-x;
	box-sizing:border-box;
	}
</style>

</head>
<body>
<div id="box-video">
        <video src="a1.webm"  autoplay="autoplay" loop>浏览器不支持video标签</video>
       	<div class="cd">
        	 <div class="center"></div>
        </div>
        <div class="song">
        	<a href="天气预报.html" target=""><h1>流星雨</h1></a><br><hr><br>
            <p>陪你去看流星雨落在这地球上<br/>让你的泪落在我肩膀<br/>要你相信我的爱只肯为你勇敢<br/>你会看见幸福的所在<br/>伤感若太多 心丢给我保护<br/>疲倦的烟火 我会替你都赶走<br/>灿烂的言语 只能点缀感情<br/>如果我沉默 因为我真的爱你<br/>牵你手 跟着我走风再大又怎样<br>你有了我 再也不会迷路方向</p>
            <audio src="http://yinyueshiting.baidu.com/data2/music/123303367/1241435144815766164.mp3?xcode=040035f9879b39136f333bb99c6701d9" autoplay="autoplay" loop ></audio>
        </div>
</div>
</body>
</html>