php

php

php相关问题
html+css

html+css

JavaScript

JavaScript

js,jquery,vue.js等
Linux

Linux

Linux操作系统
Mysql

Mysql

各种资源

各种资源

开发工具,手册等
就业指导

就业指导

UI设计

UI设计

教学视频分享

教学视频分享

5个设计小技巧

UI设计寇老师 发表了文章 • 0 个评论 • 3 次浏览 • 22 小时前 • 来自相关话题

1.调整行间距

行间距大家都知道,但是具体如何设定值很多人不知道,一般我常用规则是 +4 ,比如文字大小是12PX,那么行间距就是16,以此类推文字是14,那么行间距就是18。

除了+4的规律你也可以运用黄金比例,文字大小X1.414,文字大小X1.616(1.414和1.616是黄金值)取四舍五入。

很多人要问,我如何判断界面里面用多大的行间距呢?道理很简单,就是看你们内容,如果你们app内容需要很丰富,你可以行间距小一些让屏幕展示更多内容,可以运用+4的原则,目前淘宝天猫是这个原则,如果你页面内容更加留白大一些阅读舒服一些,可以运用黄金比例的行间距,比如新闻阅读软件,需要大量留白来调整呼吸感!
 2.调整字间距

除了行间距,字间距同样很重要,特别是英文页面时候,同样的内容,字间距,和行间距不合适,看起来界面就会相差很多,有的看着很舒服,有的看起来说不出来哪里不对。

页面字母和字母之前距离非常的紧密,句子和句子之间的行间距也很近,导致阅读起来很密集,不够舒服,相反右边通过加大行间距和字间距,使得内容没有那么满,字母和字母之间的间距,行与行之间的间隔,使得整个设计节奏得到了一些舒缓!

需要注意的是:不要给太大的字间距,有时候过大也会让读者不舒服。


3.减少线 

在一个设计里面减少线条,或者让线条最少化,是让UI设计看起来干净的一种很重要的方法,通过间距来分割信息,加强内容和内容之间的间距,这样做,用户也是可以很清晰的区分信息层级。

需要注意的是:优先保证内容清晰,如果有些地方一定要用到线条,一定要使用它。


4.留白

页面放松和呼吸感在UI中非常重要,在左侧的设计中,元素之间的距离特别小,都挤在一个空间里面,非常的满。

要通过运用了版式,和空间感,有足够的空间让元素之间去呼吸让用户感觉舒服,让页面看起来更加的层次分明,利索干净。
 
 5运用卡片

在清晰度层面,使用卡片是帮助内容信息反馈的很好一种视觉形式,同时也让信息更加明确哪块是哪块。
 
卡片化设计在移动端让设计更加干净利落,是经常运用到的设计点。

总结

今天分享的几个小技巧点,其实是我们每天做设计中遇见的,需要灵活的多学多用,同时我们每天看到的一些好的设计,记得去留意分析,为什么别的设计好,别人设计看起来那么干净,毕加索说过:好的设计师借鉴,伟大的设计师偷。


1.加强行间距,+4原则或黄金比例

2.加大字间距: 0.1或0.2勿过大

3.减少线条,如非得已使用线

4.合理留白,拉开信息层级

5.运用卡片,更好整合信息
  查看全部
1.调整行间距

行间距大家都知道,但是具体如何设定值很多人不知道,一般我常用规则是 +4 ,比如文字大小是12PX,那么行间距就是16,以此类推文字是14,那么行间距就是18。

除了+4的规律你也可以运用黄金比例,文字大小X1.414,文字大小X1.616(1.414和1.616是黄金值)取四舍五入。

很多人要问,我如何判断界面里面用多大的行间距呢?道理很简单,就是看你们内容,如果你们app内容需要很丰富,你可以行间距小一些让屏幕展示更多内容,可以运用+4的原则,目前淘宝天猫是这个原则,如果你页面内容更加留白大一些阅读舒服一些,可以运用黄金比例的行间距,比如新闻阅读软件,需要大量留白来调整呼吸感!
 2.调整字间距

除了行间距,字间距同样很重要,特别是英文页面时候,同样的内容,字间距,和行间距不合适,看起来界面就会相差很多,有的看着很舒服,有的看起来说不出来哪里不对。

