摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html 本节课我们将介绍，如何使用css在不修改图片源的前提下装饰你的图片画廊。这里用到的技巧也很简单，就是在图片之前创建一个<span>，并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活，demo中介绍了20多种样式，大家可以参看。 demo预览地址：http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-i 阅读全文
摘要：
作为Web设计师，你的网站在各种浏览器中有完全一样的表现是很多人的目标，然而这是一个永远无法真正实现的目标，很多人认为，完美的跨浏览器兼容并不必要，这样说虽然没错，但在很多情形，一种近似的兼容还是很容易实现的。51CTO推荐阅读：Web标准化 跨浏览器开发教程理解CSS盒子模型如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码，透彻地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不难，且基本支持所有浏览器，除了某些特定条件下的 IE 浏览器。CSS 盒子模型负责处理以下事情:◆一个blcok（区块）级对象占据多大的空间◆该对象的边界，留白◆盒子的尺寸◆盒子与页面其它元素的相对位 阅读全文
摘要：
原文地址：http://blog.163.com/seo_luofeng/blog/static/17657502420112302540348/?suggestedreading&wumii 从事跟网站有关的懂行的人一般都会使用firefox浏览器,那肯定离不开firefox下面强大的插件,而Firebug是Firefox下的一款开发类插件，现属于Firefox的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖 阅读全文
摘要：
下面是14条特殊情况仅供参考：1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。3.横向上的撑破容器问题，。 阅读全文
摘要：
CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理 方法并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie 阅读全文
摘要：
原文地址：http://www.nowamagic.net/librarys/veda/detail/634 浏览器可以分为两部分，shell+内核。其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。 内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，.. 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779878.html html5为web的form表单增强了一个功能，他就是input的占位符--placeholder。占位符的作用是，当input内容为空或者没有被聚焦的时候，input显示占位符的内容。这是个很棒的功能，但不是所有的浏览器都支持。本教程将向你介绍，如何使用Modernizr 类库去判断浏览器是否支持该属性，然后使用jquery动态显示占位符。 demo预览地址：http://webdesignerwall.com/demo/html5... 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/23/2780892.html 之前的教程《HTML5实践 -- css3图片样式》，我介绍了如何为图片添加background-image包装，借助box-shadow 和 border-radius为图片设置多种多样的样式，有兴趣的朋友可以回头阅读。但是最近我在设计PhotoTouch主题的时候遇到了问题，background-image大小不能调整，这对于响应式设计就不太理想了。今天我们将尝试解决问题。 demo预览地址：http://webdesignerwal... 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/22/2779876.html 在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。 demo预览地址：http://webdesignerwall.com/demo/css3-image-styles/ 问题 通... 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html 今天我们的内容是css3的text-shadow、box-shadow 和 border-radius几个属性的介绍，他能增强页面布局，值得学习。 RGBA 前三个值分别代码RBG的值，最后一个值代表透明度（0表示透明，1表示不透明）。 RGBA可以用于任何和color有关的属性，例如字体颜色、边框颜色、背景颜色和阴影颜色等。 文字阴影 文字阴影的结构按照这样的顺序：x-offset, y-offset, blur, 和 colo... 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779845.html 今天我将介绍如何使用css制作一个可伸缩的mobile的搜索框，他非常适合于mobile的响应式设计的需要。本教程没有使用JavaScript，只使用了原生css属性，所以这是一个非常简单而高效的实现。 demo预览地址：http://webdesignerwall.com/demo/expandable-search-form/ 目的 在移动设备上显示信息，要做到寸土寸金，珍惜每一寸的屏幕。例如搜索框的设计，在一般情况下处于收缩状态... 阅读全文
摘要：
桌面网站的一些设计原则是大家广泛认可，并积极付诸实践的。例如：系统状态保持可见，避免错误信息，在错误发生时，应该提供一些具体的指南帮助用户解决这些问题等。很多人认为这些适合网页设计的原则和指南也同样适用于移动平台。毕竟，网页设计是从一些基础的，基于文本的HTML出发，才发展成为今天的WEB标准的。因此，我们也可以想象依靠这些原则，手机站点的设计也会和网页站点的设计一样，获得巨大的成功。然而，移动站点的设计仍处于初步阶段。Jakob Nielsen在2009年移动可用性调查时指出，相比与网页站点80%的成功率，用户使用移动设备查看移动站点时平均成功率只有64%，形式要素的差 异对用户交互成功率的 阅读全文
摘要：
上一篇我们谈到了移动网站中的标签，想必很多人也很想了解Mobile CSS的情况吧，本文将和大家一起探讨移动网站中的CSS标准。介绍Mobile css的标准也是有些复杂的，与前一篇文章中提到的类似，之前存在着一个W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事实上它们都是CSS 2.1的子集，而且内容非常接近，不同的是，WAP CSS 1.0针对移动设备加入了一些扩展，这些扩展通过-wap-前缀来实现。后来，W3C将二者进行了整合，吸收了WAP CSS1.0的一些优点，推出了CSS Mobile Prifile 2.0规范，它也是CSS 2.1的 阅读全文
摘要：
在 此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解， 那现在就开始往下阅读吧……1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scal 阅读全文
摘要：
很多网站都通过User-Agent来判断浏览器类型，如果是3G手机，显示手机页面内容，如果是普通浏览器，显示普通网页内容。谷歌Chrome浏览器，可以很方便地用来当3G手机模拟器。在Windows的【开始】–>【运行】中输入以下命令，启动谷歌浏览器，即可模拟相应手机的浏览器去访问3G手机网页：谷歌Android：chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Versio 阅读全文
摘要：
iPhone 和 iPad 等苹果设备使用主屏幕 (Home Screen, 也称桌面) 管理应用程序, 还可以通过浏览器的添加到主屏幕功能将网站链接作为快捷方式添加为主屏幕图标.是否你也想过为网站定义一个图标, 如果用户将网站添加至主屏幕, 网站链接看起来更像原生程序, 也能获得更多的关注. 除了兼容手机端的浏览体验, 我们还能做得更多, 为 iPhone 和 iPad 自定义网站的主屏幕图标也算其中之一, 本文将对网站的主屏幕图标及其设定方法为进行详细介绍.网站的主屏幕图标iPhone/iPad 上的原生浏览器可以向主屏幕添加小图标, 作为网站入口. 如下:如果网站没做过兼容处理, 小图标 阅读全文
摘要：
苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的，之前在网上查了下相关的资料和苹果的开发文档手册，对这两中属性区别说的不够详细，导致现在大家开发的时候有些混淆。苹果safari浏览器定义的这两种属性是为了苹果移动设备（ipod、ipad、iphone）对移动网站-mobile web进行收藏（“添加到桌面图标”）的时候增加的图标定义属性，当你建立一个移动网站（俗称：手机站，mobile web），避免不了为移动站的图标进行设置（这里有篇关于苹果meta设置详解的文章>>点击查看<<）， 阅读全文
摘要：
自动化测试另外一个比较重要的内容点是性能测试，很多问题可能有不止一种解决方案，很多时候并不知道哪个是最好的解决方案。例如有很多创建javascript对象的方法，使用javascript构造器、使用函数的方法或者使用闭包。我们可能会从可测试化、灵活性和性能的角度去考虑使用哪种方式。足见性能是相当重要的一点。 1.基准和相对性能 当一个问题我们有两个以上的解决方案的时候，判断哪个解决方案更好的原则很简单，就是哪个的性能更好。判断的原则也很简单：1.创建new Date()作为开始时间；2.执行要衡量的代码；3.代码执行完毕，创建new Date()作为结束时间，减去开始时间算出总时长；4... 阅读全文
摘要：
TDD是一个迭代的开发过程，他包括下面的步骤：1.编写测试；2.运行测试，观察失败；3.确保测试通过；4.重构，减少重复。 每次迭代中，测试就是规范。在我们完成开发之后，测试就可以通过了。之后我们就需要进行减少重复代码和提高设计的重构工作，然后再次运行测试，并保证其通过。 虽然TDD不主张预期的大设计，但是我们在TDD开始之前还是需要做个简单的设计。我们要如何写自己的第一个设计呢？当我们获得了足够信息可以制定测试的时候，测试代码的编写，本身就是设计。我们指定在特定情况下特定代码的行为，系统之间组件如何响应，以及他们之间如何组合。下面我们会举例，以便大家更好的学习。 TDD中的迭代时间... 阅读全文
摘要：
通过之前文件关于单元测试的介绍，我们学会了如何减少代码的缺陷，通过回归测试抓取bug，减少对公共测试的依赖提高开发效率。本章我们的关注点将会放在测试驱动开发（TDD）上，他是测试先行、开发置后的开发模式。他有很多的好处，例如：更好的可测试代码、更简洁的接口和可以提高开发者信心的代码质量。 测试驱动开发的目标和目的 测试驱动开发的目标是简洁的代码。TDD是一种迭代的开发过程，每个迭代式以写单元测试开始，单元测试可以作为将要开发功能的规范文档。短期迭代对代码的反馈是及时的，这样可以更容易发现我们不好的设计。编写开发代码之前，先写单元测试还可以提高单元测试覆盖率。 1.开发置后 传统的开... 阅读全文