百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

H5 音乐播放实例，音乐详情页制作，开头很重要

yuyutoo 2024-10-19 11:05 2 浏览 0 评论

本教程是一个H5音乐播放的详情页制作，实现了H5音乐播放，音轨的跳动，已经较为酷炫的UI界面。

通过本教程，您会学到：

1、H5音乐播放 （带音轨）

2、iconfont字体图标库

3、div+css网页布局

前端技术：js，jQuery，css ，bootstrap，iconfont

后台技术：php

数据库：mysql

首先，看一下页面的布局：

基本上用div+css的技术就可以实现。

1.1 标题区域

先新建一个detail.php (如果没有php的环境，就把后缀名修改为.html即可)。

<html>
 
 <head>
 <meta charset="utf-8">
 <title>音乐详情页</title>
 <style type="text/css">
 
 </style>
 </head>
 <body>
 
 </body>
</html>

我们设置标题区域的可见宽度为950px，居中。背景色设置为黑色（#000）

效果：

现在做登录和注册模块，考虑画一个div并且向右浮动。

这个效果非常丑，因为a标签默认就有一个蓝色的样式和下划线，所以，我们需要对这两个a标签的样式进行调整。

我们把logo和菜单看成一个整体，就header中就是往左浮动的DIV。

效果：

在这个DIV中，靠左的是一个LOGO （150px * 60px）。

因为字体默认是黑色的，所以还需要对logo的div做一点css修改。

效果：

画好了LOGO，在它的右边，就是菜单选项。

至于菜单项，我们一般采用ul , li 来制作。

效果：

同样的，要去修改一下这里a标签的样式。

又因为li元素默认是有小圆点的。我们需要把li的小圆点去掉，同时设置高度和header保持一致，都为60px。

接下来，我们要引入iconfont字体图标库，每一个菜单项左边，都需要一个彩色图标。

把这个文件夹拷贝到项目根目录：

再在detail.php中引入其中的css文件和js文件。

引入彩色图标。

我们再给这个svg图标添加一个左浮动：

可以看到首页两个字跑到上面的去了，那是因为我们还没有给li元素加行高。

现在，就让首页两个字垂直居中，方法就是给li加上60px的行高。

我们还发现，li元素占据了一整行：

原来，li也是块级元素，会默认占满一整行，因此，我们需要对li进行一些修饰，比如，将其宽度设置为100px。

加上去以后，发现li被挤下来了：

这是因为li元素的外层ul元素，我们没有加上浮动，因此被挤下来了。解决方法就是给ul加上左浮动，让你紧跟在logo的右侧。

其他几个菜单项也依次类推：

<ul>
 <li>
 
 <a href="javascript:void(0)">
 <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
 <use xlink:href="#icon-squirtle"></use>
 </svg>
 首页
 </a>
 </li>
 <li>
 
 <a href="javascript:void(0)">
 <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
 <use xlink:href="#icon-squirtle"></use>
 </svg>
 专题
 </a>
 </li>
 <li>
 
 <a href="javascript:void(0)">
 <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
 <use xlink:href="#icon-squirtle"></use>
 </svg>
 单曲
 </a>
 </li>
 <li>
 
 <a href="javascript:void(0)">
 <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
 <use xlink:href="#icon-squirtle"></use>
 </svg>
 论坛
 </a>
 </li>
 </ul>

效果：

发现每一个菜单项（li）竖着排下来了，因此li也需要加浮动。

然后，给每一个li加一点右边距：

效果：

然后再把图标换成其他的彩色图标。

<div class="h_left">
 <div class="logo">150X60的LOGO</div>
 <ul>
 <li>
 
 <a href="javascript:void(0)">
 <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
 <use xlink:href="#icon-squirtle"></use>
 </svg>
 首页
 </a>
 </li>
 <li>
 
 <a href="javascript:void(0)">
 <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
 <use xlink:href="#icon-pikachu-"></use>
 </svg>
 专题
 </a>
 </li>
 <li>
 
 <a href="javascript:void(0)">
 <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
 <use xlink:href="#icon-bullbasaur"></use>
 </svg>
 单曲
 </a>
 </li>
 <li>
 
 <a href="javascript:void(0)">
 <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
 <use xlink:href="#icon-aoliao"></use>
 </svg>
 论坛
 </a>
 </li>
 </ul>
 </div>

