2013 年 6月随笔档案 - Joanna Qian

摘要：方法一、li前面加before伪类菜单 menu1 menu2 menu3 menu4 二、或利用相邻选择符加after伪类菜单 menu1 menu2 menu3 menu4 ... 阅读全文

posted @ 2013-06-29 04:42 Joanna Qian 阅读(3828) 评论(0) 推荐(0)

摘要：http://overapi.com/ 多种api http://www.google.com/webfonts# 谷歌字体库 http://coolshell.cn/articles/870.html web设计速查卡 http://www.365testing.com/sc/peise/index.html 配色宝典 http://www.114la.com/other/rgb.htm 颜色对照表 http://www.css3maker.com/ css3 效果生成器 http://www.colorzilla.com/gradient-editor/ css3渐变生成器 ... 阅读全文

posted @ 2013-06-28 22:03 Joanna Qian 阅读(364) 评论(0) 推荐(0)

Web设计的速查卡（转）

摘要：一、排版1、VisiBone Font CardDownload:GIF2、常用字体表(HTML)3、混合字体(PDF)二、单元/尺寸1、Points 和Pixels近似转换表(HTML)Megapixels 表Download:GIF三、CSS/CSS 框架1、Blueprint CSS 速查卡Download:PDF2、YUI Library: CSS Reset, Base, Fonts, and Grids(PDF)3、CSS 速查卡(PDF)4、Apple’s CSS 速查卡(Mac Dashboard Widget)三、HTML/XHTML1、HTML & XHTML 标识阅读全文

posted @ 2013-06-28 21:45 Joanna Qian 阅读(362) 评论(0) 推荐(0)

一个简单的AJAX示例(转)

摘要：转载自：http://www.cnblogs.com/rubylouvre/archive/2013/01/08/2851051.html，为了防备面试，备份一份吧！！虽然现在有了框架，许多AJAX调用直接调用它们的API就可用。但有些极端情况，比如面试，比如第三方应用不想加载这些库，我们就只有自己写。这时想必有许多人要疯狂google，百度了。网上太多垃圾信息，我还是在自己博客上保存一份吧。我的实现：var ajax = new(self.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP")ajax.onreadystat 阅读全文

posted @ 2013-06-28 21:29 Joanna Qian 阅读(301) 评论(0) 推荐(0)

Sencha Touch快速入门（译）

摘要：翻译自：http://www.sencha.com/learn/sencha-touch-quick-start/1、下载Sencha Touch SDK——下载链接2、安装Safari或Chrome——IE不适合测试Sencha touch application，Sencha只在WebKit-based的浏览器或设备上运行。3、安装测试服务器——虽然Sencha可以在客户端直接运行，但服务器端的功能更加齐全。IIS或XAMPP等软件均可使用4、解压Sencha Touch SDK解压或拷贝Sencha到C:\xampp\htdocs目录下，并重命名为touch现在可以进行测试了：http: 阅读全文

posted @ 2013-06-27 23:49 Joanna Qian 阅读(447) 评论(0) 推荐(0)

jQuery学习笔记2——表单操作

摘要：一、获取和设置表单的值：val()和text()1. 获取表单的值：$("#username").val();2.设置表单的值：$("#username").val("我来了");$("input[name='password']").val()//checkbox得到的是一个数组，需要进行遍历$("input[name='interest']:checked").each(function(n){ alert($(this).val()); }); //chec 阅读全文

posted @ 2013-06-27 05:05 Joanna Qian 阅读(610) 评论(0) 推荐(0)

图片的响应式实现

