四时宝库

程序员的知识宝库

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

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

通过本教程,您会学到:

1、H5音乐播放 (带音轨)

2、iconfont字体图标库

3、div+css网页布局

前端技术:js,jQuery,css ,bootstrap,iconfont

后台技术:php

数据库:mysql

首先,看一下页面的布局:

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

Java 0基础入门 (Html标签的使用)

上一篇:Java 0基础入门(初识Html)

1.文本相关标签--标题标签

[理论篇]一.JavaScript中的死链接和空链接

void 运算符

void 运算符会对给定的表达式进行求值,然后直接返回 undefined

void 运算符通常只用于获取 undefined 的原始值,一般使用 void(0)(等同于 void 0)。在上述情况中,也可以使用全局变量undefined 来代替(假定其仍是默认值)。

Vue调用QQ却只能访问首页的解决方法

前言

之前的代码为了能够分享当前文章到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)
    }

一分钟复习-JavaScript基础语法(7)

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>

用flex布局实现简单好看表格边框样式

表格的默认样式不好看,设置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>

如何讲清楚Flex弹性盒模型?(上)(flex弹性盒子模型)

一、什么是Flex弹性盒?

Flex弹性盒,意为“弹性布局”,用来为盒状模型提供最大的灵活性。

当一个元素 display:flex 的时候,内部元素float会失效,vertical-align也会失效

Flex 弹性布局1(弹性盒布局中,flex-direction的默认值为)

本人一开始是做移动端原生开发的程序员一枚。现在原生开发实在是不咋景气,公司现在的项目基本上都是前端的项目,所以现在被调到前端,从小白一枚的角度出发分享一部分项目开发过程中用的比较多的知识吧,今天先学习一个flex布局,这个在项目中用到的实在太多了。

一、介绍

什么叫做弹性布局呢,他就是根据内容多少分配多大的控件,当内容不足时会自动的换行,去适应父布局,这也是他最大的好处 由此他可以去适配多种尺寸的页面。

二、flex结构

咱们先通过网上的一个图片看一下他的具体结构

掌握Flex布局的这几个常用属性,搞定弹性布局不在话下

1.使用display:flex声明一个Flex布局,这个容器称为Flex容器,其包含的子元素称为Flex项目

在Flex容器中有几个核心术语

  1. 容器: 使用display:flex

css3 Flex布局 学习(htmlflex布局)

Flex 基本概念:

在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴,水平方向变为交叉轴,这个我们后面再说。

在容器中的每个单元块被称之为 flex item,每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接