相关推荐

Google Chrome 100 Beta发布 用户代理字符串作用开始逐渐降低

GoogleChrome和MozillaFirefox都在迅速接近100版本，这有可能破坏一些错误识别浏览器版本的网站（可能导致访问不正常，这有点类似于众所周知的千年虫）。两种浏览器都在研究可能的...

如何在Chrome，Edge，Safari和Firefox中更改用户代理

无论您是SEO，营销人员还是Web开发人员，通常都可能需要更改浏览器的用户代理以测试其他内容。例如，您正在运行特定于MAC-OS的活动。要确定您的广告系列是否正常运行并且未针对Linux用户，更改浏览...

Mozilla正在测试新的浏览器UserAgent

Mozilla最近发布了一个实验项目来测试3位数的UserAgent版本“Firefox/100.0”会不会让一些网站停止正常工作。浏览器UserAgent是一串字符串，里面包含了浏览器的软件信息，版...

爬虫与User-Agent

什么是User-Agent呢?User-Agent是一个特殊字符串头，被广泛用来标示浏览器客户端的信息，使得服务器能识别客户机使用的操作系统和版本，CPU类型，浏览器及版本，浏览器的渲染引擎，浏览器...

让你的浏览器充满魔性——User Agent Switche

对于前端人员，闲暇时就会研究各种插件，今天我就分享UserAgentSwitcher在Firefox和Chrome的使用情况。一、Firefox浏览器UserAgentSwitcher作为火...

亚马逊账号运营安全-浏览器指纹识别之User-Agent开篇

UA包含了一个约定的特征字符串。主要是面向受访问网络表明自己的操作系统，软件开发商，版本，应用类型等信息。这是一种主动暴露信息的方式。我们来看关于UA的简单语法定义：User-Agent:<p...

【每日学习】Python爬虫之伪装浏览器User-Agent

【主题】Python爬虫之伪装浏览器原理【分析】1.创建自定义请求对象的目的，对抗网站的反爬虫机制2.反爬虫机制1：判断用户是否是浏览器访问（User-Agent）3.对抗措施1：伪装浏览器进行访问【...

亚马逊账号运营安全-浏览器指纹识别之User-Agent二篇

大家好，上一篇亚马逊账号运营安全-浏览器指纹识别之User-Agent开篇为大家阐述了原理。下面是作者为大家整理的其他几个主流浏览器的UA配置。一下都是Windows1064X系统下整理。Chrom...

常见的爬虫UserAgent

通过前面的文章我们知道，UserAgent（用户代理）是HTTP请求的一部分，用于告诉服务器发起请求的客户端类型和属性等信息。同时，也了解了常见的UserAgent。...

HTTP请求头之User-Agent

什么是User-AgentUser-Agent中文名为用户代理，简称UA，...

你想不到的浏览器流氓史!那些奇怪的User-Agent，是这么来的...

平时我们用chrome浏览器做开发测试。Chrome的Useragent字段怎么这么奇怪？...

谷歌宣布 Chrome 将逐步停止支持 User Agent

谷歌近日宣布将放弃对Chrome浏览器中用户代理字符串（User-AgentString）的支持。取而代之的是，Chrome将提供一个名为“客户端提示（ClientHints）”的新API...

数据采集-用户代理(useragent)

UserAgent分类：PC端的UserAgent。移动端UserAgent。使用UserAgent的必要性：在写python网络爬虫程序的时候，经常需要修改UserAgent，有很多原因，罗列几个如...

如何获取当前浏览器的useragent

有时候，我们需要得到浏览器的useragent，从而再进行后面的一系列判断，返回不同的值。网上有说，在浏览器地址栏输入：javascript:alert(navigator.userAgent)这种方...

User Agent 解析:它是什么以及如何修改

什么是UserAgent?UserAgent，简称UA，是一个使服务器能够识别用户使用的浏览器类型、版本以及运行浏览器的操作系统等信息的字符串。它作为浏览器请求头部信息的一部分发送给服务器，以便服务...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表