页面字母和字母之前距离非常的紧密,句子和句子之间的行间距也很近,导致阅读起来很密集,不够舒服,相反右边通过加大行间距和字间距,使得内容没有那么满,字母和字母之间的间距,行与行之间的间隔,使得整个设计节奏得到了一些舒缓!

需要注意的是:不要给太大的字间距,有时候过大也会让读者不舒服。


3.减少线 

在一个设计里面减少线条,或者让线条最少化,是让UI设计看起来干净的一种很重要的方法,通过间距来分割信息,加强内容和内容之间的间距,这样做,用户也是可以很清晰的区分信息层级。

需要注意的是:优先保证内容清晰,如果有些地方一定要用到线条,一定要使用它。


4.留白

页面放松和呼吸感在UI中非常重要,在左侧的设计中,元素之间的距离特别小,都挤在一个空间里面,非常的满。

要通过运用了版式,和空间感,有足够的空间让元素之间去呼吸让用户感觉舒服,让页面看起来更加的层次分明,利索干净。
 
 5运用卡片

在清晰度层面,使用卡片是帮助内容信息反馈的很好一种视觉形式,同时也让信息更加明确哪块是哪块。
 
卡片化设计在移动端让设计更加干净利落,是经常运用到的设计点。

总结

今天分享的几个小技巧点,其实是我们每天做设计中遇见的,需要灵活的多学多用,同时我们每天看到的一些好的设计,记得去留意分析,为什么别的设计好,别人设计看起来那么干净,毕加索说过:好的设计师借鉴,伟大的设计师偷。


1.加强行间距,+4原则或黄金比例

2.加大字间距: 0.1或0.2勿过大

3.减少线条,如非得已使用线

4.合理留白,拉开信息层级

5.运用卡片,更好整合信息
 

U190600班教学视频 - 20190722

教学视频分享寇老师 发表了文章 • 0 个评论 • 2 次浏览 • 23 小时前 • 来自相关话题

链接:https://pan.baidu.com/s/1PzVCCWMtqh7SI84E6GANzA
提取码:ui2q
复制这段内容后打开百度网盘手机App,操作更方便哦
链接:https://pan.baidu.com/s/1PzVCCWMtqh7SI84E6GANzA
提取码:ui2q
复制这段内容后打开百度网盘手机App,操作更方便哦

名片设计怎么做?

UI设计刘宇昆 发表了文章 • 0 个评论 • 13 次浏览 • 5 天前 • 来自相关话题

       好的名片设计都是在版式、字体、排印等多方面共同形成的。而不是简单的一个字体和印刷技术就能搞定的。所以我们在学习名片设计时候要多去注重字体排印细节、版式细节、字体使用方法等。简约的风格更能帮助用户查看信息

           



 
一款非常简约的名片,设计出来的标志只有一种颜色,创造性,简洁地采用了白色的背景,LOGO放在最显眼的地方(正面),是一个很好的表现方式,设计一款现代化的名片。在正面和背面的标志或图案,你可以列出相关的信息,包括名称,公司名称,标记线,和联系信息方式等。

           



 
       名片作为一种职业的独立媒体,在设计上要讲究其艺术性。但它同艺术作品有明显的区别,它不像其他艺术作品那样具有很高的审美价值,可以去欣赏,去玩味。它在大多情况下不会引起人的专注和追求,而是便于记忆,具有更强的识别性,让人在最短的时间内获得所需要的情报。因此名片设计必须做到文字简明扼要,字体层次分明,强调设计意识,艺术风格要新颖。
        名片设计可以采用横式来排名片版,也可以使用竖式和折卡式。您运用自己对名片内容的理解,把文字、图片、标志、色块、图形进行有机的排列组合,最后在电脑中形成名片。
       字体选择和色彩选择是名片的主要修饰手段。变换字体是名片设计的主要方式。名片上文字本来多,内容也没有必然的联系,所以可分散排列,每一内容的字体可以使用不同的字体,不同的字号大小,对字体进行特殊处理,也可使用不同的字体颜色;对名片的色彩,您可以使用照片,也可以使用色块,配合文字与商标的色彩,使名片更有美感。但名片的色彩选择,决定名片的价格,您只选择双色印刷,那么您无论印照片或色块,只能在三原色(红、绿、蓝)和黑色中选择两种进行搭配;您选择三色印刷,您选择的范围要大一点,可印出彩色图片;要想您印出的色彩更饱满,您最好选择四色印刷。 查看全部
       好的名片设计都是在版式、字体、排印等多方面共同形成的。而不是简单的一个字体和印刷技术就能搞定的。所以我们在学习名片设计时候要多去注重字体排印细节、版式细节、字体使用方法等。简约的风格更能帮助用户查看信息

           
