摘要：
什么是viewport，为什么需要viewportviewport：视口，视觉窗口，显示区域。在显示面积上手机屏幕相对桌面显示器要小很多，在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计，很少考虑到适应手机屏幕，所以如果用手机浏 览大多网站时会出现问题，比如常见固定宽度的网页会出现横向竖向滑动条，当然这不算什么大问题；但如果是浏览流动布局的网页那情况会非常糟糕，设想一个宽 度为30%的侧边栏对于320px手机屏幕而言也就96px，只能容纳8个12px的汉字，可阅读性非常差。为了让手机也能获得良好的网页浏览体验，Apple找到了一个办法：在移动版(iOS)的Safari中定义了view 阅读全文
摘要：
十一长假已然过去了一大半。今天倒真是晴朗的不行，向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生，对每年的几次长假就无比珍惜，想方设法让每一天都尽量过的饱满一些；夜里闭上眼，满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园...也许需要出门走一走了。OK开始说正经的了。在之前一篇译文中，我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题，我们将从前文介绍过的“弹性布局结构”这方面出发，通过一个具体的实例来深入学习。如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。除了使用传统的台 阅读全文
摘要：
用来练手，需要说的不多这个例子用了两种方式实现第一种：直接给每一行绑定事件缺点：当数据量过大，性能会大打折扣代码： 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>table隔行变色</title> 6 </head> 7 8 <body> 9 <style> 10 thead tr { background:#06F;} 11 </style> 12 <ta 阅读全文
摘要：
在这个列子中，练习了table的操作，主要有：tBodies、rows、cells，还有有关数组的排序方法：sort先上代码：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>table排序</title></head><body><table id="tableTest" width="400" border="1"> <tbody> 阅读全文
摘要：
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多 阅读全文
摘要：
我们都知道在IE6 7 中用*display：block；*zoom：1；可以解决 inline-block 的兼容问题很多人认为IE6 7 是不支持inline-block的，严格来说应该是：IE6 7 对 inline-block 支持的不够完全这个要分两种情况来说：第一种：当块级元素设置：display：inline-block；IE6 7 就出现了不是我们想要的结果这样就需要我们前面提到的*display：block；*zoom：1 来做兼容了。第二种，当行内元素，如：span 设置：display：inline-block；就不会出现任何问题我们完全可以不去处理兼容问题。更多的请看： 阅读全文
摘要：
这个列子用到了函数不定参（arguments）这个知识点还有有关样式的一些知识，我们都知道obj.style 可以设置、返回行间的样式如果非行间样式，用这个就不靠谱了，所以例子中用到了obj.currentStyle 和 getComputedStyle这两个都是设置、返回计算后的样式的其中obj.currentStyle 只有IE才有效getComputedStyle 在firefox chrome 中有效废话不说了，上代码<!DOCTYPE HTML><html><head><meta charset="utf-8">&l 阅读全文
摘要：
文章出处：http://www.iyunlu.com/view/css-xhtml/55.html浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着， 阅读全文