2013 年 2月随笔档案 - Joanna Qian

CSS元素隐藏原理和效果小结

摘要：转载和改编自：http://www.zhangxinxu.com/wordpress/一、CSS元素隐藏在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。一个一个看。{ display: none; /* 不占据空间，无法点击 */ }/********************************************************************************/{ visibility: hidden; /* 占据空间，无法点击 */ }/********************** 阅读全文

posted @ 2013-02-27 05:15 Joanna Qian 阅读(700) 评论(0) 推荐(0)

使用字符代替圆角尖角研究（转）

摘要：http://www.zhangxinxu.com/study/200911/charset-instead-round-sharp-corner.html请看下面这张我从Google gmail页面上截的图(这是我在同一位置第二次截图了)：图中用红色的圈圈圈中的向下的小三角就是使用的字符，非主流字符。其实呢，Google谷歌这个字符只属于小应用，字符真正的潜力并没有体现出来，而本文将开拓性的探讨如何使用字符代替图片实现貌似只有图片才能实现的尖角效果，或是多半使用图片实现的圆角效果。对字符飞研究我并不深入，所以一些结论或方法并不是最优的，后期可能会有更加完善的方法，所以本文题目添加beta字样阅读全文

posted @ 2013-02-27 00:43 Joanna Qian 阅读(670) 评论(0) 推荐(0)

什么是手机和Mobile Web的UA识别

摘要：用户代理识别——wiki中的解释当一个软件代理运行于一个网络协议时，它通常通过向它的 operating peer 提交一个特征识别的字符串以标识它自己，它的应用类型，操作系统，软件供应商，或者软件修订版本。在HTTP, SIP 以及 SMTP/NNTP[2]协议中，这个识别是通过user-agent头字段传送的。网络机器人，例如网络抓取工具，通常也包括一个URL以及/或一个电子邮件地址以便网站管理员可以联系 bot 的操纵者。在 HTTP 中，User-Agent 字符串通常被用於内容协商，而原始服务器为该响应选择适当的内容或操作参数。例如，User-Agent 字符串可能被网络服务器用以基阅读全文

posted @ 2013-02-26 05:14 Joanna Qian 阅读(2286) 评论(0) 推荐(0)

引用 JS判断浏览器类型方法(转)

摘要：http://www.cnblogs.com/carekee/articles/1854674.htm在网站前端开发中，浏览器兼容性问题本已让我们手忙脚乱，Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScript是前端开发的主要语言，我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下，值判断出浏览器类型之后，还需阅读全文

posted @ 2013-02-26 05:07 Joanna Qian 阅读(463) 评论(0) 推荐(0)

社交媒体（social media）网站设计尺寸参考（转）

摘要：社交媒体网站，这里主要指的是国外的几大网站，比如说：Facebook、Twitter、Google+、LinkedIN、Pinterest、Instagram和Youtube七个。今天不说别的，主要将其设计图尺寸发于大家参考，希望这这几张图对设计人员有所帮助。社交媒体设计尺寸参考1、Facebook参考尺寸：Facebook Cover图： 851 x 315Facebook Profile图： 180 x 1802、Twitter参考尺寸：Twitter Header图： 520 x 260Twitter Profile图： 81 x 813、Google+参考尺寸：Google+ cove 阅读全文

posted @ 2013-02-26 04:40 Joanna Qian 阅读(754) 评论(0) 推荐(0)

iPad的横板与竖板中表单居中设置解决方案（转）

摘要：http://blog.csdn.net/spring21st/article/details/7457021<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>login form&l 阅读全文

posted @ 2013-02-26 04:36 Joanna Qian 阅读(803) 评论(0) 推荐(0)

建立社交网站（Social network）的WordPress的三大顶级插件（译）

摘要：面试的时候被问到如何使用CMS建设社交网站，完全一头雾水，然后去google、百度了，发现可以使用Drupal或Joomls或WordPress快速建立，特别是WordPress，有一些建设社交网站的现成插件本文翻译自：http://wpmu.org/top-3-ways-to-build-a-social-network-with-wordpress/如果你是使用WordPress来建立你的CMS系统，现在有很多选择来建设社交网络（social network）并加入社区特性到现在的网站中，并使你的网站具有很好的交互性（interactive）。过去的几年间，出现了一些强大的插件帮助你把网阅读全文

posted @ 2013-02-23 11:21 Joanna Qian 阅读(2758) 评论(1) 推荐(0)

页面无阻塞加载研究(转)

