一、前言

这是第二部分的内容：

效果就是：我们要求背景图为如下这样，头部是校徽和732 Happy Music的字样。

因为页面设计是需要矢量图的，所以首先推荐几个矢量图的网站：

Scalable Vector Graphics (SVG) 2

Icon Font & SVG Icon Sets ❍ IcoMoon

在这会有各种各样的矢量图标可以选用。

二、字体与样式

我们首先在assets文件夹中新建fonts，这个文件是用于矢量图的导入的，我们可以使用代码形式导入对应库的矢量图，详情可以看对应的文档，上面已经给出了。

例如：类似的方式

<glyph unicode=" " horiz-adv-x="512" d="" />
<glyph unicode="" glyph-name="ok" d="M127.956 507.942c-17.12 0-33.184-6.508-45.28-18.335-24.928-24.405-24.928-64.080 0-88.516l252.128-246.494c24.192-23.654 66.304-23.654 90.496 0l512.064 500.622c12.096 11.827 18.752 27.566 18.752 44.274s-6.656 32.447-18.752 44.242c-24.192 23.654-66.336 23.654-90.528 0l-444.16-434.258c-12.512-12.203-32.768-12.203-45.248 0l-184.224 180.13c-12.096 11.827-28.16 18.335-45.248 18.335zM380.052 73.683c-34.208 0-66.336 13.016-90.496 36.671l-252.128 246.525c-49.92 48.811-49.888 128.191 0 176.97 48.352 47.278 132.608 47.309 181.024 0l161.6-158.009 421.536 412.169c48.352 47.278 132.704 47.278 181.024 0 24.192-23.654 37.504-55.068 37.504-88.516 0-33.417-13.312-64.862-37.504-88.485l-512.064-500.654c-24.16-23.654-56.288-36.671-90.496-36.671z" />
<glyph unicode="" glyph-name="no" d="M127.923 896.002c-17.104 0-33.153-6.656-45.237-18.751-24.936-24.959-24.936-65.534 0-90.493l316.148-316.15c6.010-5.984 9.367-14.144 9.367-22.623s-3.357-16.639-9.367-22.623l-316.116-316.118c-24.968-24.959-24.968-65.566 0-90.525 24.169-24.159 66.337-24.159 90.506 0l316.148 316.118c12.5 12.512 32.769 12.512 45.237 0l316.116-316.086c24.201-24.159 66.337-24.127 90.538 0 24.936 24.959 24.936 65.566 0 90.525l-316.116 316.086c-12.5 12.512-12.5 32.767 0 45.247l316.116 316.118c12.085 12.096 18.734 28.159 18.734 45.279 0 17.087-6.65 33.151-18.734 45.247-24.201 24.159-66.337 24.191-90.538 0l-316.148-316.118c-12.5-12.512-32.737-12.512-45.237 0l-316.116 316.118c-12.116 12.096-28.165 18.751-45.301 18.751zM127.987-64c-34.176 0-66.337 13.312-90.538 37.471-49.905 49.918-49.905 131.132 0 181.018l293.513 293.495-293.545 293.527c-49.905 49.918-49.873 131.1 0 180.986 24.201 24.191 56.33 37.503 90.506 37.503 34.208 0 66.337-13.312 90.538-37.503l293.513-293.495 293.513 293.495c24.169 24.191 56.331 37.503 90.506 37.503 34.208 0 66.369-13.312 90.506-37.503 24.201-24.159 37.5-56.318 37.5-90.493 0-34.207-13.299-66.366-37.5-90.525l-293.481-293.495 293.481-293.463c49.905-49.886 49.905-131.1 0-181.018-24.169-24.159-56.33-37.503-90.538-37.503-34.176 0-66.305 13.344-90.474 37.503l-293.481 293.463-293.513-293.495c-24.169-24.159-56.331-37.471-90.506-37.471z" />
<glyph unicode="" glyph-name="add" d="M614.4 550.4v409.6h-204.8v-409.6h-409.6v-204.8h409.6v-409.6h204.8v409.6h409.6v204.8z" />

同时也要创建scss来进行样式规定，

