写了个静态的网页-模仿网易云

最新推荐文章于 2024-03-03 21:08:21 发布

ljlhnick

最新推荐文章于 2024-03-03 21:08:21 发布

阅读量5.8k

点赞数 16

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/ljlhnick/article/details/73437269

前端专栏收录该内容

22 篇文章

订阅专栏

为庆祝父亲节，创建了一个包含音乐播放功能的网页贺卡。该贺卡使用HTML、CSS和JavaScript构建，展示了个性化的歌单和推荐，并在页面底部预设了筷子兄弟的《父亲》这首歌。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天父亲节，正好用它来祝福我爸爸父亲节快乐

效果图

后面的动态效果是参考妙味里一个学员制作的

只贴html+css，因为js有点多，不知道怎么弄上来

html

<html>
<head>
<meta charset="utf-8">
<title>miaowei</title>
<link rel="stylesheet" href="../css/miaowei.css" type="text/css"/>
<script src="../js/vue.min.js"></script>
<script src="../js/cardsData.js"></script>
<script src="../js/card.js"></script>
<script src="../js/polyfill.js"></script>
<script src="../js/tool.js"></script>
</head>
<body>
<canvas id="dot" class="shoeIn" style="background: linear-gradient(rgb(156, 194, 201), rgb(132, 104, 184))" >
</canvas>
<section id="section0">
	
	<div id="contain">
		<div id="top">
			<div class="search">
				<input class="text" id="text" type="text"  v-model="message"/>
				<input class="btn" type="submit" value="搜索"/>
			</div>
			<ul>
				<li><a href="#">个性推荐</a></li>
				<li><a href="#">歌单</a></li>
				<li><a href="#">主播电台</a></li>
				<li><a href="#">排行榜</a></li>
				<li><a href="#">歌手</a></li>
				<li><a href="#">最新音乐</a></li>
				
			</ul>
		</div>
		<div id="list">
			<ul>
				<li>我最喜欢的</li>
				<li>橘子皮</li>
				<li>刘瑞琦</li>
				<li>许嵩</li>
				<li>新建歌单</li>
			</ul>
		</div>
		<div id="show">
			<div class="image">
					<img src="../image/timg2.jpg">
			</div>
			<span class="advice">推荐歌单</span>
			<div class="songlist">
				<ul>
					<li class="l1"><a href="#"><img src="../image/songlist1.jpg"></a><span class="bottom">那些出场自带BGM的漫改电影角色</span></li>
					<li class="l1"a href="#"><img src="../image/songlist2.jpg"></a><span class="bottom">港乐简史：百花争艳，女歌手篇</span></li>
					<li class="l1"><a href="#"><img src="../image/songlist3.jpg"></a><span class="bottom">一个旋律两手歌|是无意穿堂风，偏偏引山洪</span></li>
					<li class="l1"><a href="#"><img src="../image/songlist4.jpg"></a><span class="bottom">国语古风中国风神曲，细腻地抚摸你的耳膜</span></li>
					<li class="l1"><a href="#"><img src="../image/songlist5.jpg"></a><span class="bottom">1990-1999年内地流行乐坛经典回顾</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist6.jpg"></a><span class="bottom">90/九十年代经典流行歌曲</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist7.jpg"></a><span class="bottom">华语/百首写给前任的歌，让你百感交集</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist8.jpg"></a><span class="bottom">二胡精选|二弦在手，演绎人间悲欢离合</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist9.jpg"></a><span class="bottom">民谣|哪些小众却又很好听的歌</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist10.jpg"></a><span class="bottom">高考季|2017一起听歌记单词吧</span></li>
				</ul>
			</div>
			
		</div>
		<div id="progress">
			<div class="play">
				<img src="../image/yingtao.jpg">
				<div class="about">
					<span class="song">父亲</span><br>
					<span class="songer">筷子兄弟</span>
				</div>
			</div>
			<div class="bar">
				<span>筷子兄弟 - 父亲.mp3</span>
				<audio id="music" src="../audio/筷子兄弟 - 父亲.mp3" controls="controls" preload="auto" loop="loop">
				</audio>
			</div>
		</div>
	</div>
	
</section>
</body>
<script src="../js/vue.min2.js"></script>
<script>
        new Vue({
            el: '.text',
            data: {
				message:'父亲'
			}
        })
</script>
</html>

css

body,div,p,span,ul,li,ol,h1,h2,h3,h4,h5,h6,a{
	margin:0px;
	padding:0px;}
a{text-decoration:none;}
ul{list-style:none;}

#section{position:relative;}

