本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面。
通过本教程,您会学到:
1、H5音乐播放 (带音轨)
2、iconfont字体图标库
3、div+css网页布局
前端技术:js,jQuery,css ,bootstrap,iconfont
后台技术:php
数据库:mysql
首先,看一下页面的布局:
基本上用div+css的技术就可以实现。
2024年09月21日
本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面。
通过本教程,您会学到:
1、H5音乐播放 (带音轨)
2、iconfont字体图标库
3、div+css网页布局
前端技术:js,jQuery,css ,bootstrap,iconfont
后台技术:php
数据库:mysql
首先,看一下页面的布局:
基本上用div+css的技术就可以实现。
2024年09月21日
void 运算符
void 运算符会对给定的表达式进行求值,然后直接返回 undefined
void 运算符通常只用于获取 undefined
的原始值,一般使用 void(0)
(等同于 void 0)。在上述情况中,也可以使用全局变量undefined 来代替(假定其仍是默认值)。
2024年09月21日
之前的代码为了能够分享当前文章到QQ我是这样写的
shareToQQ(){
let url = `https://connect.qq.com/widget/shareqq/index.html?url=https://我的网站/#/article/${this.id}&source=https://我的网站.com&title=${this.article.title}&summary=${this.article.content.slice(0, 42)}&desc=${this.article.title}&pics=https://我的网站.com${this.article.cover_image}`
window.open(url)
}
2024年09月21日
web浏览器中的JavaScript
四种在浏览器中使用JavaScript的方法。
// 1
// 内联,放置在<script>和</script>标签对之间
<script>
function displayTime(){
alert('hello world')
}
window.onload = displayTime
</script>
// 2
// 放置在由<script>标签的src属性指定的外部文件中
<script src="../../script/util.js"></script>
// 3
// 放置在HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定
<div onclick="alert('hello world')"></div>
// 4
// 放在一个URL里,这个URL使用特殊的“javascript:”协议
<a href="javascript:void(0)"></a>
2024年09月21日
表格的默认样式不好看,设置border="1"的时候,还会出现双边框,就像下面一样,直接上代码,看效果对比,而且用flex,可以轻易实现文字垂直居中。
1.修改前
<table border="1">
<tr>
<td>班级</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>一班</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<td>二班</td>
<td>小红</td>
<td>100</td>
</tr>
</table>
2024年09月21日
Flex弹性盒,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
当一个元素 display:flex 的时候,内部元素float会失效,vertical-align也会失效
2024年09月21日
本人一开始是做移动端原生开发的程序员一枚。现在原生开发实在是不咋景气,公司现在的项目基本上都是前端的项目,所以现在被调到前端,从小白一枚的角度出发分享一部分项目开发过程中用的比较多的知识吧,今天先学习一个flex布局,这个在项目中用到的实在太多了。
一、介绍
什么叫做弹性布局呢,他就是根据内容多少分配多大的控件,当内容不足时会自动的换行,去适应父布局,这也是他最大的好处 由此他可以去适配多种尺寸的页面。
二、flex结构
咱们先通过网上的一个图片看一下他的具体结构
2024年09月21日
在Flex容器中有几个核心术语
2024年09月21日
Flex 基本概念:
在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴,水平方向变为交叉轴,这个我们后面再说。
在容器中的每个单元块被称之为 flex item,每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。