v2-7849ccbd318caa6802777f6c37faf960_hd.jpg

 
一款非常简约的名片,设计出来的标志只有一种颜色,创造性,简洁地采用了白色的背景,LOGO放在最显眼的地方(正面),是一个很好的表现方式,设计一款现代化的名片。在正面和背面的标志或图案,你可以列出相关的信息,包括名称,公司名称,标记线,和联系信息方式等。

           
v2-bd14e9880b769dff058cccd644468c35_hd.jpg

 
       名片作为一种职业的独立媒体,在设计上要讲究其艺术性。但它同艺术作品有明显的区别,它不像其他艺术作品那样具有很高的审美价值,可以去欣赏,去玩味。它在大多情况下不会引起人的专注和追求,而是便于记忆,具有更强的识别性,让人在最短的时间内获得所需要的情报。因此名片设计必须做到文字简明扼要,字体层次分明,强调设计意识,艺术风格要新颖。
        名片设计可以采用横式来排名片版,也可以使用竖式和折卡式。您运用自己对名片内容的理解,把文字、图片、标志、色块、图形进行有机的排列组合,最后在电脑中形成名片。
       字体选择和色彩选择是名片的主要修饰手段。变换字体是名片设计的主要方式。名片上文字本来多,内容也没有必然的联系,所以可分散排列,每一内容的字体可以使用不同的字体,不同的字号大小,对字体进行特殊处理,也可使用不同的字体颜色;对名片的色彩,您可以使用照片,也可以使用色块,配合文字与商标的色彩,使名片更有美感。但名片的色彩选择,决定名片的价格,您只选择双色印刷,那么您无论印照片或色块,只能在三原色(红、绿、蓝)和黑色中选择两种进行搭配;您选择三色印刷,您选择的范围要大一点,可印出彩色图片;要想您印出的色彩更饱满,您最好选择四色印刷。

U190600班教学视频 - 20190717

教学视频分享寇老师 发表了文章 • 0 个评论 • 15 次浏览 • 6 天前 • 来自相关话题

链接:https://pan.baidu.com/s/1bwuSDMGY4kHw2rFNMksp5w
提取码:6xwj
复制这段内容后打开百度网盘手机App,操作更方便哦
链接:https://pan.baidu.com/s/1bwuSDMGY4kHw2rFNMksp5w
提取码:6xwj
复制这段内容后打开百度网盘手机App,操作更方便哦

设计方案决策指南

UI设计寇老师 发表了文章 • 0 个评论 • 12 次浏览 • 2019-07-16 09:01 • 来自相关话题

设计师、产品经理在做设计的过程中,不可避免的会遇到很多的方案决策。

面对众多设计方案时,如何去决策,按照什么标准去决策更有科学性和说服力,这是一个值得我们去思考的问题。

在日常工作中,我们经常遇到这种情况。产品经理完成初始原型图(设计图A)之后,到了交互设计师手上,交互设计师将产品经理的一些方案重新改了一遍,变成了现在的交互文档(设计图B)。

视觉设计师将交互文档按照自己的理解,重新做了一遍调整,变成了视觉稿(设计图C)。

最终的视觉稿在开发阶段,开发觉得不好,又和产品经理沟通,又改了一遍,形成了设计稿D。

以上这种情况是各个角色根据自己的理解,将设计方案进行修改,最终的设计方案都是在各个角色间妥协,形成一个折中方案。

这种过程造成了设计方案的决策过于随意,那么有没有一套完整的科学方法去决策设计方案呢?