摘要：在页面加载性能当中，页面被阻塞是影响页面主要内容(包括图片等)及时呈现在用户面前的一个重要因素之一，所以我们需要在页面中合理处置外调CSS及JS文件。来看一段代码<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>页面阻塞测试</title>< 阅读全文

posted @ 2013-02-23 05:49 Joanna Qian 阅读(324) 评论(0) 推荐(0)

国外的哥们总结的网页布局的历史（非常有趣）

摘要：1990－1993:黎明前的黑暗。黑暗骑士用有限的工具（headings、lists、paragraphs）为了部落的兴盛而努力。1994－1997:Table帝国。这一时期有了“Sidebar”这个重要发明。帝国的部落逐渐安定下来，并且开始建造各种复杂的页面布局。1998－1999:巴洛克时期。Table帝国时期建造的标志开始逐渐的破败，浏览器的战争威胁到了文明世界的每个人。同时，大草原上开始不断的出现使用“div”工具的野蛮人。2000－2002:黑暗时代。经济衰落了，Table帝国分崩离析，很多人被吸收到了野蛮人部落中，并且开始学习使用他们的工具。黑暗魔法开始流行，在这个时期，只有最伟大阅读全文

posted @ 2013-02-21 06:09 Joanna Qian 阅读(455) 评论(0) 推荐(0)

移动web开发常用JavaScript代码(转)

摘要：转载：http://mobile.51cto.com/web-321960.htm1.如果网页是在iPhone或Android浏览器中查看，则在主体元素中添加“iPhone”或“Android” 类名Javascript代码if (navigator.userAgent.match(/iPhone/i)) { $('body').addClass('iPhone'); } else if (navigator.userAgent.match(/Android/i)) { $('body').addClass('Android'); 阅读全文

posted @ 2013-02-21 04:22 Joanna Qian 阅读(309) 评论(0) 推荐(0)

3G web开发小结

摘要：（摘自-http://blog.csdn.net/kaosini/article/details/7586295?reload，http://mobile.51cto.com/iphone-276778.htm）进入布局的讨论之前，先来赏析一下已有的iPhone应用：Facebook iPhone EditionFacebook的iPhone版。如果你已经习惯了在iPhone上使用过Facebook，第一次在PC上浏览这个页面会被它的“肥大”吓坏的。从这个页面我们能够得知，让页面自动适应iPhone屏幕的方法就是尽量使用百分比来定义宽度，特别是全页宽度一律用100%，如果是导航栏里面4个项目并阅读全文

posted @ 2013-02-21 01:49 Joanna Qian 阅读(666) 评论(0) 推荐(0)

UC browser对CSS的支持小结——手机网站CSS小结

摘要：近期项目中，白色无下划线的链接在iphone中变成了蓝色有下划线，明显iphone不支持该链接的css，赶紧google、百度一下，发现了不少css样式iphone居然不支持。解决方法：多加一个标签，对a标签定义颜色和下划线，注意a标签不能有背景图片 135727322177 注意加上a标签后并且设置href内容的好处：可以保证兼容各个手机直接点击手机号码直接拨号摘录：UC会判断打开的网站是不是WAP站，从而造成它（UCWEB）认为是WAP站和不是WAP站的解析不同。例如：www.a.com和Wap.a.com两者指向的为同一个服务器的同一个目录，结果会发现两者解析出来的样式不同。... 阅读全文

posted @ 2013-02-21 00:47 Joanna Qian 阅读(2043) 评论(0) 推荐(1)

什么是hasLayout

摘要：（以下内容摘自CSS Mastery一书的中译本《精通CSS 高级Web标准解决方案》第154页，人民邮电出版社，2007）IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。在默认情况下，拥有Layout的元素包括：<html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select&g 阅读全文

posted @ 2013-02-15 04:39 Joanna Qian 阅读(260) 评论(0) 推荐(0)

Javascript类定义方法小结（转）

