商清逸 - 博客园

移动端重构系列3——重置样式

摘要：移动端重构系列-mobile本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo基于Normalize.css，根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式。html { font-family: "Helvetica Neue", Helvetica, STH... 阅读全文

posted @ 2015-09-30 14:08 商清逸阅读(175) 评论(0) 推荐(0)

移动端重构系列2——整体布局（转载）

摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo移动端和pc端一样整体上布局也可以分为上中下三部分，如图：一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。fixed布局常规的结构如下： ...因为移动端单页面特性，所以每个pag... 阅读全文

posted @ 2015-09-30 13:46 商清逸阅读(214) 评论(0) 推荐(0)

移动端重构系列1——新建空白页面（转载）

摘要：移动端重构系列-mobile本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demohtml5文档申明 Documentmeta标签viewport视图窗口，移动端特属的标签。一般使用下面这段代码即可：上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩... 阅读全文

posted @ 2015-09-30 10:28 商清逸阅读(184) 评论(0) 推荐(0)

八种创建等高列布局(转载)

摘要：高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么... 阅读全文

posted @ 2015-09-29 18:03 商清逸阅读(260) 评论(0) 推荐(0)

一个完整的Flexbox指南(转载)

摘要：本文由大漠根据Chris Coyier的《A Complete Guide to Flexbox》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://css-tricks.com/snippets/css/a-guide-to... 阅读全文

posted @ 2015-09-29 18:01 商清逸阅读(266) 评论(0) 推荐(0)

等高列布局、水平垂直居中与置顶页脚(转载)

摘要：等高列布局在《八种创建等高列布局》一文中详细介绍了八种创建等高列布局的不同方法。可以说这些方法足以满足你的业务需求，当然其中有一些方法略为繁琐，也有时转得人头晕。在今天这种技术环境之下，如果的业务对IE低版本依赖性不是非常强的情况之下，可以考虑一些新的方法来实现。接下来我与大家一起探讨几种新方法实现... 阅读全文

posted @ 2015-09-29 16:41 商清逸阅读(310) 评论(0) 推荐(0)

Block formatting context & Inline formatting context(BFC&IFC)的区别（转载）

摘要：何为BFC与IFCbfc与ifc是针对页面正常流的两种环境，块级元素处于bfc环境中，行内元素处于ifc环境中。元素是块级元素or行内元素由其display属性决定：block, table, flex, grid, list-item 为块级inline, inline-block, inline... 阅读全文

posted @ 2015-09-29 16:11 商清逸阅读(317) 评论(0) 推荐(0)

[转载]网页动画的十二原则

摘要： CSS的Animation是一个很有意思的东西，也是CSS中较为复杂也难设计的一部分。熟不知在Web的动画设计中有12个关键原则。在Animation 101将这十二原则剖析出来。今天特意转载@刘英滕翻译《Animation Principles for the Web》的中文。作为前端的设计师和工... 阅读全文

posted @ 2015-09-29 14:06 商清逸阅读(180) 评论(0) 推荐(0)

前端精选文摘：css之GFC 神奇背后的原理（整理）

摘要： CSS3 Grid LayoutWeb页面的布局，我们常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等，在众多布局方法中，大家... 阅读全文

posted @ 2015-09-29 14:03 商清逸阅读(570) 评论(0) 推荐(0)

css3之BFC、IFC、GFC和FFC

摘要： CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。What's FC？一定不是KFC，FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用... 阅读全文

posted @ 2015-09-29 09:12 商清逸阅读(4586) 评论(0) 推荐(1)

屏幕旋转问题小结

摘要：一、竖屏转横屏问题二、监听屏幕旋转4. 屏幕旋转事件：onorientationchange添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：// 判断屏幕是否旋转function orientationChange() { switch(window.orientatio... 阅读全文

posted @ 2015-09-28 17:26 商清逸阅读(174) 评论(0) 推荐(0)

前端精选文摘：css之BFC 神奇背后的原理（转载）

摘要：一、BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Bo... 阅读全文

posted @ 2015-09-28 15:22 商清逸阅读(196) 评论(0) 推荐(0)

div+css布局自适应小结

摘要：一、两栏布局（左定宽，右自动）1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。举例：两栏布局-左定宽，右自动我是左栏 ... 阅读全文

posted @ 2015-09-28 14:14 商清逸阅读(270) 评论(1) 推荐(0)

AngularJS

摘要： Angular是一个js库，它可以通过js来扩展html元素，他可以通过指令（AngularJS 指令是以ng作为前缀的 HTML 属性）扩展html，通过表达式添加数据绑定html。AngularJS 通过ng-directives扩展了 HTML。ng-app指令定义一个 AngularJS 应... 阅读全文

posted @ 2015-09-28 13:49 商清逸阅读(153) 评论(0) 推荐(0)

css3动画机制原理和实战

摘要： http://www.w3cplus.com/css3/CSS3-animation.html http://www.i7758.com/archives/1585.html http://segmentfault.com/q/1010000000645415 css3动画讨论阅读全文

posted @ 2015-09-25 17:48 商清逸阅读(2675) 评论(0) 推荐(0)

css3背景渐变以及图片混合渲染模式（二）

摘要： http://avnpc.com/pages/photoshop-layer-blending-algorithmhttp://www.html5cn.org/forum.php?mod=viewthread&tid=83244 阅读全文

posted @ 2015-09-24 17:17 商清逸阅读(193) 评论(0) 推荐(0)

css3背景渐变以及图片混合渲染模式（一）

摘要：一、CSS3渐变（Gradients）：CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐... 阅读全文

posted @ 2015-09-23 16:42 商清逸阅读(948) 评论(0) 推荐(0)

JS判断客户端是否是iOS或者Android或者ipad（三）

摘要： * * @function: 判断浏览器类型是否是Safari、Firefox、ie、chrome浏览器* @return: true或false* */function isSafari(){var userAgent = navigator.userAgent.toLowerCase();if(... 阅读全文

posted @ 2015-09-23 16:33 商清逸阅读(411) 评论(0) 推荐(0)

JS判断客户端是否是iOS或者Android或者ipad（二）

摘要： js判断客户端是IPAD和iphone多了就不说了，直接上代码：12345678910111213141516171819202122function checkIsIphoneIpad(){ var pda_user_agent_list = new Array("iPhone", "iPod",... 阅读全文

posted @ 2015-09-23 13:26 商清逸阅读(2340) 评论(1) 推荐(1)

JS判断客户端是否是iOS或者Android或者ipad（一）

摘要：通过判断浏览器的userAgent，用正则来判断是否是ios和Android客户端。代码如下下面一个比较全面的浏览器检查函数，提供更多的检查内容，你可以检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等。第一种：来自http://blog.baiwand.com/?post=17... 阅读全文

posted @ 2015-09-23 10:30 商清逸阅读(302) 评论(0) 推荐(0)

js浏览器下载总结（ios、and、微信、qq）

摘要：前段时间做了个项目，里面关于手机移动端下载的问题开始是判断微信、ios和android系统的下载因为微信屏蔽点击事件和链接的缘故，需要通过打开新页面来进行下载ios和android的下载分别为不同的问题。代码如下：然后问题解决了，你觉得万事大吉了，真是太天真了！！！！上线以后，问题又来了。因为ipa... 阅读全文

posted @ 2015-09-23 10:23 商清逸阅读(1065) 评论(0) 推荐(0)

js浏览器问题

摘要：前段时间做了个项目，里面关于手机移动端下载的问题开始是判断微信、ios和android系统的下载因为微信屏蔽点击事件和链接的缘故，需要通过打开新页面来进行下载ios和android的下载分别为不同的问题。代码如下：然后问题解决了，你觉得万事大吉了，真是太天真了！！！！上线以后，问题又来了。因为ipa... 阅读全文

posted @ 2015-09-23 10:21 商清逸阅读(357) 评论(0) 推荐(0)

京东首页闪光滑动效果小记（转载）

摘要： http://www.w3cfuns.com/blog-5473326-5409149.html 阅读全文

posted @ 2015-09-22 16:37 商清逸阅读(204) 评论(0) 推荐(0)

jQuery $.ajax跨域-JSONP获取JSON数据（转载）

摘要：来源：http://justcoding.iteye.com/blog/1366102 阅读全文

posted @ 2015-09-22 13:49 商清逸阅读(383) 评论(0) 推荐(0)

柒、jq控制页面

摘要：请求阅读全文

posted @ 2015-09-22 13:46 商清逸阅读(112) 评论(0) 推荐(0)

关于css3背景图片渐变的规则

摘要： 1. Webkit引擎的CSS3径向渐变语法 Webkit引擎下的老版本语法：-webkit-gradient([],[ || ,]?[ ||,]?,[,]*); //Safari Chrome这两款浏览器支持的版本，浏览器Chrome4-9 和Safari4-5版本支持 Webkit引... 阅读全文

posted @ 2015-09-22 10:56 商清逸阅读(886) 评论(0) 推荐(0)

div纵向居中的方法（转载）

摘要：方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 Content goes here #wrapper {display:table;}#cell {display:table-cell; ... 阅读全文

posted @ 2015-09-22 10:54 商清逸阅读(742) 评论(0) 推荐(0)

陆、jq基础语法

摘要：一、概述：更加方便的处理html文档、events事件、动画效果和ajax交互等。1、jq主要功能：（1）访问页面框架的局部。（2）修改页面表现（3）更改页面的内容（4）响应事件（5）为页面添加动画（6）与服务器异步交互（7）简化常用的js操作2、jq的优势：a、jQuery实现脚本与页面的分离在H... 阅读全文

posted @ 2015-09-22 10:47 商清逸阅读(260) 评论(0) 推荐(0)

JS自定义功能函数实现动态添加网址参数修改网址参数值

摘要：无论是前端开发还是后台设计，很多时候开发人员都需要获取当前或目标网址的相关信息。这个已有现成的内置对象属性可以直接调用了（下面是获取当前页面的参考代码）复制代码代码如下: 但有时候我们需要改变目前网址的参数/参数值，这时候大家会如何处理呢？一般应该都会先通过获取所有参数的信息，然后再根据实际... 阅读全文

posted @ 2015-09-21 18:05 商清逸阅读(369) 评论(0) 推荐(0)

伍、ajax

摘要：一、ajax的概念通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等... 阅读全文

posted @ 2015-09-21 17:59 商清逸阅读(163) 评论(0) 推荐(0)

风谷来客