从零开始学前端
从零开始学前端

怎么隐藏audio播放器的播放进度条，只保留播放按钮？

怎么隐藏audio播放器的播放进度条，只保留播放按钮？

怎么隐藏audio播放器的播放进度条，只保留播放按钮？_第1张图片

截图
怎么隐藏audio播放器的播放进度条，只保留播放按钮？_第2张图片

在页面最右边的button中嵌套了audio音频播放器，播放器默认的样式有一个播放进度条，导致页面宽度被撑开了，布局被破坏。

第一种：



第二种：


如果去掉controls值，可以隐藏播放进度条，但是整个播放器也无法播放了。
把control更换成autoplay虽然解决了进度条的问题，但是又无法控制背景音乐的暂停功能了。

深圳分院|内门弟子] JS-黄麒二

可以隐藏默认样式，切个图，引入一个js文件，使用onclick事件点击图标触发播放或暂停

[外门弟子] JS-7

方法一

   1    添加音频控件     autoplay="autoplay

   2   设置宽高   只剩下  播放按钮

  3   定位到   你想要的地方

  4  设置成   完全透明       自己看   用  rgba  透明还是   opacity

  5   设置   自己想不说了

方法二

  添加js

你可能感兴趣的:(从零开始学前端)

  • 从零开始学前端 - 10. JS运算符 她不美却常驻我心 从零开始学前端JScssjavascripthtml5htmlvue.js
    作者:她不美却常驻我心博客地址:https://blog.csdn.net/qq_39506551微信公众号：老王的前端分享每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。从零开始学前端-10.JavaScript运算符一、算术运算符1.加法运算法2.减法运算符3.取余数运算符4.自增运算符++二、赋值运算符三、比较运算符四、逻辑运算符五、三元运算符六、类型判断1.typ
  • 2019-04-17 天青lenk
    从零开始学前端入门html+css慕课课程，8小时，反复敲上几遍即可。freeCodeCamp2018年新版课程学完慕课的课程后建议在fcc里刷完响应式web设计栏目，实战页面至少要能做出两三个。这时你基本已经能做出一些算是好看的页面了，开始步入正题。JavaScriptJavaScript教程很多，这里只列举一些自己看过而且觉得不错的。喜欢看书的同学，可以从《javascript高级程序教育》>
  • 从零开始学前端 - 4. CSS基础知识 她不美却常驻我心 从零开始学前端CSShtmlcssjavascriptvue.jsnode.js
    作者:她不美却常驻我心博客地址:https://blog.csdn.net/qq_39506551微信公众号：老王的前端分享每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。从零开始学前端-4.CSS基础一、CSS简介二、基本语法三、CSS的书写位置1.外部样式表（外联）2.内部样式（内嵌）3.内联样式（行内）4.样式优先级四、CSS选择器1.标签选择器2.id选择器3.c
  • 从零开始学前端 - 6. CSS浮动float详解及清除浮动的方法 她不美却常驻我心 从零开始学前端CSShtmlcsscss3es6node.js
    作者:她不美却常驻我心博客地址:https://blog.csdn.net/qq_39506551微信公众号：老王的前端分享每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。从零开始学前端-6.CSS浮动属性float详解一、文档流二、左浮动三、右浮动四、高度塌陷清除浮动五、总结一、文档流  浮动可以说是CSS中的重点属性了，CSS的初学者往往会在浮动上遇到第一个难题，接下
  • 从零开始学前端 - 34. JS事件对象Event详解 她不美却常驻我心 从零开始学前端JS前端
    我们在前两篇文章中对JS中的事件做了一个整体的介绍，其中有一个Event属性对事件的作用十分重要，本篇文章我们就对它做一个详细的解读。从零开始学前端-34.JS事件对象Event详解一、什么是事件对象Event二、Event属性三、Event方法四、模拟事件4.1模拟鼠标事件4.2模拟键盘事件4.3模拟其他事件4.4自定义DOM事件五、Event的兼容性处理一、什么是事件对象Event  每一个事
  • 从零开始学前端：键盘事件、小球运动 --- 今天你学习了吗？（JS：Day21） Coisini_甜柚か 从零开始学前端前端javascript学习
    从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）复习：从零开始学前端：DOM、BOM、焦点事件、键盘事件—今天你学习了吗？（JS：Day20）文章目录从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）前言第二十一节课：键盘事件、小球运动一、键盘事件案例一：通过在输入框输入文字，触发事件案例二：组合键二、小球运动案例一：简单小球运动案例二：多个小球运动案例三：多
  • 从零开始学前端：事件对象，事件冒泡，事件捕获 --- 今天你学习了吗？（JS：Day22-23） Coisini_甜柚か 从零开始学前端javascript前端学习
    从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）复习：从零开始学前端：键盘事件、小球运动—今天你学习了吗？（JS：Day21）文章目录从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）前言第二十二~二十三节课：事件对象，事件冒泡，事件捕获一、事件对象1、事件对象2、冒泡事件3、事件监听4、事件捕获（true）（1）捕获与冒泡的执行（2）低版本IE处理5、低版本
  • 从零开始学前端 - 3. HTML 常用标签_2 她不美却常驻我心 从零开始学前端HTMLjavascriptcssvue.jshtmlhtml5
    作者:她不美却常驻我心博客地址:https://blog.csdn.net/qq_39506551微信公众号：老王的前端分享每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。从零开始学前端-2.HTML常用标签_2六超链接1.URL1.1绝对URL1.2相对URL1.3锚点URL2.target2.1_self2.2_blank2.3_parent2.4_top3.down
  • 从零开始学前端：grid布局和音频 --- 今天你学习了吗？（Day24） Coisini_甜柚か 从零开始学前端前端动画学习
    从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day24）复习：从零开始学前端：OPPO商城轮播图—今天你学习了吗？（Day23）文章目录从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day24）前言第二十四节课：grid布局和音频一、grid网格布局二、gird容器属性三、grid容器属性值四、grid属性设置单元格距离五、grid布局容器属性六、grid容器属性
  • 从零开始学前端-最适合小白的JavaScript入门教程 link可 Java编程语言jsjavascriptjavapythonhtml
    Javascript，从“最被误解的语言”，最后神奇地转变成为“最流行的语言”，证明它经受得起时间的考验。虽然单独来看，它的交互设计有些失败，但是加上Ajax的完美配合，javascript就成了一款轻便并且又实用的好语法。如果想要更高效、更系统地学会javascript，最好采用边学边练的学习模式。如果觉得javascript的学习难度较高，不易理解，建议采用视频的方式进行学习，更易初学者吸收：
  • class 原生js获取父元素_从零开始学前端 30. JS选择器 weixin_39867200 class原生js获取父元素
    每篇文章纯属个人经验观点，如有错误疏漏欢迎指正由于微信公众号对英文的排版十分困难以获得更好的阅读体验类似于CSS选择器，如果我们想要使用JS来对HTML页面中的元素实现一对一，一对多或者多对一的控制，必须先通过选择器来获得该元素，然后在对它进行相应的操作，选择器的种类有很多，但它们的目的是一样的，那就是把想要的元素选中，需要我们根据不同的情况选择相应的选择器。一、原生JS选择器1.ID选择器概述：
  • iOS转前端的学习记录 Jovi 前端学习javascriptvue.js
    第一篇博文，写在从零开始学前端的两个月后，期间经过了春节，之后又经历了一些动荡。算是在边做边学中坚持下来，现在基本上可以完成一些业务逻辑上的开发工作。想到应该总结一下这两个月的学习，也是对自己的知识掌握情况做一个梳理。我的第一个项目是一个基于vue和element-ui的后台管理系统，当时我还没有任何的前端开发知识，时间也比较紧，就在学习html、css和javascript的基础后，有针对性的对
  • react 前端学习资源整理 溪岚画 前端
    总体2019年Web前端入门的自学路线https://www.cnblogs.com/qianguyihao/p/8776837.html前端入门和进阶学习笔记，超详细的Web前端学习图文教程。从零开始学前端，做一个Web全栈工程师。https://github.com/qianguyihao/Webreact相关react官方文档：https://reactjs.org/docs/getting
  • 从零开始学前端：HTML解析过程 FBm2016 ---【从零开始学前端】
    从事前端工作，也有近两年时间，但对前端知识体系没有系统学习或整理。为了巩固自己的基础以及更深入学习前端的技术，博主将从零开始学前端。并将学习过程记录以及所有知识点记录在《从零开始学前端》系列帖子。浏览器渲染HTML过程每个浏览器有自带的渲染引擎，用来渲染内容。浏览器可以渲染html、xml或者渲染其他内容。但此处只讨论html及css的渲染过程。目前主流的几款浏览器，Firefox、Chrome和
  • 从零开始学前端 - 9. JavaScript 基础 她不美却常驻我心 从零开始学前端JS
    作者:她不美却常驻我心博客地址:https://blog.csdn.net/qq_39506551微信公众号：老王的前端分享每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。从零开始学前端-9.JavaScript基础一、JavaScript简介1.简介2.什么是脚本语言？3.特点4.名词解释二、书写位置1.外部2.内部三、JavaScript基本语法3.1基本语法3.2注
  • [从零开始学前端]html创建与html基础结构 红缨老枪 前端
    因为毕设有需要用到前端的东西，而我从来没有接触过，之前一直是写后台的代码，只能从零开始学，现在毕设完成了，个人记性又不是很好，写个博客保存一下。说一下系统环境：PC系统：windows101909版本使用编译软件：IntelliJWebStorm测试浏览器：chrome(谷歌浏览器)创建项目打开webstrom后点CreateNewProject后看见下图说实话，除了第一个剩下的我都不知道干什么的
  • 都是从零开始学前端，3年后，为啥有人月薪 10k，有人却 40k 前端向南 前端web前端
    正在初学者学习一门新技术往往不知道如何开始，从哪开始，终点是啥。为啥有人月薪10k，有人却40k，就看你的技术能不能提高生产率，创造更多价值。学习前端也是这样，要系统全面，前期一定要有刨根问底的精神，遇到问题要究其原因，直到解决为止。下面我把前端需要掌握的技术点做一个总结。1.基础知识学会下面这些基本知识，能够写出基本的页面，不同的布局样式。2.动态性动态性是指通过document可以动态修改HT
  • 前端共同成长小组 学习流程 九彩拼盘
    1选择学习的知识点如果你是从零开始学前端的，按照我们制定的学习路线一步步来学。开始学习点这里。如果你对前端有些了解，进入知识点列表页（待做），自主选择要学习的知识点。点这里。2查看知识点介绍进入知识点介绍的文章。如果决定要学，给这篇文章点赞。3学习学习知识点介绍中推荐的学习资源。带着要达成的学习目标去学习。如果遇到问题，按照遇到技术问题，该如何提问方式在Segmentfault上提问。将问题的链接
  • HQL之投影查询 归来朝歌 HQLHibernate查询语句投影查询
            在HQL查询中，常常面临这样一个场景，对于多表查询，是要将一个表的对象查出来还是要只需要每个表中的几个字段，最后放在一起显示？ 针对上面的场景，如果需要将一个对象查出来： HQL语句写“from 对象”即可 Session session = HibernateUtil.openSession();
  • Spring整合redis bylijinnan redis
    pom.xml <dependencies> <!-- Spring Data - Redis Library --> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redi
  • org.hibernate.NonUniqueResultException: query did not return a unique result: 2 0624chenhong Hibernate
    参考：http://blog.csdn.net/qingfeilee/article/details/7052736 org.hibernate.NonUniqueResultException: query did not return a unique result: 2         在项目中出现了org.hiber
  • android动画效果 不懂事的小屁孩 android动画
    前几天弄alertdialog和popupwindow的时候，用到了android的动画效果，今天专门研究了一下关于android的动画效果，列出来，方便以后使用。 Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。 第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。
  • js delete 删除机理以及它的内存泄露问题的解决方案 换个号韩国红果果 JavaScript
    delete删除属性时只是解除了属性与对象的绑定，故当属性值为一个对象时，删除时会造成内存泄露  （其实还未删除） 举例： var person={name:{firstname:'bob'}} var p=person.name delete person.name p.firstname -->'bob' // 依然可以访问p.firstname，存在内存泄露
  • Oracle将零干预分析加入网络即服务计划 蓝儿唯美 oracle
    由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是，Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务（NaaS）平台，帮助企业以更灵活和更适合云的方式实现通信服务提供商（CSP）的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计
  • spring学习——springmvc（二） a-john springMVC
    Spring MVC提供了非常方便的文件上传功能。 1，配置Spring支持文件上传： DispatcherServlet本身并不知道如何处理multipart的表单数据，需要一个multipart解析器把POST请求的multipart数据中抽取出来，这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器，需要声明一个实现了Mul
  • POJ-2828-Buy Tickets aijuans ACM_POJ
    POJ-2828-Buy Tickets http://poj.org/problem?id=2828 线段树，逆序插入 #include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct
  • Java Ant build.xml详解 asia007 build.xml
    1,什么是antant是构建工具2,什么是构建概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个3,ant的好处跨平台   --因为ant是使用java实现的，所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有
  • android按钮监听器的四种技术 百合不是茶 androidxml配置监听器实现接口
    android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方;    1,activity中使用内部类实现接口 ,创建内部类实例  使用add方法  与java类似   创建监听器的实例 myLis lis = new myLis();   使用add方法给按钮添加监听器  
  • 软件架构师不等同于资深程序员 bijian1013 程序员架构师架构设计
            本文的作者Armel Nene是ETAPIX Global公司的首席架构师，他居住在伦敦，他参与过的开源项目包括 Apache Lucene,，Apache Nutch， Liferay 和 Pentaho等。         如今很多的公司
  • TeamForge Wiki Syntax & CollabNet User Information Center sunjing TeamForgeHow doAttachementAnchorWiki Syntax
    the CollabNet user information center http://help.collab.net/   How do I create a new Wiki page? A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and
  • 【Redis四】Redis数据类型 bit1129 redis
    概述 Redis是一个高性能的数据结构服务器，称之为数据结构服务器的原因是，它提供了丰富的数据类型以满足不同的应用场景，本文对Redis的数据类型以及对这些类型可能的操作进行总结。 Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统，这里的数据类型指的是value的类型，而不是key的类型，key的类型只有一种即string
  • SSH2整合-附源码 白糖_ eclipsespringtomcatHibernateGoogle
    今天用eclipse终于整合出了struts2+hibernate+spring框架。 我创建的是tomcat项目，需要有tomcat插件。导入项目以后，鼠标右键选择属性，然后再找到“tomcat”项，勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片，sql也在源码里。     补充1：项目中部分jar包不是最新版的，可能导
  • [转]开源项目代码的学习方法 braveCS 学习方法
    转自： http://blog.sina.com.cn/s/blog_693458530100lk5m.html http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html   1）阅读features。以此来搞清楚该项目有哪些特性2）思考。想想如果自己来做有这些features的项目该如何构架3）下载并安装d
  • 编程之美-子数组的最大和（二维） bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; import java.util.Random; public class MaxSubArraySum2 { /** * 编程之美 子数组之和的最大值（二维） */ private static final int ROW = 5; private stat
  • 读书笔记-3 chengxuyuancsdn jquery笔记resultMap配置ibatis一对多配置
    1、resultMap配置 2、ibatis一对多配置 3、jquery笔记 1、resultMap配置 当<select resultMap="topic_data"> <resultMap id="topic_data">必须一一对应。 (1)<resultMap class="tblTopic&q
  • [物理与天文]物理学新进展 comsci
          如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境       怎么办呢?  
  • Oracle 11g新特性:Automatic Diagnostic Repository daizj oracleADR
    Oracle Database 11g的FDI（Fault Diagnosability Infrastructure）是自动化诊断方面的又一增强。 FDI的一个关键组件是自动诊断库（Automatic Diagnostic Repository-ADR）。 在oracle 11g中，alert文件的信息是以xml的文件格式存在的，另外提供了普通文本格式的alert文件。 这两份log文
  • 简单排序:选择排序 dieslrae 选择排序
    public void selectSort(int[] array){ int select; for(int i=0;i<array.length;i++){ select = i; for(int k=i+1;k<array.leng
  • C语言学习六指针的经典程序，互换两个数字 dcj3sjt126com c
    示例程序，swap_1和swap_2都是错误的，推理从1开始推到2，2没完成，推到3就完成了 # include <stdio.h> void swap_1(int, int); void swap_2(int *, int *); void swap_3(int *, int *); int main(void) { int a = 3; int b =
  • php 5.4中php-fpm 的重启、终止操作命令 dcj3sjt126com PHP
    php 5.4中php-fpm 的重启、终止操作命令: 查看php运行目录命令：which php/usr/bin/php 查看php-fpm进程数：ps aux | grep -c php-fpm 查看运行内存/usr/bin/php  -i|grep mem 重启php-fpm/etc/init.d/php-fpm restart 在phpinfo()输出内容可以看到php
  • 线程同步工具类 shuizhaosi888 同步工具类
    同步工具类包括信号量（Semaphore）、栅栏（barrier）、闭锁（CountDownLatch）   闭锁（CountDownLatch） public class RunMain { public long timeTasks(int nThreads, final Runnable task) throws InterruptedException { fin
  • bleeding edge是什么意思 haojinghua DI
    不止一次，看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件，上了wiki。  我再一次感到，没有辞典能像WiKi一样，给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱，只好在此一一中英对照，给大家上次课。   In computer science, bleeding edge is a term that
  • c中实现utf8和gbk的互转 jimmee ciconvutf8&gbk编码
    #include <iconv.h> #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <fcntl.h> #include <string.h> #include <sys/stat.h> int code_c
  • 大型分布式网站架构设计与实践 lilin530 应用服务器搜索引擎
    1.大型网站软件系统的特点？ a.高并发，大流量。 b.高可用。 c.海量数据。 d.用户分布广泛，网络情况复杂。 e.安全环境恶劣。 f.需求快速变更，发布频繁。 g.渐进式发展。 2.大型网站架构演化发展历程？ a.初始阶段的网站架构。 应用程序，数据库，文件等所有的资源都在一台服务器上。 b.应用服务器和数据服务器分离。 c.使用缓存改善网站性能。 d.使用应用
  • 在代码中获取Android theme中的attr属性值 OliveExcel androidtheme
    Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西.   在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则: int defaultColor = 0xFF000000; int[] attrsArray = { andorid.r.
  • 基于Zookeeper的分布式共享锁 roadrunners zookeeper分布式共享锁
    首先，说说我们的场景，订单服务是做成集群的，当两个以上结点同时收到一个相同订单的创建指令，这时并发就产生了，系统就会重复创建订单。等等......场景。这时，分布式共享锁就闪亮登场了。   共享锁在同一个进程中是很容易实现的，但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译，这里就不在赘述了。   官
  • 两个容易被忽略的MySQL知识 tomcat_oracle mysql
    1、varchar(5)可以存储多少个汉字，多少个字母数字？ 　　相信有好多人应该跟我一样，对这个已经很熟悉了，根据经验我们能很快的做出决定，比如说用varchar(200)去存储url等等，但是，即使你用了很多次也很熟悉了，也有可能对上面的问题做出错误的回答。 　　这个问题我查了好多资料，有的人说是可以存储5个字符，2.5个汉字（每个汉字占用两个字节的话），有的人说这个要区分版本，5.0
  • zoj 3827 Information Entropy(水题) 阿尔萨斯 format
    题目链接：zoj 3827 Information Entropy 题目大意：三种底，计算和。 解题思路：调用库函数就可以直接算了，不过要注意Pi = 0的时候，不过它题目里居然也讲了。。。limp→0+plogb(p)=0，因为p是logp的高阶。 #include <cstdio> #include <cstring> #include <cmath&
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他