-
移动端html5模拟长按事件的实现方法_html5教程技巧
为啥写这篇文章最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。大概效果如下：ps: 为了做个gif还下了app，还
17 2018-11-10 0 17
-
HTML5 视频播放(video),JavaScript控制视频的实例代码_html5教程技巧
具体代码如下所示： <html lang="en"><head><meta charset="UTF-8"><title>Documenttitle><style>figcaption {text-align: center;line-height: 150px;font-family: "Microsoft Yahei";font-size: 24px;}.player {wid
12 2018-11-10 0 12
-
CSS设置背景模糊的实现方法_CSS教程_CSS_网页制作
在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。html代码如下<!DOCTYPE html><html><head>
86 2018-11-10 0 86
-
css实现中间文字两边横线效果 _CSS教程_CSS_网页制作
1. vertical-align属性实现效果：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。<div class="header"> <span class="lin
39 2018-11-10 0 39
-
使用css实现物流进度的样式的实例代码_CSS教程_CSS_网页制作
效果：css样式：<style type="text/css"> ul li { list-style: none; } .package-status { padding: 18px 0 0 0 } .package-status .status-list {
32 2018-11-10 0 32
-
详解flex多列布局遇到的问题和解决方案 _CSS教程_CSS_网页制作
flex布局无疑是简单、易用的，他让我我们的布局更加简单和快速，但是在使用flex进行多列布局的时候，我相信很多人会遇到下面的情况：这种情况是因为我们使用了justify-content: space-between;为什么使用这个设置，是因为我们
21 2018-11-10 0 21
-
HTML5实现签到 功能 _html5教程技巧
Introduce(介绍)用户签到的H5例子（css+jquery，无图片），由于网上找的的用户签到例子都不好，要不就是好多图片组成的，要不就大量冗余代码，所以特意做了个签到界面（移动端）。User sign sample page for mobile using h5 which onl
10 2018-11-10 0 10
-
详解HTML5将footer置于页面最底部的方法(CSS+JS)_html5教程技巧
本文介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS)，分享给大家，具体如下：JavaScript:<script type="text/javascript"> $(function(){ function footerPosition(){ $("footer").removeClas
14 2018-11-10 0 14
-
Flexbox 布局的最简单表单的实现_CSS教程_CSS_网页制作
弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了。三年前，我写过 Flexbox 的介绍（上，下），但是有些地方写得不清楚。今天，我看到一篇 教程 ，才意识到一个最简单的表单，就可以解释 Flexbox，而且内容还很实
23 2018-11-10 0 23
-
纯css实现Material Design中的水滴动画按钮_CSS教程_CSS_网页制作
前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增
10 2018-11-10 0 10
-
iframe在移动端的缩放的示例代码_html5教程技巧
工作中碰到个奇怪的问题，折腾了大半天，终于算是解决了，这里把分析思路和解决办法记录下。项目是做响应式的公司官网，前期的静态图页面切完后就提交给后台作为模板使用了，我也就基本退出项目。在后端落地时发现在在移动端页
7 2018-11-10 0 7
-
canvas进阶之如何画出平滑的曲线_html5教程技巧
背景概要相信大家平时在学习canvas 或 项目开发中使用canvas的时候应该都遇到过这样的需求：实现一个可以书写的画板小工具。嗯，相信这对canvas使用较熟的童鞋来说仅仅只是几十行代码就可以搞掂的事情，以下demo就是一个再
9 2018-11-10 0 9
-
css中grid属性的使用详解_CSS教程_CSS_网页制作
grid布局加在父元素上的属性grid-template-columns/grid-template-rows 定义元素的行或列的宽高 如果父元素被等分成了9等分，则，不管有多少个子元素，都显示9等分 grid-template-columns: 33% 33% 33%;可以写成g
10 2018-11-10 0 10
-
css3实现椭圆轨迹旋转的示例代码_css3_CSS_网页制作
最近需要实现如下效果最开始用css3D旋转写，只能实现如下效果没办法把所有的圆转向正面，不知道是我的操作不对，还是3d旋转无法实现，有知道的大佬还请赐教啊没法用3d实现只能转向2d了，只要实现按椭圆旋转就ok了X轴Y轴在一个
19 2018-11-10 0 19
-
浅谈HTML5中dialog元素尝鲜_html5教程技巧
对话框（别称模态框，浮层）是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根据自己自己的需求造轮子或者使用第三方的。对话框的
10 2018-11-10 0 10
-
canvas实现扭蛋机动画效果的示例代码_html5教程技巧
转眼间，已经实习了两个月了，公司每个月都有个会员日的活动要做，这个月的任务是做一个扭蛋机抽奖的活动，数据什么的都有接口，那么前端剩下最大的任务就只剩下扭蛋机的动画实现了。背景
本来兴高采烈地从网上找了一个扭蛋机 8 2018-11-10 0 8
-
CSS3 创建网页动画实现弹跳球动效果_css3_CSS_网页制作
基础准备对于这个实现，我们需要一个简单的 div ，并且样式类名为 ball ：HTML 代码:<div class="ball"></div>我们将使用 Flexbox 布局，把球放到页面中间，尺寸为 100px * 100px，背景色为橘黄色。CSS 代码:body {display: flex
12 2018-11-10 0 12
-
详解css外边距折叠（margin collapsing）_CSS教程_CSS_网页制作
前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。从一个简单例子说起先看一个简单示例：<style> .slide1 div { margin:10px 0; } </style> <div class="slide1"> <h3>第1种外边距
27 2018-11-10 0 27
-
html5 http的轮询和Websocket原理_html5教程技巧
一、HTTP的轮询Web客户端与服务器之间基于Ajax（http）的常用通信方式，分为 短连接 与 长轮询 。短连接：客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。长轮询：客户端像传统轮询一样从服务器请求数据
22 2018-11-10 0 22
-
详解Html5页面实现下载文件（apk、txt等）的三种方式_html5教程技巧
需求描述接到的原始需求是这样的，有一个H5页面，页面中有个“点击下载”的按钮，点击之后，完成下载特定的apk。大概是下面这样的👇：需求分析接到需求的时候我偷乐了一下，这个H5页面最大的优点是不在微信中使
11 2018-11-10 0 11
-
CSS去除移动端点击时元素产生的背景色 （推荐）_CSS教程_CSS_网页制作
在点击产生背景色的元素的css样式上加上以下代码：
-webkit-tap-highlight-color: transparent;ps：下面看下css取消a标签在移动端点击时的背景颜色 一、取消a标签在移动端点击时的蓝色
-webkit-tap-highlight-co 9 2018-11-10 0 9
-
详解CSS Sprite雪碧图的应用_CSS教程_CSS_网页制作
CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。雪碧图的使用场景 静态图片，不随用户信息的变化
10 2018-11-10 0 10
-
HTML5之消息通知的使用(Web Notification)_html5教程技巧
关于 HTML5 ，写了不少文章，总觉得相关的高级 API 都得过一遍。系统的了解，站在更高的高度去思考问题，这样才能事半功倍。一、先睹为快我们先来尝试一个最简单的例子，打开 chrome 开发者工具，粘贴代码进去直接运行：new Notifi
11 2018-11-10 0 11
-
html5 postMessage前端跨域并前端监听的方法示例_html5教程技巧
有时候会遇到傻X需求，比如前端单点登陆！遇到需求，就要去想解决办法，这里我给大家做一个简单的前端单点登陆的解决方案，用到的就是postMessage跨域信息传输以及onstorage的监听。本文用到的知识点 koa架设静态资源服务、跨
10 2018-11-10 0 10
-
css和html的四种结合方式_CSS教程_CSS_网页制作
（1）在每个HTML标签上面都有一个属性 style，把css和HTML结合在一起 <div style="background-color:red;color:blue;">我是一只小小鸟</div> （2）使用HTML的一个标签实现，<style>标签：写在head里面 <style type=
12 2018-11-10 0 12
