- 浏览: 65140 次
- 性别:
- 来自: 北京
最新评论
-
pucxin:
自己顶个沙发,留个话
Web版画图,目前支持SVG,后续支持CANVAS,进来说一两句
文章列表
正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。现在我分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用。
1. 响应式Video (demo)
响应式video的CSS技巧是由tjkdesign.com发现的。我之前的一篇文章介绍过它,你可以
来源:Responsive Design in 3 Steps
响应式网页设计,毫无疑问地变得越来越重要了。如果你还没听说过响应式设计,可以先看看我之前发的文章响应式网站。对新手来说, 响应式设计听起来可能会有点复杂, 但事实上,它比你想象的简单得多。为了让你能快速入门,我准备了一个简易的教程。通过这三个步骤,你一定可以了解响应式设计的基本原理和media query(在你有一些CSS基础的前提下)。
通过灵活的栅格和Media Queris,响应式Web设计能够让页面布局适应不同的屏幕尺寸。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。下面我列出了一些比较热门的适应多设备的布局模式。
最灵活的(Mostly Fluid)
最受欢迎的模式或者就是这种最简单的方式:在更大屏幕使用更大margin的多列布局,依赖于灵活的栅格和图片,在小屏幕中某列内容往下排。
我把这种模式列为“最灵活”,是因为在很多尺寸的屏幕中,主要布局结构并没有很大改变,直到在很小的屏幕当中。这个设计依
在一些被常规的页面布局当中,我们常常需要通过position定位HTML元素来实现我们想要的效果。但是在这个办法在IE6中常常会出现各种问题。例如,我们想让一个子元素溢出其父元素之外显示,而影响父元素本身和其他兄弟元素的样式,我们可以这样写:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T ...
英文地址:http://developer.yahoo.com/performance/rules.html中文地址:http://www.dudo.org/article.asp?id=218 我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外,图片和Coockie也是我们网站中几乎不可缺少组成部分,此外随着移动设备的流行,对于移动应用的优化也十分重要。这主要包括:Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片:
优化图像
优化CSS Spirite
英文地址:http://developer.yahoo.com/performance/rules.html中文地址:http://www.dudo.org/article.asp?id=216 在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS:
把样式表置于顶部
避免使用CSS表达式(Expression)
使用外部JavaScript和CSS
削减JavaScript和CSS
用<link>代替@import
...
英文地址:http://developer.yahoo.com/performance/rules.html中文地址:http://www.dudo.org/article.asp?id=214 Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图 ...
英文地址:http://developer.yahoo.com/performance/rules.html中文地址:http://www.dudo.org/article.asp?id=215 在本系列的第一节中,讲了提高网站性能中网站“内容”有关的10条原则。除了在网站在内容上的改进外,在网站服务器端上也 ...
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.
常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.
1. Beautify Javascript
js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scr ...
大家都知道万恶的IE在ajax中往往只读取第一次ajax请求时候的数据,其余时候都是从cache提取数据,(太懒了T_T)。原生的JS清除ajax缓存的方法多,但是终觉有点繁琐,如果是用jquery的同学,就设置一个参数就OK了,那就是cache: false,比如:
1
2
3
4
5
6
7
8
9
10
11
$.ajax({
url: "mms-draft!getMmsDraftList",
cache
随着WebApp突飞猛进的发展,Javascript写的WebApp规模越来越庞大,比如典型的代表产品腾讯WebQQ、HTML5游戏等等,Javascript越来越需要大量的开发人员多多人协作开发。同时HTML5、CSS3等新技术和NodeJs项目的高速发展,这几年JavaScript语言借着各种新API陆续被运用到从移动设备到服务器的多个”新领域”中。
但JavaScript语言自身由于ECMAScript第四版被放弃而一直没有多少改进。和借HTML5之名过度宣传的各种新API相比,语法层面通过严格模式(Strict Mode)进行的改进几乎可以用不为人知来形容。学习了解严格模式之后, ...
编辑器
1、Code Mirror
又一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。
视频
2、Html5 media
html5media是一个JavaScript音频/视频播放器能够让每一个浏览器都能够播放在HTML5多媒体标签中定义的多媒体文件。 对于不兼容的浏览器,该播放将采用支持Flash的FlowPlayer播放器来代替。
地图
3、Gmap
GMAP3 插件用来将Google Maps插入到网页中,Google在其产 ...
网络上关于各种语言和应用软件的速查手册和快速参考指南有很多很多,不幸的是当我们需要的时候,总是很难找到,所以我决定花点时间尽可能的收集更多的资源并分享给大家,记得推荐一下哦
索引
CSS
HTML
Javascript
PHP
MySQL
Color/Fonts/SEO
从最初的dreamweaver,到Notpad++,再到aptana,每一款IDE总让我我感觉少了点什么东西。WebStorm却让我眼前一亮,虽然公司项目所用的开发环境是eclipse+aptana(主要是方便团队协作和工程调试),但是其他时间我都会学习使用WebStorm,现在4.0版本已经出来了,让我们来看看它都有哪些强大之处吧:
浏览器支持细节提示
关键字,标签,变量,参数和功能的JavaScript代码完成是基于支持DOM的流行的浏览器(IE,火狐等)标准,可以显示在不同浏览器之下的支持细节。
http含义:
http 200:-文件被正常的访问
http 302:临时重定向
HTTP错误列表
HTTP 400 - 请求无效
HTTP 401.1 - 未授权:登录失败
HTTP 401.2 - 未授权:服务器配置问题导致登录失败
HTTP 401.3 - ACL 禁止访问资源
HTTP 401.4 - 未授权:授权被筛选器拒绝
HTTP 401.5 - 未授权:ISAPI 或 CGI 授权失败