本篇文章为设计方案的决策指南,旨在找到合理的方案去指导设计方案,并给予设计方案一个良好的决策方向。

文章大纲:

1.用户调研结论

2.用户反馈

3.灰度测试数据

4.三种标准的权重

5.方案确认/优化

6.总结

大纲可看出,通过用户调研结论、用户反馈、灰度测试数据三个参考标准的权重,综合可得到最终的方案确定/优化。

1.用户调研结论

大部分设计师和产品经理都很难代表最具有代表性的目标用户,我们的角色是尽可能的理解我们的用户并作出做合理的决策。

但是大部分情况是,我们以专家视角去看待问题,看待设计方案,容易忽视小白用户真正的诉求,忽略最真实最主要的用户使用场景,所以用户调研是我们了解真实用户和真实使用场景的渠道之一。

用户调研数据和结论可以给予我们一些参考,所以我们在做设计决策时,需要考虑用户调研数据。

参考条件:当用研介入的时,在保证用研科学正确的基础上,用研结论要当做重要的参考指标。

参考标准:当用研结论第一的数据超过第二名20%,我们就应该把第一条的结论当做主要参考标准。

2.用户反馈参考标准

这里的用户反馈是从建议反馈、应用商店或论坛等渠道提出的建议,通过这些反馈可以给予我们一些改进意见。

反馈说明:当产品上线之后,肯定会有用户反馈(好或者坏),产品体量越大,则反馈量就越多。我们应该根据用户的反馈占比来作为决策的重要指标。

参考标准:同一种类型的建议占总类型超过30%,当做主要参考指标。

3.灰度测试数据

产品更新迭代时,一般不会全部升级到最新的方案版本,会通过灰度版本慢慢过渡,一般都是先灰度10%然后20%、30%到最后50%,50%以后没问题就全量。

数据参考:灰度测试,新版灰度版本测试的数据和旧版数据对比

参考标准:数据好于之前的数据。则灰度测试当做最重要的参考。

4.三种标准的权重

三种参考标准具有明显的权重排序。一般情况下:灰度数据 > 用户反馈 > 用户调研。

所以参考标准从高到底分别为:灰度数据 、用户反馈、 用户调研。

5.方案确认/优化

1.灰度数据(好于之前) 方案确定。

2.用户反馈(同类型占比30%)产品优化。

3.用户调研(第一名高于第二名20%)产品参考。

有时候一个新需求,由于没有灰度数据,也没有用户反馈,这时候主要参考标准就是用户调研。当后续产品发布后,这时候主要当参考标准就是灰度数据了,其次看用户反馈。

当需求是对当前对产品进行优化迭代时,这时候只能先看用户反馈和用户调研。只有上线之后,才能参考灰度测试数据。

6.总结

每个团队的情况不一样,所以文章中提到的决策指南更需要整个团队共同努力。需要大家的彼此信任,才能更好的将产品设计方案不断的更新迭代做的更好。 查看全部
设计师、产品经理在做设计的过程中,不可避免的会遇到很多的方案决策。

面对众多设计方案时,如何去决策,按照什么标准去决策更有科学性和说服力,这是一个值得我们去思考的问题。

在日常工作中,我们经常遇到这种情况。产品经理完成初始原型图(设计图A)之后,到了交互设计师手上,交互设计师将产品经理的一些方案重新改了一遍,变成了现在的交互文档(设计图B)。

视觉设计师将交互文档按照自己的理解,重新做了一遍调整,变成了视觉稿(设计图C)。

最终的视觉稿在开发阶段,开发觉得不好,又和产品经理沟通,又改了一遍,形成了设计稿D。

以上这种情况是各个角色根据自己的理解,将设计方案进行修改,最终的设计方案都是在各个角色间妥协,形成一个折中方案。

这种过程造成了设计方案的决策过于随意,那么有没有一套完整的科学方法去决策设计方案呢?

本篇文章为设计方案的决策指南,旨在找到合理的方案去指导设计方案,并给予设计方案一个良好的决策方向。

文章大纲:

1.用户调研结论

2.用户反馈

3.灰度测试数据

4.三种标准的权重

5.方案确认/优化

6.总结