section{
	background:transparent;
	transition:1s;
}
#contain{
	position:absolute;
	width:1200px;height:700px;
	margin:-700px 200px 0px 100px;
	box-shadow:0 0 20px 3px rgba(215, 141, 241, 0.8)
}
#top{height:50px;}
#top .search{
	width:300px;height:50px;float:left;
}
#top .search .text{
	width:200px;height:30px;line-height:30px;
	margin-top:15px;
	margin-left:30px;
	-webkit-border-radius:25px;
}
#top .search .btn{
	width:45px;height:30px;text-align:center;
	-webkit-border-radius:5px;
}
#top ul{
	width:800px;height:50px;float:right;
}
#top ul li{
	width:80px;height:30px;float:left;margin:10px 0 0 50px;
}
#top ul li a{
	width:80px;height:30px;line-height:30px;color:pink;
}
#list{
	width:300px;height:500px;border-right:1px solid #fff;float:left;
}
#list ul{
	position:absolute;
	width:300px;height:400px;float:left;
	margin-left:30px;
}
#list ul li{
	display:block;
	width:200px;height:30px;line-height:30px;
	margin:15px 0 0 20px;
}
#show{
	width:850px;height:600px;float:right;
}
#show .image{
	width:500px;height:150px;
	margin:auto;
}
#show .image img{
	display:block;
	width:400px;height:150px;
	margin:auto;
}
#show .advice{
	display:block;width:100px;height:30px;line-height:30px;
	margin-left:25px;
}
#show .songlist ul li{
	width:140px;height:160px;float:left;
	margin-left:20px;
}
#show .songlist ul .l1{
	margin-top:10px;
}
#show .songlist ul .l2{
	margin-top:30px;
}
#show .songlist img{
	width:140px;height:130px;
}
#show .songlist span{
	font-size:12px;
	width:140px;height:15px;line-height:15px;	
}
#progress{
	height:150px;position:absolute;margin-top:530px;
	}
#progress .play{
	width:280px;height:150px;float:left;margin-left:20px;margin-top:10px;border-right:1px solid #fff;
	
}
.play img{
	width:100px;height:100px;float:left;
}
.play .about{
	width:100px;height:100px;float:left;
	margin-left:30px;
}
.about .song,.about .songer{
	height:25px;line-height:25px;margin-top:5px;
}
#progress .bar{
	width:800px;height:100px;float:right;
}
.bar span{
	display:block;width:600px;height:30px;line-height:30px;position:relative;margin-left:80px;margin-top:30px;
}
.bar #music{
	width:600px;margin-left:80px;margin-top:10px;
}
body,div,p,span,ul,li,ol,h1,h2,h3,h4,h5,h6,a{
	margin:0px;
	padding:0px;}
a{text-decoration:none;}
ul{list-style:none;}

#section{position:relative;}

section{
	background:transparent;
	transition:1s;
}
#contain{
	position:absolute;
	width:1200px;height:700px;
	margin:-700px 200px 0px 100px;
	box-shadow:0 0 20px 3px rgba(215, 141, 241, 0.8)
}
#top{height:50px;}
#top .search{
	width:300px;height:50px;float:left;
}
#top .search .text{
	width:200px;height:30px;line-height:30px;
	margin-top:15px;
	margin-left:30px;
	-webkit-border-radius:25px;
}
#top .search .btn{
	width:45px;height:30px;text-align:center;
	-webkit-border-radius:5px;
}
#top ul{
	width:800px;height:50px;float:right;
}
#top ul li{
	width:80px;height:30px;float:left;margin:10px 0 0 50px;
}
#top ul li a{
	width:80px;height:30px;line-height:30px;color:pink;
}
#list{
	width:300px;height:500px;border-right:1px solid #fff;float:left;
}
#list ul{
	position:absolute;
	width:300px;height:400px;float:left;
	margin-left:30px;
}
#list ul li{
	display:block;
	width:200px;height:30px;line-height:30px;
	margin:15px 0 0 20px;
}
#show{
	width:850px;height:600px;float:right;
}
#show .image{
	width:500px;height:150px;
	margin:auto;
}
#show .image img{
	display:block;
	width:400px;height:150px;
	margin:auto;
}
#show .advice{
	display:block;width:100px;height:30px;line-height:30px;
	margin-left:25px;
}
#show .songlist ul li{
	width:140px;height:160px;float:left;
	margin-left:20px;
}
#show .songlist ul .l1{
	margin-top:10px;
}
#show .songlist ul .l2{
	margin-top:30px;
}
#show .songlist img{
	width:140px;height:130px;
}
#show .songlist span{
	font-size:12px;
	width:140px;height:15px;line-height:15px;	
}
#progress{
	height:150px;position:absolute;margin-top:530px;
	}
#progress .play{
	width:280px;height:150px;float:left;margin-left:20px;margin-top:10px;border-right:1px solid #fff;
	
}
.play img{
	width:100px;height:100px;float:left;
}
.play .about{
	width:100px;height:100px;float:left;
	margin-left:30px;
}
.about .song,.about .songer{
	height:25px;line-height:25px;margin-top:5px;
}
#progress .bar{
	width:800px;height:100px;float:right;
}
.bar span{
	display:block;width:600px;height:30px;line-height:30px;position:relative;margin-left:80px;margin-top:30px;
}
.bar #music{
	width:600px;margin-left:80px;margin-top:10px;
}

因为有人想要效果，不知道是不是这个

链接：https://pan.baidu.com/s/1y_OV1K-cXFrmgcgnwHS8oA
提取码：o21f

在贴下初学html，css时练手项目

链接：https://pan.baidu.com/s/1y_OV1K-cXFrmgcgnwHS8oA
提取码：o21f