摘要：一、背景图片响应式实现1、为了适配 Retina屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过Media Queries使背景图片尺寸减小一倍「background-size:50% 50%;」，例如：.mod .hd h3 {background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */}/* ------------- Retina ------------- */@media only screen and (-o-min-d 阅读全文

posted @ 2013-06-27 02:39 Joanna Qian 阅读(741) 评论(0) 推荐(0)

快速开发 jQuery 插件的 10 大技巧(转)

摘要：1. 把你的代码全部放在闭包里面这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。不过你的插件的代码只为你自己的插件服务，所以不存在这个问题，你可以把所有的代码都放在闭包里面。而方法可能应该放在Prototype方法内部，我们后面会讲到这一点。(function($){ //code here})(jQuery);2. 提供插件的默认选项你的插件应该会有一些选项是可以让开发者设置的，所以提供恢复默认选项是以有必要的。你可以通过jQuery的extend功能来设置这些选项：var defaultSettings = { mode : ’Pencil’... 阅读全文

posted @ 2013-06-27 02:04 Joanna Qian 阅读(228) 评论(0) 推荐(0)

采用预取（Prefetch）来加速你的网站(转)

摘要：一、DNS预取如果你像我一样想在网站上有一个Twitter小程序，还有网站分析，再也许一些网页字体，那么你必须要链接到一些其它域名，这意味着你将不得不引发DNS查询。我的建议通常是，不要还没有先适当的考虑性能影响就使用某个或任何一个小程序，但对于你认为确实需要的，下面的将很有用……因为这些东西都存在于其它域名，比方说这就意味着你的网站字体CSS将会同你自己的CSS并行下载，从某种意义上说是一种好处，但是脚本将仍会阻塞（除非它们是异步的）事实上，这里的问题是DNS查询牵涉到了第三方域名。幸运的是，有一个相当快又简单的办法来加速这个过程：DNS预取。DNS预取所做的恰恰就是凭证领餐(on the 阅读全文

posted @ 2013-06-27 00:05 Joanna Qian 阅读(892) 评论(0) 推荐(0)

HttpWatch工具简介及使用技巧(转)

摘要：HttpWatch是一个可用于录制HTTP请求信息的工具，由Simtec Limited公司开发，其官网为：Http://www.httpwatch.com，HttpWatch只支持IE和Firefox，也就是说只有当你用IE或Firefox访问网页时，它才会进行录制，不像Sniffer和Omnipeek那样监控所有数据，但对于网站分析来说，已经是不可多得的利器了。HttpWatch的安装很简单，没什么说的，来看看它的组成，HttpWatch有两部分组成：一个是嵌入到IE或Firefox中用于收集、查看、保存HTTP信息的插件一个是独立运行的日志查看器，叫做HttpWatch Studio一、阅读全文

posted @ 2013-06-26 09:25 Joanna Qian 阅读(2952) 评论(0) 推荐(0)

iScroll框架的使用和修改

摘要：iScroll 的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。而 iScroll 就是为了解决这个问题。... 阅读全文

posted @ 2013-06-26 00:36 Joanna Qian 阅读(10603) 评论(3) 推荐(3)

软件测试面试-如何测试一个杯子(转)

摘要：转：http://www.cnblogs.com/TankXiao/p/2381284.html在软件测试的面试中，经常会碰到类似的问题。比如：如何测试一个杯子，或者如何测试一只笔。要求你设计20个以上的test case.这类的面试题目，是考察面试者是否熟悉各种软件测试方法，设计test case的能力, 以及test sense。我回答这类问题的思路, 从软件测试的各种不同方法来联想, 具体如下。功能测试(Function test)能否装水，除了装水，能否装其他液体。比如可乐，酒精能装多少ML的水杯子是否有刻度表杯子能否泡茶，跑咖啡杯子是否能放冰箱，做冰块杯子的材质是什么（阅读全文

posted @ 2013-06-25 09:58 Joanna Qian 阅读(356) 评论(0) 推荐(0)

判断站点访问的终端类型（移动端还是pc端）的方法（转）

摘要：要了解某个网站是在移动设备上打开的还是在pc web浏览器中打开的，我们可以有以下综合的几种方式来搞定：通过判断Request.UserAgent中的具体信息来分析判断，因为UserAgent包含了很多的信息，所以我们可以根据其中的某些信息来进行判断，具体的判断方式如下：（1）string strUserAgent = Request.UserAgent.ToString().ToLower(); if (strUserAgent != null){ if (Request.Browser.IsMobileDevice == true || strUserAgent.Contains(&quo 阅读全文

posted @ 2013-06-25 04:20 Joanna Qian 阅读(817) 评论(0) 推荐(0)

负margin应用案例几则（转载+总结）

摘要：（一）自适应布局——左栏改右栏这里先写个一列固定列宽，另一列自适应的两列布局，效果图：侧栏移至右边，效果图：其HTML main-inner sidebarcss.wrap { width: 100%; margin: 0 auto; color: #FFF; text-align: center; line-height: 50px; }.main { float: left; width: 100%; height: 60px; margin-right: -100%; background: #000; }.sidebar { float: left;... 阅读全文

posted @ 2013-06-24 04:21 Joanna Qian 阅读(379) 评论(0) 推荐(0)

45个关于移动网络设计与开发的实用指南交互设计（转）

摘要：好东西，感谢淘宝feeling的整理，很有用iOS（iPhone和iPad）实用指南·Safari Web内容指南（PDF格式）·准备为您的网页适配iPad·iPhone上的Safari图形，媒体及视觉效果如何编码的·Safari的HTML参考（PDF格式）·Safari的CSS参考（PDF格式）·Safari的CSS3的视觉效果指南（PDF格式）·Safari浏览器客户端存储和离线应用程序编程指南（PDF格式）·苹果计划参考网址Android浏览器实用指南·从Android屏幕定位WEB应用服务阅读全文

posted @ 2013-06-24 03:36 Joanna Qian 阅读(330) 评论(0) 推荐(0)

iScroll框架解析——Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决（转）

摘要：移动平台的活，兼容问题超多，今儿又遇到一个。客户要求在弹出层容器内显示内容，但内容条数过多，容器显示滚动条。按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;-webkit-overflow-scrolling:touch;完事！可拿设备去测的时候有趣了，Pc allbrowser正常，ios正常，android失效。泥马在android下效果与 overflow:hidden;一样，溢出部分隐藏了！水平有限，用尽吃奶力各种解决未果，网上一顿乱搜，Google搜索有人说是android系统BUG，最后查到比较靠谱的解决是国外某高手开发了个JS库，名曰iScro 阅读全文

posted @ 2013-06-24 03:34 Joanna Qian 阅读(11742) 评论(0) 推荐(0)

CSS：scrollbar的属性及样式分类

摘要：overflow 内容溢出时的设置（设定被设定对象是否显示滚动条）overflow-x 水平方向内容溢出时的设置overflow-y 垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。scrollbar-3d-light-color 立体滚动条亮边的颜色（设置滚动条的颜色）scrollbar-arrow-color 上下按钮上三角箭头的颜色scrollbar-base-color 滚动条的基本颜色scrollbar-dark-shadow-color 立体滚动条强阴影的颜色sc... 阅读全文

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

开发人员需知的Web缓存知识(转)

摘要：什么是Web缓存，为什么要使用它？缓存的类型：浏览器缓存；代理服务器缓存；网关缓存；Web缓存无害吗？为什么要鼓励缓存？Web缓存如何工作如何控制缓存和不缓存：HTML Meta标签 vs. HTTP头信息；Pragma HTTP头信息（以及为什么不起作用）；使用Expires HTTP头信息控制不过期；Cache-Control（缓存控制）HTTP头信息；验证器和验证；创建支持缓存网站的小技巧；编写支持缓存的脚本；常见问题解答；实现需注意的：Web服务器端；实现需注意的：服务端脚本；参考文档和拓展阅读；关于本文档；什么是Web缓存，为什么要使用它？Web缓存游走于服务器和客户端之间。这个服务阅读全文

posted @ 2013-06-21 05:06 Joanna Qian 阅读(329) 评论(0) 推荐(0)

Android开发人员必须掌握的10 个开发工具+应该深入学习的10个开源应用项目

摘要：一、Android开发人员必须掌握的10 个开发工具Android SDK 本身包含很多帮助开发人员设计、开发、测试和发布 Android 应用的工具，在本文中，我们将讨论 10 个最常用的工具。#1: Eclipse ADTEclipse ADT 是 Eclipse 平台下用来开发 Android 应用程序的插件。#2: The SDK and AVD Manager该工具包含很多重要的功能，包括管理不同的 Android SDK 版本（构建目标），你知道的 Android 的版本众多，API上有些兼容性问题。另外该工具还用于管理 Android 虚拟设备配置 (AVD) ，用来配置模拟器。阅读全文

posted @ 2013-06-20 10:51 Joanna Qian 阅读(572) 评论(1) 推荐(0)

jdk与jre的区别（转）

摘要：很多程序员已经干了一段时间java了依然不明白jdk与jre的区别。JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。如果安装了JDK，会发同你的电脑有两套JRE，一套位于 \jre 另外一套位于 C:\Program Files\Java\jre1.5.0_15 目录下，后面这套比前面那套少阅读全文

posted @ 2013-06-20 10:43 Joanna Qian 阅读(356) 评论(0) 推荐(0)

图像替换技术

摘要：1、Fahrner图像替换为了表示对发明者Todd Fahrner的尊重，这个技巧随后也被叫做“Fahrner图像替换（Fahrner Image Replacement,FIR）”。该技巧的实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTMl标记：<h1 id="pageHeader"><span>webjx.com</span></h1>我们可以使用下面的这段CSS容易地实现图像替换：#pageHeader {ba 阅读全文

posted @ 2013-06-20 04:00 Joanna Qian 阅读(962) 评论(0) 推荐(0)

jQuery学习笔记1——操作属性

摘要：一、获得和设置内容三个简单实用的用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容,得到匹配元素集合中每个元素的文本内容结合,包括他们的后代, 即由所有匹配元素包含的文本内容组合起来的文本html() - 设置或返回所选元素的内容（包括 HTML 标记），从匹配的第一个元素中获取HTML内容val() - 设置或返回表单字段的值，获取匹配的元素集合中第一个元素的当前值，主要用于获取表单元素的值, 至于元素,.val()方法返回一个包含每个选中的 option 的数组prop()-获取在匹配的元素集中的第一个元素的属性值,如果没有匹配的元素。它返回undef 阅读全文

posted @ 2013-06-18 04:37 Joanna Qian 阅读(622) 评论(0) 推荐(0)

基于物理尺寸的响应式设计(转)

摘要：两种Queries之间的细微区别比较如下两个media-query声明：@media (min-resolution:341dpi) and (min-width:767px) > { }与@media (max-resolution:131dpi) and (min-width:767px) > { }乍一看，是不是没啥子区别？当然不是了。第一段声明是针对HTC Windows Phone 8X，而第二段针对iPad2。通过使用resolution query，可以将大小不同的设备区分开来。目前看来，@media (min-width: 767px){ }对HTC和iPad而言没阅读全文

posted @ 2013-06-18 00:56 Joanna Qian 阅读(570) 评论(0) 推荐(0)

Javascript/jquery异步加载使用方法详解(转)

摘要：关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execution），async 属性， defer 属性一、同步加载与异步加载的形式1. 同步加载我们平时最常使用的就是这种同步加载形式：<script src="http://yourdomain.com/script.js"></script> 同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。js之所以要同步执行，是因为 js 中可能有输出 document 内容、修改d 阅读全文

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