《华为音乐播放器项目》——2.静态页面实现

最新推荐文章于 2025-01-05 19:20:07 发布

70kggg

最新推荐文章于 2025-01-05 19:20:07 发布

阅读量766

点赞数

CC 4.0 BY-SA版权

分类专栏：有点意思文章标签： svg 音乐播放器

本文链接：https://blog.youkuaiyun.com/weixin_42617604/article/details/89608262

本文记录了华为音乐播放器静态页面的布局和实现过程，涉及CSS布局、SVG图标使用和动画效果。通过分区布局，利用CSS设置主题颜色、布局和居中效果。关键知识点包括SVG图标引入、旋转动画以及屏幕适配方案。项目源代码可在GitHub找到。

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

emmmmm，静态页面好像没什么需要特别记录的东西。
最多就是新知道的几个CSS知识点和SVG的用法，但还是把具体实现步骤记录一下吧。

最终效果如下：
在这里插入图片描述
一、对效果图先分区布局

主要分为三个部分：

head:	包括歌名、作者
panel：	旋转的效果，当前歌词和下一句歌词
footer:	一些功能按钮

在这里插入图片描述
二、着手写整体布局的CSS：

1、先确定主题颜色，直接微信截图看的，这时候 svg 的好处就体验出来了。
先记录号主要的颜色，后面直接用就可以了，同时有一个新的用法，看下面的例子

$color: blue;
$color-dark: darken($color1,10%);	//这个意思是color1的颜色暗 10% 成为一个新的颜色

h1{
	color: $color;	//蓝色
}
h2{
	color: $color-dark;	//深一点的蓝色
}

然后写CSS之前记得清空页边距

*{
	margin: 0;
	padding: 0;
}

移动端背景色全屏：
html:
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
css:
	height: 100vh;

然后重新复习了一下 display:block，inline，inline-block 的概

200万优质内容无限畅学