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

Article Tags

H5教程

首页

Technical articles

web前端

H5教程

HTML5实践-使用css装饰图片画廊的代码分享（二）

　　在上一讲中，我们的解决方案使用到了jquery去创建一个span标签。在这一讲中我们将用一种更好的解决方式，使用:before 和 :after 伪类。:before经常会用到，他可以用来添加额外的元素。

Mar 23, 2017 pm 03:43 PM

HTML5，css，图片画廊

HTML5实践-CSS3 Media Queries详情介绍

　　CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机。css3提供了更加强大的media queries，你可以针对不同media类型设置表达式，根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式，为mobile设置另外一种样式。这个功能相当强大，你可以不修改页面内容的情况下，为不同设备提供不同的样式效果。下面的课程我们将会介绍到一些使用该技术的站点。

Mar 23, 2017 pm 03:36 PM

HTML5，Media ，Queries

HTML5实践-使用CSS3 Media Queries实现响应式设计的代码分享

　　现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。

Mar 23, 2017 pm 03:33 PM

HTML5，CSS3 ，Queries

HTML5实践-在非响应式设计中如何使用ViewPort meta标签的方法介绍

　　大家都知道viewport标签对于响应式设计的意义，但是你们可能不清楚，他对于非响应式设计也有相当的作用。如果你的站点还是非响应式的，那么通过本文你将学会，如何使用viewport标签增强你站点在mobile设备上的显示效果。

Mar 23, 2017 pm 03:29 PM

HTML5，ViewPort ，meta标签

HTML5实践-使用CSS实现弹性视频的代码分享

　　当我编码Elemin Theme（我最近设计的一个响应式的站点）的时候，我遇到的一个跳帧就是，如何能让嵌入式的视频在尺寸变化上变得更加灵活。使用max-width:100% 和height:auto可以让html5的video标签很好的工作，但是这个解决方案不适用于iframe 或者 object标签的内嵌代码。通过几小时的寻找资料和实验，我最终找到了解决办法。当你在进行响应式设计的时候，这一css技巧能派上用场。你可以访问最终demo地址，缩放你的浏览器查看效果。

Mar 23, 2017 pm 03:26 PM

HTML5，CSS，弹性视频

HTML5实践-三步实现响应式设计的详细介绍

　　响应式web设计现在已经不是一个难事了，如果你还不熟悉他，如果你是一个初学者，可能响应式设计对你来说有点发杂，但实际上他比你想象的要简单的多。为了方便你更快的学习响应式设计，我特意写了这个教程，通过简单的三个步骤你就能掌握响应式设计的基本逻辑和media queries（假设你掌握css知识）。

Mar 23, 2017 pm 03:12 PM

HTML5，响应式设计

HTML5实践-使用css3如何完成google涂鸦动画的详解

　　这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。

Mar 22, 2017 pm 04:22 PM

HTML5，css3，google涂鸦

HTML5实践-使用css创建三角形和使用CSS3创建3d四面体的代码详解

　　首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。

Mar 22, 2017 pm 04:19 PM

HTML5，css，CSS3

HTML5实践- 使用css3丰富图片样式的示例代码

　　在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。

Mar 22, 2017 pm 04:15 PM

HTML5，css3，图片样式

html5指南（4）-使用Geolocation的详解

　　今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象，他提供了下列方法：

Mar 22, 2017 pm 04:09 PM

html5，Geolocation

html5指南（3）-实现拖拽功能

　　本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。

Mar 22, 2017 pm 04:05 PM

html5，拖拽功能

html5指南（2）-操作Document metadata的详情介绍

　　compatMode属性告诉你浏览器是如何处理当前document的。有太多不标准的html了，浏览器会试图显示这些页面，即使他们不符合html规范。有些内容依赖于早先浏览器大战时所存在的独特的特性，而这些属性石不符合规范的。compatMode会返回一个或两个值，如下：

Mar 22, 2017 pm 04:01 PM

html5，Document ，metadata

HTML5 Canvas实现五子棋游戏的代码分享（图文）

　　因为之前用c#的winform中的gdi+，java图形包做过五子棋，所以做这个逻辑思路也就驾轻就熟，然而最近想温故html5的canvas绘图功能（公司一般不用这些），所以做了个五子棋，当然没参考之前的客户端代码，只用使用之前计算输赢判断算法和电脑AI（网络借取）的算法，当然现在html5做的五子棋百度一下非常多，但是自己实现一边总归是好事情，好了废话不多说了进入正题。^_^

Mar 22, 2017 pm 03:43 PM

HTML5 ，Canvas，五子棋游戏