$color-background: rgb(255, 250, 250);
$color-background-d: rgba(179, 174, 174, 0.3);
$color-highlight-background: #333;
$color-dialog-background: #666;
$color-theme: #32adff;
$color-theme-d: rgba(49, 248, 255, 0.5);
$color-sub-theme: #e4e269;
$color-text: rgb(0, 0, 0);
$color-text-d: rgba(255, 255, 255, 0.3);
$color-text-l: rgba(32, 17, 17, 0.5);
$color-text-ll: rgba(31, 24, 24, 0.8);$font-size-small-s: 10px;
$font-size-small: 12px;
$font-size-medium: 14px;
$font-size-medium-x: 16px;
$font-size-large: 18px;
$font-size-large-x: 22px;

在这里我们要介绍一个重要的概念，也是vue的一个小特性，叫做mixin，

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

例如：

@mixin bg-image($url) {background-image: url($url + "@2x.png");@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {background-image: url($url + "@3x.png");}
}

我们通过mixin动态调用图片，同时这段代码还解决了一个问题，就是对不同的浏览器进行不同的图片大小的适应。只是因为移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小

我们通过@media来测试浏览器的类型，根据不同类型来调用是2x的图片还是3x的图片。

.bg-image {position: relative;width: 100%;transform-origin: top;background-size: cover;.play-btn-wrapper {position: absolute;bottom: 20px;z-index: 10;width: 100%;.play-btn {box-sizing: border-box;width: 135px;padding: 7px 0;margin: 0 auto;text-align: center;border: 1px solid $color-theme;color: $color-theme;border-radius: 100px;font-size: 0;}

用来设置背景图片的CSS样式，同时，由于有mixin定义，我们通过include方式调用：

.icon {display: inline-block;vertical-align: top;margin-top: 6px;width: 30px;height: 32px;margin-right: 9px;@include bg-image('logo');background-size: 30px 32px;}

三、小技巧

在SCSS文件夹中，我们会在设置一个总领目录index，这样能够方便调用。

【从0开始音乐demo的制作：预计耗时15小时(二)】简单的页面相关推荐

与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能...
原文:与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能 [源码下载] 与众不同 windows phone (40 ...
PHP制作音乐播放器制作教案,js制作简单的音乐播放器的示例代码
一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播 ...
HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
Android 音乐播放器制作(带有通知栏、Widget小挂件)
Android 音乐播放器制作(带有通知栏显示.Widget小挂件) 我用的开发工具是AndroidStudio,我的手机是Android7.1.2,我的另一个测试手机是Android8.0. 整个项 ...
基于Qt的音乐播放器制作
基于Qt的音乐播放器制作使用浏览器自带工具抓包歌曲资源开发人员工具抓包点击浏览器右上角的 "-" 快捷键(Alt + F): 点击其中的"更多工具" ➡ ...
Android音乐播放器制作（二）点击歌曲实现播放
上次我们实现了把手机里的音频扫描到,然后放在list集合里面,用ListView展示在手机界面上,如果没有看过的可以去看看本人的博客:Android音乐播放器制作(一)扫描本地音乐显示在手机上这次是 ...
Blender3.0电影级别CG场景制作视频教程
Blender 3.0的电影场景制作–8小时以上的主教程三本教程合三为一你会学到什么你将学习如何在Blender中建模你将学习如何在Blender中创建更复杂的纹理你将学习如何创建一个场景, ...
基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
getexternalfilesdir 相册_音乐相册(电子相册制作)V5.2 安卓最新版
音乐相册(电子相册制作)是一个功能强大的电子相册创建工具.最新版本的音乐专辑应用程序可以帮助用户快速创建精美的多媒体专辑视频,并匹配优美的音乐伴奏,使照片更精彩.音乐专辑应用程序支持几乎所有流行的图片 ...
计算机写配器音乐谱子,《电脑音乐配器与制作》教学思路及教材编写
<电脑音乐配器与制作>教学思路及教材编写湖南师范大学艺术学院音乐系匡勇胜电脑音乐自二十世纪九十年代初期在国内开始研究,十年来,已有长足的进步与发展,已由最初个体的尝试发展为规模性的教 ...

【从0开始音乐demo的制作：预计耗时15小时(二)】简单的页面

一、前言

二、字体与样式

三、小技巧

【从0开始音乐demo的制作：预计耗时15小时(二)】简单的页面相关推荐

最新文章

热门文章