最近做一个项目，考虑到充分运用云存储的优势，于是用到了七牛来存储 MEDIA 文件。那上传文件当然就考虑直接利用七牛的接口将文件直接存储到七牛上，而不是从我们的服务器中转一次（当然这也是可以的，不过我总觉得如果真这么玩的话岂不是太傻了点）。对于 Web 端来说，我曾经一度都是偷懒，通过简单的表单提交来完成文件等内容的上传。不过这里因为涉及到了第三方存储，那这方法可就不大奏效了。于是又想到了利用 JavaScript 来做文件上传。当然也就需要折腾一番。虽然不复杂，但好记性也不如烂笔头，还是在这里简单记录一下，方便未来参考并与大家分享。
Danny Man
I’m Danny, and let me give you a warm welcome to visit my blog site. I hope you’ll enjoy it. Also, you can visit my HOME PAGE to learn more about me.
拥抱灵活的流式布局
为什么使用流式布局流式布局可以满足不同分辨率的需求，特别是如今的移动设备和桌面设备在分辨率或是在视口大小上的差异都非常大，曾经经常使用的固定布局就会受到很大的局限。也许可以从媒体查询入手，不过它也具有局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑，缺乏友好性。因此需要借助于百分比布局使网页呈现更为灵活，让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。开始尝试通常，我们的设计都会在诸如Photoshop、FireWorks一类的软件中完成，其中度量元素的大小、边距或文字等都会以固定尺寸进行设计和标注。因...
HTML5的标签演变
在原先的HTML开发中，通常使用不同的id或class来标识一个div的作用，如id为header的div为页面的头部，id为nav的div则作为页面的主导航条。但是对于代码本身，任何用户代理（网页浏览器、屏幕阅读器、搜索引擎爬虫等）看到这段代码都无法确定每个div的意义。HTML5旨在使用全新的语义化元素来解决这个问题。下面就来看看HTML5的全新语义化元素。本文的大部分内容来自于Ben Frain.《Responsive Web Design with HTML5 and CSS3》。<section><section>元素用来定义文档或应用程序中的区域（或节...
Viewport：移动浏览器的虚拟窗口
用现在的手机浏览器打开一个传统的（即仅针对PC版进行优化）网页，大多数情况下可以发现它也能在手机这样的小屏幕上完全显示出来，只是得放大页面才能看清楚。这样的效果是因为这些浏览器把页面放在一个虚拟的窗口（Viewport）中，并且通常这个虚拟的窗口会比屏幕宽，这样就可以保证在渲染这类网站的时候不至于会导致布局混乱的场景。不过有时候，我们可能不需要浏览器这样做，要想覆盖默认的画布缩放设置，可以借助于viewport meta元素。如下面这个示例：<meta name="viewport" content="initial-scale=2...
让媒体查询告诉你关心的信息
媒体查询是响应式网站设计中不可少的，它能够检测用户浏览器或设备的一些有用信息，以便让我们为用户提供一套最合适的渲染样式。创建媒体查询时，最常用的是设备的视口宽度（width）和屏幕宽度（device-width）。不过还有其他很多可供媒体查询检测的特性，下面是一个总结，分享的同时也方便自己查阅。
媒体特性
说明
...
-webkit-appearance控制默认样式
在写HTML+CSS的时候，会发现在如iPhone里的Safari这样的Webkit内核浏览器中，部分控件如按钮会呈现具有自己独有的风格，甚至会影响我们自己所写的样式。这是受-webkit-appearance属性的影响。要想去掉默认的样式很简单 —— 设置该属性值为none：
-webkit-appearance: none;
不过该属性还有一个功能就是可以改变元素默认的样式而做一直“伪装”。比如要将span模拟成按钮，即对其增加一个css：
<span style="-web...
WinPhone中IE的字体大小
在Windows Phone中，经常会看到网页中的文字被默认放大了，这可算是一个功能特色吧，不过时常会让页面变得很难看。关于这个功能的描述，微软官方网站中是这样描述的：Internet Explorer for Windows Phone gives developers the option to control the webpage text size by setting the–ms-text-size-adjust CSS property. When the user double-taps a page element, Internet Explorer fo...
HTTP cookies 讲解
全文转载自：http://my.oschina.net/hmj/blog/69638HTTP cookies，通常又称作"cookies"，已经存在了很长时间，但是仍旧没有被予以充分的理解。首要的问题是存在了诸多误区，认为cookies是后门程序或病毒，或压根不知道它是如何工作的。第二个问题是对于cookies缺少一个一致性的接口。尽管存在着这些问题，cookies仍旧在web开发中起着如此重要的作用，以至于如果cookie在没有可替代品出现的情况下消失，我们许多喜欢的Web应用将变得毫无用处。cookies的起源早期Web开发面临的最大问题之一是如何管理状态。简言之...
一条注释引发的“血案”
今天在调试页面的时候出现一个很奇怪的现象：所有的页面只在IE下显示非常奇怪，但检查CSS又并未发现严重的兼容性问题。正百思不得其解时，同事将置于HTML代码最上面的注释删除后，一切恢复正常。于是想到了一个东西 —— 文档类型。虽然在之前也了解过不少文档类型这方面的东西，但因为之前自己并未尝试过在文档类型申明之前加入任何东西，故一时半会儿没醒悟过来。文档类型作为一个决定浏览器对于HTML文档采取何种模式的“开关”，应出现在HTML文档的最前面。但有时候出于某些原因，有的作者会在 其之前放置一些内容如注释，从而让浏览器感到极为“困惑”，它第一眼看到的不是文档类型的申明，故可能会认为页面没有文...
HTML中的几种列表元素
在网页设计中，列表元素是很常见，而使用方法也是很简单的。不过我经常使用ul，几乎无视了其它几种常见元素的用法，故在此做个记录。1.无序列表（ul）：
<li>首页</li>
<li>订阅</li>
<li>关于</li>
</ul>在没有样式表的情况下，其表现如下：2.有序列表（ol）：
<li>...