大纲可看出,通过用户调研结论、用户反馈、灰度测试数据三个参考标准的权重,综合可得到最终的方案确定/优化。

1.用户调研结论

大部分设计师和产品经理都很难代表最具有代表性的目标用户,我们的角色是尽可能的理解我们的用户并作出做合理的决策。

但是大部分情况是,我们以专家视角去看待问题,看待设计方案,容易忽视小白用户真正的诉求,忽略最真实最主要的用户使用场景,所以用户调研是我们了解真实用户和真实使用场景的渠道之一。

用户调研数据和结论可以给予我们一些参考,所以我们在做设计决策时,需要考虑用户调研数据。

参考条件:当用研介入的时,在保证用研科学正确的基础上,用研结论要当做重要的参考指标。

参考标准:当用研结论第一的数据超过第二名20%,我们就应该把第一条的结论当做主要参考标准。

2.用户反馈参考标准

这里的用户反馈是从建议反馈、应用商店或论坛等渠道提出的建议,通过这些反馈可以给予我们一些改进意见。

反馈说明:当产品上线之后,肯定会有用户反馈(好或者坏),产品体量越大,则反馈量就越多。我们应该根据用户的反馈占比来作为决策的重要指标。

参考标准:同一种类型的建议占总类型超过30%,当做主要参考指标。

3.灰度测试数据

产品更新迭代时,一般不会全部升级到最新的方案版本,会通过灰度版本慢慢过渡,一般都是先灰度10%然后20%、30%到最后50%,50%以后没问题就全量。

数据参考:灰度测试,新版灰度版本测试的数据和旧版数据对比

参考标准:数据好于之前的数据。则灰度测试当做最重要的参考。

4.三种标准的权重

三种参考标准具有明显的权重排序。一般情况下:灰度数据 > 用户反馈 > 用户调研。

所以参考标准从高到底分别为:灰度数据 、用户反馈、 用户调研。

5.方案确认/优化

1.灰度数据(好于之前) 方案确定。

2.用户反馈(同类型占比30%)产品优化。

3.用户调研(第一名高于第二名20%)产品参考。

有时候一个新需求,由于没有灰度数据,也没有用户反馈,这时候主要参考标准就是用户调研。当后续产品发布后,这时候主要当参考标准就是灰度数据了,其次看用户反馈。

当需求是对当前对产品进行优化迭代时,这时候只能先看用户反馈和用户调研。只有上线之后,才能参考灰度测试数据。

6.总结

每个团队的情况不一样,所以文章中提到的决策指南更需要整个团队共同努力。需要大家的彼此信任,才能更好的将产品设计方案不断的更新迭代做的更好。

U190600班教学视频 - 20190715

教学视频分享寇老师 发表了文章 • 0 个评论 • 11 次浏览 • 2019-07-15 14:37 • 来自相关话题

链接:https://pan.baidu.com/s/1aSkELmgreiqs8dVqScUQFg
提取码:7tjl
复制这段内容后打开百度网盘手机App,操作更方便哦
链接:https://pan.baidu.com/s/1aSkELmgreiqs8dVqScUQFg
提取码:7tjl
复制这段内容后打开百度网盘手机App,操作更方便哦

U190600班教学视频 - 20190712

教学视频分享寇老师 发表了文章 • 0 个评论 • 18 次浏览 • 2019-07-12 16:05 • 来自相关话题

链接:https://pan.baidu.com/s/13rdois8PHeKFf6jY8YcRZQ
提取码:uliq
复制这段内容后打开百度网盘手机App,操作更方便哦
链接:https://pan.baidu.com/s/13rdois8PHeKFf6jY8YcRZQ
提取码:uliq
复制这段内容后打开百度网盘手机App,操作更方便哦

打造自己的音乐播放器1 —— 播放页布局

JavaScript王老师 发表了文章 • 0 个评论 • 29 次浏览 • 2019-07-12 14:22 • 来自相关话题

