HTML5制作显示歌词界面，以及添加超链接到第三方试听歌曲

最新推荐文章于 2024-07-04 11:30:00 发布

心系五道口

最新推荐文章于 2024-07-04 11:30:00 发布

阅读量4.6k

点赞数 7

文章标签： HTML5网页制作歌词显示

本文链接：https://blog.csdn.net/qq_38452951/article/details/92799294

版权

1、index代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小海—《亲爱的你》歌词</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="">
			<h1>亲爱的你</h1>
		    <center><img src="img/5.jpg"/  alt="图片加载失败" title="张子枫" width="200" height="200">
		    </center>	
		    <p>专辑：北京再见          歌手：小海</p>
			<p>张广海 - 亲爱的你</p>
			<p>作词：张广海</p>
			<p>作曲：张广海</p>
			<p>上海的冬天不再凛冽</p>
			<p>是因为有你在身边</p>
			<p>那次不期而遇的相见</p>
			<p>却留下日日夜夜的想念</p>
			<p>你说你</p>
			<p>很喜欢一个人的旅行</p>
			<p>在美好的生命里</p>
			<p>留下自己的印记</p>
			<p>从未想过一切太快</p>
			<p>忽然我们走近彼此身边</p>
			<p>牵手走在大街上面</p>
			<p>走走停停感受这份温暖</p>
			<p>宝贝啊</p>
			<p>以后的日子陪你一起走啊</p>
			<p>日出日落</p>
			<p>经历生命中最灿烂的烟火</p>
			<p>亲爱的你</p>
			<p>感谢在人海之中遇见你</p>
			<p>喜欢你安静说话的样子</p>
			<p>让我想起最美丽的天使</p>
			<p>亲爱的你</p>
			<p>带上吉他我们一起去旅行</p>
			<p>无论时间怎样转变</p>
			<p>我会永远永远和你在一起</p>
			<p>亲爱的你</p>
			<p>从未想过一切太快</p>
			<p>忽然我们走近彼此身边</p>
			<p>牵手走在大街上面</p>
			<p>走走停停感受这份温暖</p>
			<p>宝贝啊</p>
			<p>以后的日子陪你一起走啊</p>
			<p>日出日落</p>
			<p>经历生命中最灿烂的烟火</p>
			<p>亲爱的你</p>
			<p>感谢在人海之中遇见你</p>
			<p>喜欢你安静说话的样子</p>
			<p>让我想起最美丽的天使</p>
			<p>亲爱的你</p>
			<p>带上吉他我们一起去旅行</p>
			<p>无论时间怎样转变</p>
			<p>我会永远永远和你在一起</p>
			<p>亲爱的你</p>
			<p>感谢在人海之中遇见你</p>
			<p>喜欢你安静说话的样子</p>
			<p>让我想起最美丽的天使</p>
			<p>亲爱的你</p>
			<p>带上吉他我们一起去旅行</p>
			<p>无论时间怎样转变</p>
			<p>我会永远永远和你在一起</p>
			<p>亲爱的你</p>
			<p>亲爱的你</p>
			<p>亲爱的你</p>
			<p>亲爱的你</p>
		</div>
	<a href="http://www.kugou.com/song/d43f210.html?frombaidu#hash=6E1C5BDBE2A1B0C2F50B5671886CADDE&album_id=0" target="_blank" title="">点击链接试听</a>
	</body>
</html>

2、css代码

div{
	background-image: url(../img/bg5.gif);
	color: white;
	margin: 0 auto;
}
h1{
	text-align: center;
	line-height: 60px;
}
p{
	line-height: 32px;
	font-size: 14px;
	text-align: center;
}

3、效果图