笔记《音乐播放器》22.3.21

最新推荐文章于 2024-08-12 15:32:16 发布

Teaioo

最新推荐文章于 2024-08-12 15:32:16 发布

阅读量89

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Teaioo/article/details/123632339

版权

html5 chrome 前端

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

web音乐播放器 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐播放界面</title>
    <link href="music.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="mr-content">
        <h1>绝口不提爱你</h1>
    <marquee behavior="slide" direction="up">
        <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>
    </marquee>
        
        <audio src="./6love.mp3" class="mr-audio" autoplay="autoplay" loop controls width="100" height="30"></audio>    
    
    </div>
</body>
</html>

CSS

@charset "utf-8";
.mr-content{
	width:500px;
	height:800px;
	margin:0 auto;
	background: url(bg.png);
	border:2px solid #FF8080;	
	}
.mr-content h1{
	padding-left:150px;
	}
.mr-content marquee{
    text-align: center;
	padding-bottom:20px;
	font-size:16px;
	font-weight:bold;
	}
.mr-content .mr-audio{
	padding-left:100px;
	padding-top:50px;
	}

Teaioo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记《音乐播放器》22.3.21

web音乐播放器 HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>音乐播放界面</title> <link href="music.css" rel="stylesheet" type="text/css"></head><body> <div class
复制链接

扫一扫