摘要：
View Code View Code 阅读全文
posted @ 2013-06-05 17:26
jzm17173
阅读(241)
评论(0)
推荐(0)
2013年6月5日
2013年6月2日
摘要：
HSL模式基于一个360°的色相环，60°时为黄色，120°时为绿色，180°时为青色，240°时为蓝色，300°时为洋红色，360°时为红色opacity设置的透明度会对整个元素产生影响，使用HSLA或RGBA则可以仅让元素的某些部分由透明效果<!doctype html><html lang="zh-CN"><head> <meta charset="utf-8" /> <title></title> < 阅读全文
posted @ 2013-06-02 19:39
jzm17173
阅读(483)
评论(0)
推荐(0)
摘要：
<!doctype html> 大小写没有区别lang属性用来指定页面元素内容和元素属性值的主语言没有结束标签的斜线，没有引号，大小写混杂。甚至，省略head元素，页面同样有效html5允许每个section容器有自己独立的大纲结构。这样你就不必总想着现在是几级标题了section用来定义文档或应用程序中的区域（或节）。例如，可以用它组织你的个人信息，一个section用于联系信息，另一个用于新闻动态div如果你只想将某个元素包裹起来以便设置样式，那应该和以前一样继续使用divnav用来定义文档的主导航区域article用来包裹独立的内容片断。当搭建一个页面时，想想你准备放入art 阅读全文
posted @ 2013-06-02 19:37
jzm17173
阅读(234)
评论(0)
推荐(0)
摘要：
目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度如果我们给body标签设置文字大小为100%，给其他文字都使用相对单位em，那这些文字都会受body上得初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户提出将页面文字统一放大一点，我们就可以只修改body的文字大小，其他所有文字也会相应变大现代浏览器的默认文字大小都是16像素。因此一开始给body标签应用下列任何一条规则所产生的效果都一样：font-size:100%;font-size:16px;font-size:1em;<!DOCTYPE HTML><html lang="en&quo 阅读全文
posted @ 2013-06-02 19:36
jzm17173
阅读(860)
评论(0)
推荐(0)
摘要：
我们仅仅使用几行代码，就可以根据诸如视口宽度、屏幕比例、设备方向灯特性来改变页面内容的显示方式媒体类型media typescreenprint为了清晰起见，我这这里使用了颜色名称，但实际上最好使用十六进制颜色值可以在样式表的开头设置基本样式，然后使用媒体查询media query来进一步重写相应的部分现代浏览器虽然可以智能地忽略与自身不匹配的样式文件，但它却不一定不下载这些文件。因此，将不同媒体查询的样式保存到独立的文件中没有太大好处Respond.js是为Internet Explorer 8及更低版本增加媒体查询支持的最快的javascript工具https://github.com/s 阅读全文
posted @ 2013-06-02 19:35
jzm17173
阅读(792)
评论(0)
推荐(0)
摘要：
响应式网页设计：弹性网格布局、弹性图片、媒体和媒体查询如果要用一句话概括响应式网页设计，我觉得它是针对任意设备对网页内容进行完美布局的一种显示机制。相反，如果需要根据不同设备提供特定的内容和功能，那就需要一个真正的“手机版”网站使用相对度量单位em或百分比chrome插件Windows Resizer先针对小视口进行设计，然后逐步针对大视口进行渐进增强支持在预算允许的情况下，一个完全定制的“移动”版网站比响应式设计更合适渐进增强用户体验<!DOCTYPE html><html lang="zh-CN"><head> <meta ch 阅读全文
posted @ 2013-06-02 19:34
jzm17173
阅读(176)
评论(0)
推荐(0)
摘要：
针对CSS的性能，有一些最佳实践：把样式表放在文档HEAD标签中以提升页面的逐步渲染速度不要在IE中使用CSS表达式，因为它们可能会被执行成千上万次，从而导致打开页面的速度变慢避免使用过多的行内样式，因为这会增加下载页面内容的大小使用低效CSS选择符CSS选择符的编写方式决定了浏览器必须执行的匹配次数，而某些类型的CSS选择符将会导致浏览器尝试更多匹配，因此开销比简单选择符更高避免使用通配规则除了传统意义上的通配符之外，Hyatt也把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到通配规则下。他推荐仅使用ID、类和标签选择符不要限定类选择符li.chapter改成.li-chapter 阅读全文
posted @ 2013-06-02 10:02
jzm17173
阅读(146)
评论(0)
推荐(0)
摘要：
创建iframe的开销比创建其他类型的DOM元素要高1~2个数量级在一些浏览器中，只有当onload事件触发后unload事件才能触发iframe和主页面中的资源是并行下载的，但是在某些情况下，主页面会阻塞iframe中资源的下载。脚本位于iframe之前。样式表位于iframe之前（一些浏览器）。样式表位于iframe之后（一些浏览器）所有浏览器中跨标签页和窗口都是共享连接池的当我们在典型方式下使用iframe时，它会阻塞onload事件，这会延长浏览器的忙指示，导致用户感觉页面加载很慢。动态地设置iframe的src属性能在Safari和Chrome中避免这个问题。对于其他浏览器而言，可以 阅读全文
posted @ 2013-06-02 10:01
jzm17173
阅读(160)
评论(0)
推荐(0)
摘要：
性能优化黄金法则提醒我们关注前端性能的提升，因为页面加载过程中的绝大部分时间都消耗在前端上。偶尔也有例外，那就是后端在生成HTML文档时消耗了太长的时间，比如在返回HTML内容之前需要频繁进行的数据库查询，或者等待其他Web服务的响应不幸的是，在后端处理数据的过程中，客户端的所有内容都被冻结了当服务器解析PHP页面的时候，所有的输出都被写入STDOUT。每次写入一个字符、一个单词或一行文字，服务器不会立即将它们输出，而是把所有输出内容排到一个队列中，然后再以较大的数据块发送到浏览器。这样做更加有效，因为它会使服务器发送到浏览器的数据包数量更少。由于发送数据包会引起网络延迟，所以同常发送少量大数 阅读全文
posted @ 2013-06-02 10:00
jzm17173
阅读(151)
评论(0)
推荐(0)
摘要：
包括Internet Explorer 6和7在内的一些浏览器将每个服务端的并行下载数限制为两个（Internet Explorer 8和Firefox 3增加到6个）当从单个域下载资源成为瓶颈时，可将资源分配到多个域上，通过增加并行的下载数来提高页面速度Internet Explorer 7同常对每个服务端只使用两个连接，但在这里我们看到它使用了4个连接，这是因为Wikipedia将响应降级到了HTTP/1.0由于长连接的原因，HTTP/1.1建议每个服务端提供少量的连接数，默认情况下HTTP1.0在每次响应后会关闭TCP连接，为每次请求简历一个新的TCP连接会消耗时间。为了降低这种消耗，H 阅读全文
posted @ 2013-06-02 09:57
jzm17173
阅读(338)
评论(0)
推荐(0)
浙公网安备 33010602011771号