在这个系列的文章中,我们将一步一步仿照网易云音乐APP的歌曲播放页来制作一个简单的音乐播放器,此篇文章及后续文章将会涉及到的知识点有:audio(音频播放标签)及其属性和事件方法、利用javascript来进行歌词匹配,音频可视化等。





 
以下是播放页的html结构代码:
<div class="player">
<div class="player-bg"></div>
<div class="player-main">
<div class="player-header">
<h3>我的一个道姑朋友</h3>
<span>双笙</span>
</div>
<div class="player-content">
<div class="cover">
<img src="cover/1.jpg">
</div>
<div class="lyrics"></div>
</div>
<div class="player-footer">
<div class="time-info">
<div class="start-time">00:00</div>
<div class="end-time">04:15</div>
<div class="time-process">
<div class="process-bar">
<div class="current">
<div class="point"></div>
</div>
</div>
</div>
</div>
<div class="control">
<a href="javascript:;" class="prev"><img src="img/prev.png"></a>
<a href="javascript:;" class="play"><img src="img/pause.png"></a>
<a href="javascript:;" class="next"><img src="img/next.png"></a>
</div>
</div>
</div>
</div>以下是播放页的css代码:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.player{
height: 100%;
}
.player-bg{
position: relative;
height: 100%;
background: rgba(255,255,255, 0.3) url(cover/1.jpg) no-repeat top center;
background-size: 200%;
filter: blur(40px);
}
.player-main{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
width: 100%;
}
.player-header{
width: 100%;
padding: 10px;
letter-spacing: 1px;
}
.player-header h3{
color: white;
font-weight: 100;
}
.player-header span{
color: #AFB1B1;
font-size: 16px;
}
.player-content{
height: 70%;
position: relative;
}
.player-content .cover{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 50px solid black;
border-radius: 50%;
overflow: hidden;
}
.player-content .cover img{
width: 100%;
animation: rotation 10s linear infinite ;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.player-footer{
position: fixed;
left: 0;
bottom: 20px;
width: 100%;
}
.player-footer img{
width: 40px;
height: 40px;
display: inline-block;
}
.time-info{
padding: 0 20px 20px;
overflow: hidden;
color: #B6BDBC;
}
.start-time{
width: 60px;
float: left;
text-align: center;
}
.end-time{
width: 60px;
float: right;
text-align: center;
}
.time-process{
margin: 0 60px;
position: relative;
}
.process-bar{
position: absolute;
top: 10px;
width: 100%;
border-top: 1px solid #B6BDBC;
}
.current{
width: 0;
border-bottom: 1px solid white;
}
.point{
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
cursor: pointer;
position: absolute;
top: -5px;
}
.control{
margin-top: 10px;
text-align: center;
}
.control a{
margin: 0 15px;
}
.control img{
vertical-align: middle;
}
.control .play img{
width: 64px;
height: 64px;
}
在后面的文章中,我们将会对现有的html和css代码进行增加和修改,以次来添加后续功能。
下篇预告:打造自己的音乐播放器2 —— 让歌曲播放和暂停、歌曲进度条增长、切换歌曲
  查看全部
在这个系列的文章中,我们将一步一步仿照网易云音乐APP的歌曲播放页来制作一个简单的音乐播放器,此篇文章及后续文章将会涉及到的知识点有:audio(音频播放标签)及其属性和事件方法、利用javascript来进行歌词匹配,音频可视化等。

1.png

 
以下是播放页的html结构代码:
<div class="player">
<div class="player-bg"></div>
<div class="player-main">
<div class="player-header">
<h3>我的一个道姑朋友</h3>
<span>双笙</span>
</div>
<div class="player-content">
<div class="cover">
<img src="cover/1.jpg">
</div>
<div class="lyrics"></div>
</div>
<div class="player-footer">
<div class="time-info">
<div class="start-time">00:00</div>
<div class="end-time">04:15</div>
<div class="time-process">
<div class="process-bar">
<div class="current">
<div class="point"></div>
</div>
</div>
</div>
</div>
<div class="control">
<a href="javascript:;" class="prev"><img src="img/prev.png"></a>
<a href="javascript:;" class="play"><img src="img/pause.png"></a>
<a href="javascript:;" class="next"><img src="img/next.png"></a>
</div>
</div>
</div>
</div>
以下是播放页的css代码:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.player{
height: 100%;
}
.player-bg{
position: relative;
height: 100%;
background: rgba(255,255,255, 0.3) url(cover/1.jpg) no-repeat top center;
background-size: 200%;
filter: blur(40px);
}
.player-main{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
width: 100%;
}
.player-header{
width: 100%;
padding: 10px;
letter-spacing: 1px;
}
.player-header h3{
color: white;
font-weight: 100;
}
.player-header span{
color: #AFB1B1;
font-size: 16px;
}
.player-content{
height: 70%;
position: relative;
}
.player-content .cover{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 50px solid black;
border-radius: 50%;
overflow: hidden;
}
.player-content .cover img{
width: 100%;
animation: rotation 10s linear infinite ;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.player-footer{
position: fixed;
left: 0;
bottom: 20px;
width: 100%;
}
.player-footer img{
width: 40px;
height: 40px;
display: inline-block;
}
.time-info{
padding: 0 20px 20px;
overflow: hidden;
color: #B6BDBC;
}
.start-time{
width: 60px;
float: left;
text-align: center;
}
.end-time{
width: 60px;
float: right;
text-align: center;
}
.time-process{
margin: 0 60px;
position: relative;
}
.process-bar{
position: absolute;
top: 10px;
width: 100%;
border-top: 1px solid #B6BDBC;
}
.current{
width: 0;
border-bottom: 1px solid white;
}
.point{
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
cursor: pointer;
position: absolute;
top: -5px;
}
.control{
margin-top: 10px;
text-align: center;
}
.control a{
margin: 0 15px;
}
.control img{
vertical-align: middle;
}
.control .play img{
width: 64px;
height: 64px;
}

在后面的文章中,我们将会对现有的html和css代码进行增加和修改,以次来添加后续功能。
下篇预告:打造自己的音乐播放器2 —— 让歌曲播放和暂停、歌曲进度条增长、切换歌曲
 

HTML语义化简介 —— 主体结构标签

html+css王老师 发表了文章 • 0 个评论 • 30 次浏览 • 2019-07-12 13:47 • 来自相关话题

       HTML5标准规范制定完成发布已经好几年了,大家面试时也遇到了不少面试官“你怎么理解HTML5语义化”类似问题的提问。但其实我们日常工作中,真正使用HTML5语义化标签来开发的情况几乎微乎其微。
       
       什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

       语义化优点(面试重点):
       易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
       有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
       有利于开发和维护,语义化更具可读性,代码更好维护。

       这次介绍下主体结构标签,如图所示:
     
         




         1、<header>

        <header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

        在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

       2、<nav>

        <nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

        在一个文档中,可定义多个<nav>元素。

       3、<main>

       <main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

       需要注意的是在一个文档中不能出现多个<main>标签。

       4、<article>

       <article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

       当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

       5、<aside>

       <aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

       6、<footer>

       <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

       使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

       7、<section>

      <section>表示文档中的一个区域(或节),比如,内容中的一个专题组。

      如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
      不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。

  查看全部
       HTML5标准规范制定完成发布已经好几年了,大家面试时也遇到了不少面试官“你怎么理解HTML5语义化”类似问题的提问。但其实我们日常工作中,真正使用HTML5语义化标签来开发的情况几乎微乎其微。
       
       什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

       语义化优点(面试重点)
       易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
       有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
       有利于开发和维护,语义化更具可读性,代码更好维护。

       这次介绍下主体结构标签,如图所示:
     
         
1.png


         1、<header>

        <header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

        在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

       2、<nav>

        <nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

        在一个文档中,可定义多个<nav>元素。

       3、<main>

       <main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

       需要注意的是在一个文档中不能出现多个<main>标签。

       4、<article>

       <article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

       当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

       5、<aside>

       <aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

       6、<footer>

       <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

       使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

       7、<section>

      <section>表示文档中的一个区域(或节),比如,内容中的一个专题组。

      如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
      不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。

 

你不知道的AI技巧

UI设计刘宇昆 发表了文章 • 0 个评论 • 27 次浏览 • 2019-07-12 10:00 • 来自相关话题

                                                                 









 
                                                                 
100040jjwsqo5fpbzomj5f.png


100040iatoyr3bixabxg6b.png