摘要：http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.htmlJavascript语言不支持"类"，但是可以用一些变通的方法，模拟出"类"。一、构造函数法这是经典方法，也是教科书必教的方法。它用构造函数模拟"类"，在其内部用this关键字指代实例对象。function Cat() { this.name = "大毛";}生成实例的时候，使用new关键字。var cat1 = new Cat();alert(cat 阅读全文

posted @ 2013-02-15 03:37 Joanna Qian 阅读(267) 评论(0) 推荐(0)

Firebug使用小结

摘要：做了很长时间的开发，一直用的是Chrome的Web developer Tool，突然有兴趣看看大名鼎鼎的Firefox的Firebug。大部分参考了http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html一、打开快捷键在Firebug网站上，可以找到它的快捷键设置。最常使用的有：打开Firebug：按F12在单独窗口中打开Firebug：点击firebug窗口右上角的红色箭头标识，或者使用Ctrl+F12/⌘+F12按钮。二、Firebug窗口概览Console标签：主要使用javascript命令行操作，显示阅读全文

posted @ 2013-02-14 01:50 Joanna Qian 阅读(561) 评论(0) 推荐(0)

JavaScript闭包的应用案例——让Onclick事件都能正确的弹出相应的参数

摘要：摘转自：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530074.html要求：让这三个节点的Onclick事件都能正确的弹出相应的参数。<ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li></ul>问题：<script type="text/javascript"> f 阅读全文

posted @ 2013-02-13 04:22 Joanna Qian 阅读(463) 评论(0) 推荐(0)

加速Web开发的9款知名HTML5框架(转)

摘要：与手工编码比起来，HTML5框架在准确性和正确率方面给予了保证。大多数HTML5框架都会有一个组合或者包含一些额外的组件，比如jQuery Scripts。CSS3样式表则以改善多媒体特征的功能性和响应式的Web布局为主。如果你有一个根据固定流程进行的特定项目，为了保证项目刚开始就能有较高的正确率，那么你可以利用HTML5框架来提升整个开发过程，并且让网站拥有一致性结构。伴随着智能手机正在席卷整个移动市场，在移动设备上开发出兼容性高的网站已变的非常重要，相信所有的网站所有者都希望自己的网站能够兼容所有的智能手机平台，HTML5框架可以轻松解决这种跨平台问题。如果你是一名Web设计师，你肯定有兴阅读全文

posted @ 2013-02-13 03:07 Joanna Qian 阅读(355) 评论(0) 推荐(0)

CSS 语法和JavaScript 语法区别

摘要：盒子标签和属性对照CSS语法（不区分大小写）JavaScript语法（区分大小写）borderborderborder-bottomborderBottomborder-bottom-colorborderBottomColorborder-bottom-styleborderBottomStyleborder-bottom-widthborderBottomWidthborder-colorborderColorborder-leftborderLeftborder-left-colorborderLeftColorborder-left-styleborderLeftStyleborder 阅读全文

posted @ 2013-02-12 23:13 Joanna Qian 阅读(467) 评论(0) 推荐(0)

firefox的dl dt dd布局Hack

摘要：手头的一个项目中使用了dl dt dd模拟表格布局，在Chrome中一切看起来很完美，结果到IE和firefox中就完全面目全非。现总结如下：HTML结构如下：<div id="banner"> <img src="images/banner2.png" /> <dl> <dd>$445<br/><span class="banner-text">Full Economy Set</span></dd> <dd>$65<b 阅读全文

posted @ 2013-02-12 06:01 Joanna Qian 阅读(929) 评论(0) 推荐(0)

几个JavaScript 奇技巧技（转）

摘要：http://www.mangguo.org/several-javascript-clever-wicked-craft/#1使用双等号给布尔变量赋值，很容易联想到 var a = b || 123; 的写法var a = b == 123;#2快速转换为布尔值!!a#3防止页面被 iframe 调用if(top !== window) { top.location.href = window.location.href;}#4将 arguments 参数组转换为真实数组function args() { return [].slice.call(arguments, ... 阅读全文

posted @ 2013-02-11 09:36 Joanna Qian 阅读(237) 评论(0) 推荐(0)

用!important解决IE和Mozilla的布局差别（转）

摘要：http://www.w3cn.org/article/tips/2004/91.html在设计《网页设计师》页面的时候，有一个问题一直困扰着我，主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下：IE中的效果Mozilla Firefox中的效果这是因为IE对盒之间距离的解释的bug造成的(参考onestab的" 浮动模型的问题 ")。我一直没有解决这个问题，直到我翻译 " 表格对决CSS--一场生死之战 "时，作者的一个技巧提示帮我找到了解决的方法：用!important。!important是CSS1就定义的语阅读全文

posted @ 2013-02-11 06:11 Joanna Qian 阅读(238) 评论(0) 推荐(0)

常用CSS缩写语法总结（转）

摘要：http://www.w3cn.org/article/tips/2005/103.html使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1；property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2property:value1 value2 value3; 表示to 阅读全文

posted @ 2013-02-11 06:07 Joanna Qian 阅读(259) 评论(0) 推荐(0)

初学Data URI和MHTML

摘要：Data URI——也就是图片转成代码插入网页Data URIData URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入，目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中： data:[<MIME-type>][;charset="<encoding>"][;base64],<data> MIME-type：指定嵌入数据的MIME。其形式是[type]/[subtype]; 阅读全文

posted @ 2013-02-11 05:52 Joanna Qian 阅读(1386) 评论(0) 推荐(0)

CSS实现HTML元素透明的那些事(转)

摘要：转载自：http://dancewithnet.com/2009/09/06/css-opacity/前言：这段时间项目中都有透明、圆角、投影等要求，还必须是跨浏览器的——看来这是大多数现在网站普通应用，匆忙中也只是google、百度了各个的用法，直接拷贝到css文件中，没有仔细研究其原理，正好看到这篇文章，讲的比较不错仔细，转载转载！CSS3草案中定义了{opacity:<length> | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性filter来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支阅读全文

posted @ 2013-02-11 04:43 Joanna Qian 阅读(400) 评论(0) 推荐(0)

CSS Sprites(CSS图像拼合技术)教程、工具集合(转)

摘要：转自：http://blog.bingo929.com/css-sprites-css-techniques-tools-tutorials.htmlCSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目的方式。下面是一些CSS Sprites的使用范例：Xing这个网站将一些按钮、图标以及LOGO做成了CSS Sp 阅读全文

posted @ 2013-02-11 00:04 Joanna Qian 阅读(405) 评论(0) 推荐(0)

A CSS Sticky Footer——CSS底部固定布局分析

摘要：摘自：http://paranimage.com/css-sticky-footer/先说我们为什么会使用到这个CSS底部固定布局解决方案:有这种情况：当正文内容很少时，底部位于窗口最下面。但当改变窗口高度时，会出现重叠问题。如下所述当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。下面是我找到的一个比较完美的阅读全文

posted @ 2013-02-10 23:17 Joanna Qian 阅读(1409) 评论(0) 推荐(0)

移动平台3G手机网站前端开发布局技巧汇总(转)

摘要：了解一些基础，转载地址：http://www.wufangbo.com/mobile-3g-mobile-development自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。WebApp与NativeApp有何区别呢？NativeApp：1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。2 阅读全文

posted @ 2013-02-10 07:29 Joanna Qian 阅读(311) 评论(0) 推荐(0)

几种浏览器内核（百度百科）-转

摘要：几种浏览器内核（百度百科）浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。Trident：IE使用的内核，是微软在Mosaic代码的基础之上修改阅读全文

posted @ 2013-02-10 07:14 Joanna Qian 阅读(715) 评论(0) 推荐(0)

纯CSS无hacks的跨游览器多列布局(转)

摘要：转自：http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html翻译自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根据我的理解改了，让一些初心者更好理解。利用纯CSS创建一个等高多列的布局并不件易事，本教程将着重分析出现在多列布局的多个问题，然后为大家等来一个简单全游览器通吃的解决方法，不使用图片，脚本，CSS hacks并在最严格的XHTML 规范中都能通过验证。问题的症结所在如上图所示，由于各列的内容阅读全文

posted @ 2013-02-10 00:07 Joanna Qian 阅读(265) 评论(0) 推荐(0)

JavaScript正则表达式

摘要：一、正则表达式作用测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字二、正则表达式创建方法——JavaScript1、RegExp构造函数方法 var re = new RegExp(); //RegExp是一个对象,和Aarray一样//但这样没有任何效果,需要将正则表达式的内容作为字符串传递进去 re =new RegExp... 阅读全文

posted @ 2013-02-09 04:24 Joanna Qian 阅读(417) 评论(0) 推荐(0)

视差滚动(Parallax Scrolling)效果的原理和实现

摘要：视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。可以先看看效果：http://www.ok-studios.de/home/一、什么是视差滚动？视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元阅读全文

posted @ 2013-02-08 04:38 Joanna Qian 阅读(37583) 评论(3) 推荐(10)

Webkit内核的浏览器中用CSS3+jQuery实现iphone滑动解锁效果（译）

摘要：译自：http://css-tricks.com/slide-to-unlock/刚刚看到一篇文章，用css3和jQuery实现了iphone滑动解锁效果，真的很神奇！效果链接源码下载链接一、渐变结构原理HTML结构如下<div id="page-wrap"> <div id="well"> <h2><strong id="slider"></strong> <span>slide to unlock</span></h2> </d 阅读全文

posted @ 2013-02-05 02:04 Joanna Qian 阅读(1063) 评论(0) 推荐(0)