html5-smile-music-player.rar

  • PUDN用户
    了解作者
  • JavaScript
    开发工具
  • 84KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 3
    下载次数
  • 2016-10-31 10:34
    上传日期
html5实现的笑脸音乐播放器,画风新奇
html5-smile-music-player.rar
  • html5-smile-music-player
  • js
  • index.js
    2.1KB
  • css
  • style.css
    4.3KB
  • iconfont
  • demo.css
    2.7KB
  • iconfont.svg
    5.9KB
  • iconfont.css
    1KB
  • demo.html
    3.8KB
  • iconfont.woff
    4.4KB
  • iconfont.eot
    6.9KB
  • iconfont.ttf
    6.6KB
  • music.mp3
    66.8KB
  • index2.html
    1.6KB
  • index.html
    520B
内容介绍
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="iconfont.css"> </head> <body> <div class="main"> <h1>IconFont 图标</h1> <ul class="icon_lists clear"> <li> <i class="icon iconfont">&#xe607;</i> <div class="name">撤销上一次动作</div> <div class="code">&amp;#xe607;</div> <div class="fontclass">.chexiaoshangyicidongzuo</div> </li> <li> <i class="icon iconfont">&#xe608;</i> <div class="name">音量</div> <div class="code">&amp;#xe608;</div> <div class="fontclass">.yinliang</div> </li> <li> <i class="icon iconfont">&#xe602;</i> <div class="name">暂停</div> <div class="code">&amp;#xe602;</div> <div class="fontclass">.icon12</div> </li> <li> <i class="icon iconfont">&#xe600;</i> <div class="name">播放</div> <div class="code">&amp;#xe600;</div> <div class="fontclass">.iconfontcolor95</div> </li> <li> <i class="icon iconfont">&#xe603;</i> <div class="name">暂停</div> <div class="code">&amp;#xe603;</div> <div class="fontclass">.iconfontcolor96</div> </li> <li> <i class="icon iconfont">&#xe604;</i> <div class="name">播放器-暂停</div> <div class="code">&amp;#xe604;</div> <div class="fontclass">.bofangqizanting</div> </li> <li> <i class="icon iconfont">&#xe601;</i> <div class="name">主题-暂停</div> <div class="code">&amp;#xe601;</div> <div class="fontclass">.zhutizanting</div> </li> <li> <i class="icon iconfont">&#xe605;</i> <div class="name">面型图标_视频、播放</div> <div class="code">&amp;#xe605;</div> <div class="fontclass">.mianxingtubiaoshipinbofang</div> </li> <li> <i class="icon iconfont">&#xe606;</i> <div class="name">面型图标_暂停</div> <div class="code">&amp;#xe606;</div> <div class="fontclass">.mianxingtubiaozanting</div> </li> </ul> <div class="helps"> 第一步:使用font-face声明字体 <pre> @font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } </pre> 第二步:定义使用iconfont的样式 <pre> .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;} </pre> 第三步:挑选相应图标并获取字体编码,应用于页面 <pre> &lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt; </pre> </div> </div> </body> </html>
评论
    相关推荐
    • 数据库课程设计
      数据库课程设计使用,使用MFC编写的界面,连接ODBC数据源,方便移植。
    • 数据库课程设计
      一个数据库课程设计,access管理工具实现,用的是窗体!
    • 数据库课程设计
      广东工业大学数据库课程设计,可视化界面连接数据库,delphi7
    • 数据库课程设计
      数据库课程设计实验及其描述 数据库课程设计实验及其描述 数据库课程设计实验及其描述 数据库课程设计实验及其描述 数据库课程设计实验及其描述 数据库课程设计实验及其描述
    • 数据库课程设计
      数据库课程设计》由周爱武、汪海威、肖云编著,遵循数据库课程设计的具体要求,独立于具体的数据库教材,从实际应用系统的需求着手,引导读者逐步完成数据库设计全过程,重点讲解数据库系统的需求分析、概念设计、...
    • 数据库课程设计
      数据库课程设计人事管理系统 数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计人事管理系统数据库课程设计...
    • 数据库课程设计
      数据库课程设计,基于visual basic自助银行管理系统,界面很清爽,实用。同学都说好,所以就上传了!!!
    • 数据库课程设计
      数据库课程设计 里面有详细的文档资料 包含数据库一切的图 以及生成的数据库表文件 期末得分为优秀
    • 数据库课程设计
      可以作为数据库课程设计,也可以作为Java的课程设计,内容全面。本资源转载的,非本人原创。用于交流学习,特此申明!
    • 数据库课程设计
      数据库课程设计蓝天大学学生管理系统 2.商店信息管理系统 3.实验室机房收费管理系统 4.图书馆资料检索系统 5.企业库存管理系统 6.仓库管理系统 7.工程项目管理系统 8.教材管理系统 9.企业人事管理系统 10.企业财务...