一、meta源信息功能之页面定时跳转与刷新

几乎所有的网页头部都有<meta>源信息。除了我们常用的定义编码、关键字(name=”keywords”)、描述(name=”description”)(for SEO)，还可以定义视区大小、缩放比例等(for 移动端)，如下：

当下CSS3应用已经相当广泛，其中重要成员之一就是CSS3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如「企业QQ-新年祝福」活动：

适用条件：

1、一行的li间距宽度 小于两个li的宽度之和；

2、li个数刚好满行

条件1大部分都能满足的，所以主要就是刚好满行的情况。

相关代码片段

本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也慢慢登上了前端技术的舞台。

本文内容大部分属于翻译性质内容，因此，会不那么通俗易懂。不过，你是做手机开发的，或是有意向的，本文的内容如果细细读来，还是有些收获的。

iphone6 及 iphone 6 plus 已经出来一段时间了。很多移动端网站，以前写死body 为320px的，现在估计也忙着做适配了。

大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。

如今非常流行的HTML5页面展现形式，特别是在一些微信应用里面微场景的使用、电子海报等表现方式大都采用如此方式，今天我们提供大家一款这种页面特效，支持手机端触屏向上滑动，页面非常流畅，基于zepto,轻量级框架，大家可以看看。

官方介绍
PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。

为谁而用
让移动站点的相册体验和原生App一样的设计师和开发者。

由于移动设备存在的环境限制，如低带宽，高延迟，小内存，低处理器性能的等，迫使开发者不得不想办法通过优化前端页面的性能来满足用户的性能预期。在强调如何解决移动端性能问题上，这篇文章总结了一些前端优化的案例，并且概括了一些加速页面的方法和策略。

为什么性能会影响这么多

不论你的页面设计地多么有趣、漂亮、交互性好，不管是在桌面还是移动设备上，如果页面需要花2到3秒时间去渲染展示，那么用户都会很快变得不耐烦的。可以预期的是，在页面还在加载的时候，用户很有可能从浏览购买的行为转变为点击回退键或者是关闭浏览器的行为。

前端开发很多知识不学习就落后了，尤其是移动端发展更是迅速，随着市场的逐步扩大和相关技术的日趋完善，各种问题和解决方案也层出不穷。当然最主要的还是css3和HTML5的知识，javascript的内容也越来越丰富，有nodejs等。下面推荐一些收集移动端的知识精华。

1. 知识集合

99移动端知识集合：https://github.com/jtyjty99999/mobileTech

今天在某个群里面闲逛，看见一个童鞋分享了一个携程的移动端的页面。

地址这里我也分享下吧：http://m.ctrip.com/html5/

在手机端我都很少用雪碧图合并定位图标，用的比较多就是用字体图标来代替，有些图标不多的时候就自己单个的切出来控制了。

很多时候我们都需要在js文件中获取该文件的详细路径，以便根据其他文件与该js的相对位置计算并设置其他一些文件如图片或样式或脚本的目录路径。我们一般都这样做：
假设外部js文件的文件名为：test.js，则在test.js中都这样写：

1
2
3
4
5
6
7
8

var js=document.scripts;
var jsPath;
for(var i=0;i<js.length;i++){
if(js[i].src.indexOf("test.js")>-1){
jsPath=js[i].src.substring(0,js[i].src.lastIndexOf("/")+1);
}
}
alert(jsPath);

我们需要制作这样一个搜索框：

浮动是一个有意思（你也可以说它很麻烦）的CSS属性，任何元素设置了浮动，层级就提高了，会影响它后面没设置浮动的元素，这些倒霉的被影响者会跑到浮动层的下面去（当然IE6、IE7除外），代码看起来是这样：

1
2

<div style="width: 100px; height: 100px; border: 1px solid #333; float: left;"></div>
<div style="width: 120px; height: 140px; background: #eee;"></div>

1、使用Chrome的都知道，当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的边框，我以前一直以为这是chrome的特性，没法去掉，原来是css的效果，outline这个属性。
你可以用下面的css代码去掉所有元素的边框：

:focus {outline: none;}

关于css中也有继承的概念，css手册里面都会有介绍。方便阅读，有些朋友他会问起。

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

代码：

1

<embed src="视频链接地址" width="200" height="45" type=audio/mpeg loop="true" autostart="false">

让IFrame透明效果,里加一个allowTransparency=”true”就行了.比如:

1

<iframe width="100%" align="center" id="test" name="test" frameborder="0" scrolling="no" src="2.html"  allowTransparency="true" ></iframe>

什么是CSS expression？

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 是不是感觉上面的文字有点晦涩？没有关系，你只需要知道：我们可以通过expression把Javascript脚本写放在css文件中，通过它来实现一些很方便的功能与效果。