第 107 页-H5教程_html5图文教程-PHP中文网

Article Tags

H5教程

首页

Technical articles

web前端

H5教程

HTML5中meta属性的使用代码示例详解

meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。 1、声明文档使用的字符编码2、声明文档的兼容模式

Mar 11, 2017 pm 03:47 PM

HTML5，meta属性

H5移动端超实用的css3模拟边框最新研究示例代码

移动端H5 css3模拟边框最新研究(超实用) by FungLeo前言在之前写的一篇博文《移动端H5的一些基本知识点总结第五节边框的处理》中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此,今天在这里,纠正和完善我之前的博文中的缺陷. 为什么要模拟边框,而不是直接写边框? 因为边框

Mar 10, 2017 pm 04:54 PM

HTML5，CSS3，模拟边框

移动端H5做一个不限个数的通栏按钮 by FungLeo前言在移动端h5的页面上经常需要一些通栏的按钮.当然,要做一个通栏的按钮这个事儿还是巨简单的.可是,产品经理和设计师永远都会给你添点麻烦.比如,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到内页,就是三个按钮挤在一个通栏上.如果没有一个合理的解决方法,那么,无疑是非常恶心的.因为,我们必须写多个样式.而我们

Mar 10, 2017 pm 04:49 PM

H5，移动端，通栏按钮

H5移动端各种各样的列表的制作方法(七最终章)

移动端H5各种各样的列表的制作方法(七最终章) by FungLeo前情回顾前五章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》《移动端H5各种各样的列表的制作方法(二)》《移动端H5各种各样的列表的制作方法(三)》《移动端H5各种各样的列表的制作方法(四)》《移动端H5各种各样的列表的制作方法(五)》《移动端H5各种各样的列表的制作方法(六)》如果你是先看到

Mar 10, 2017 pm 04:46 PM

HTML5，移动端，列表

H5移动端各种各样的列表的制作方法(六)

在前面两章中,讲的都是两列布局的图文列表.而事实上,两列布局的图文列表还是比较简单的.这一章,我们将要更进一步来挑战难度.实现一个相对来说,非常复杂的布局方式.

Mar 10, 2017 pm 04:44 PM

HTML5，移动端，列表

H5移动端各种各样的列表的制作方法(五)

在第四章中,我们学习了如何来做一个双列的图文列表.但是,这个图文列表是有一定的局限的.局限就是,其中的图片必须为正方形.

Mar 10, 2017 pm 04:42 PM

HTML5，移动端，列表

H5移动端各种各样的列表的制作方法详解(四)

前面三章,都是说一个普通的列表应该如何去实现.难度由易到难,但总的来说,一看就能掌握.这一章,我们来做图文列表.两列的图文列表是非常常见的.在JD\TB等电商移动端H5更是比比皆是.这里,我们先来做一个最简单的.

Mar 10, 2017 pm 04:39 PM

HTML5，移动端，列表

H5移动端各种各样的列表的制作方法(二)

移动端各种各样的列表的制作方法(二）前情回顾在上一篇博文《移动端各种各样的列表的制作方法(一)》中,我们通过两个简单的DEMO,演示了一下在移动端H5中的列表制作.不过,这两个演示还是太简单了.可能大家觉得不过如此嘛.这一章,我们将制作稍微复杂一点点的列表. 如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.带右箭

Mar 10, 2017 pm 04:31 PM

HTML5，移动端，列表

H5移动端各种各样的列表的制作方法(一)

移动端各种各样的列表的制作方法(一) by FungLeo前言随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结》获得了大量的点击量.因此,FungLeo决定,在接下来的时间里,我将围绕移动端,展开一系列的教程. 本系列文章的CSS部分,将全部采用SASS语法撰写.如果您不会SASS,建议阅读相关教程

Mar 10, 2017 pm 04:28 PM

HTML5，移动端，列表

HTML5/CSS3 网页加载进度条的实现，下载进度条等经典案例

今天给大家带来一个比较炫的进度条，进度条在一耗时操作上给用户一个比较好的体验，不会让用户觉得在盲目等待，对于没有进度条的长时间等待，用户会任务死机了，毫不犹豫的关掉应用；一般用于下载任务，删除大量任务，网页加载等；如果有使用html5为手机布局的，也可以用于手机中~效果图：1、html结构：

Mar 10, 2017 pm 04:15 PM

HTML5，CSS3 ，进度条

HTML5/CSS3 3D立方体旋转动画经典案例

前面的3D商品展示中已经说过如何制作正方体，并且那个上面还有数字，理论上说比这个复杂，虽然木有这个炫~这里就不多说了。

Mar 10, 2017 pm 04:13 PM

HTML5，CSS3 ，3D立方体旋转

HTML5/CSS3专题 canvas 模拟实现电子彩票刮刮乐示例代码（图）

今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的，有兴趣的可以改成android版本的，或者其他的~效果图：贴一张我中500w的照片，咋办啊，怎么花呢~好了，下面开始原理：1、刮奖区域两个Canvas，一个是front ，一个back ，front遮盖住下面的canvas。2、canvas默认填充了一个矩形，将下面canvas效果图遮盖，然后监

Mar 10, 2017 pm 04:06 PM

HTML5，CSS3，canvas

HTML5/CSS3专题 3D展示商品信息的经典案例

强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力，但是如果在展示中添加适当的3D元素，~说不定效果不错哈~效果图：说明一下：这个创意不是我想的，哈~模仿别人的，创意应该是w3cplus上的。当然了，重点是教大家如何做，就当高仿了~首先，先教大家利用CSS3制作一个正方体：在木有CSS

Mar 10, 2017 pm 03:55 PM

HTML5，CSS3，3D展示商品

HTML5/CSS3专题 CSS3打造百度贴吧的3D翻牌效果的经典案例

首先感谢w3cfuns的老师~今天给大家带来一个CSS3制作的翻牌效果，就是鼠标移到元素上，感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的，甚至给女朋友写一些话语，放在使用该实例制作的相册之后都可以尝试下，哈~效果图：实例用到的一些CSS3的新属性： a、-webkit-perspective: 800px; perspective

Mar 10, 2017 pm 03:44 PM

HTML5，CSS3，3D翻牌效果