<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>6 million</title> <style> <!-- body{ font-size:12px;} label{ font-size:14px; cursor:pointer;} .csdn ol{ list-style:none; margin:0px; padding:0px; font-family: Arial, Helvetica, sans-serif;} .csdn ol li{margin:0px; padding:0px; height:30px; width:680px; vertical-align: bottom; border:1px solid #eee; font-size:12px;} .csdn .username{ float:left; width:150px; height:30px; line-height:30px; padding-left:7px; font-weight:bold;} .csdn .password{ float:left; width:150px; height:30px; line-height:30px; padding-left:7px;} .csdn .email{ float:left; width:300px; height:30px; line-height:30px; padding-left:7px;} .q{ height:35px; width:200px; line-height:35px; text-indent:4px; font-size:18px;} .btn_highlight1 { margin-left:5px;bo
1. 尽可能的减少 HTTP 的请求数(Minimize HTTP Requests) —— Tag: content 2. 使用 CDN(Use a Content Delivery Network) —— Tag: server 3. 添加 Expires 头(或者 Cache-control ) (Add an Expires or a Cache-Control Header) —— Tag: server 4. Gzip 组件(Gzip Components) —— Tag: server 5. 将 CSS 样式放在页面的上方 (Put Stylesheets at the Top) —— Tag: css 6. 将脚本移动到底部（包括内联的）(Put Scripts at the Bottom) —— Tag: javascript 7. 避免使用 CSS 中的 Expressions(Avoid CSS expressions) —— Tag: css 8. 将 JavaScript 和 CSS 独立成外部文件(Make JS and CSS external) —— Tag: javascript, css 9. 减少 DNS 查询 (Reduce DNS lookups) —— Tag: content 10. 压缩 JavaScript 和 CSS ( Minify JS) —— Tag: javascript, css 11. 避免重定向(Avoid redirects) —— Tag: server 12. 移除重复的脚本(Remove duplica
效果图如下： 原理：使用到CSS3的border-radius以及border-color，其实很强大，我只是实践了这两个标签的使用方式，不过IE不认； html代码：<p class="comment">?</p> 第一步先实现圆形： 代码如下： p.comment{ font-size:38px; color:#fff; position: relative; width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: #cf3737; -webkit-border-radius: 100px; -moz-border-radius: 100px; } 第二步实现下面的尖角（使用before这个伪类）：
按颜色分类 一、橙色 使用了高亮度橙色的站点通常都会给人一种晴朗新鲜的感觉，而通过将黄色、黄绿色等类似颜色与成色搭配使用，通常都能得到非常好的效果。同时，中等色调的橙色类似于泥土的颜色，所以也经常用来创造自然的氛围。 橙色是可以通过变换色调营造出不同氛围的典型颜色，它既能表现出青春的活力也能够实现沉稳老练的效果，所以橙色在网页配色中的使用范围是非常广泛的。 Color Point: 橙色通常会给人一种朝气活泼的感觉，它通常可以是原本抑郁的心情豁然开朗。 在东方文化中，橙色象征着爱情和幸福。充满活力的橙色会给人健康的感觉，且有人说橙色可以提高厌食症患者的食欲。有些国家的僧侣主要穿着橙色的僧侣服，他们解释说橙色代表着谦逊。 二、黄绿色 黄绿色时而能够表现出自然的感觉，时而能够表现出未来虚幻的感觉。 原本这两种印象之间有很大的差异，但黄绿色就像穿越时间隧道那样能够自由自在地表现出这两种截然不同的感觉。 在网页中，黄绿色通常与蓝色搭配使用。总的来说，黄绿色主要用于表现温暖亲切的感觉或高科技神秘虚幻的感觉。 Color Point: 黄绿色和草绿色都会让人联想起大自然。黄绿色同时含有黄色和绿色两种颜色的共同特点，也就是说，黄绿色既能表现出黄色的温暖，
一、 Yahoo的军规条例： 谨记：80%-90%的终端响应时间是花费在下载页面中的图片，样式表，脚本，flash等； 操作方案： 1、尽量减少HTTP请求个数——须权衡 合并图片（如css sprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。 2、使用CDN（内容分发网络） 这里可以关注CDN的三类实现：镜像、高速缓存、专线，以及智能路由器和负载均衡； 3、为文件头指定Expires或Cache-Control，使内容具有缓存性。 区分静态内容和动态内容，避免以后页面访问中不必要的HTTP请求。 4、避免空的src和href 留意具有这两个属性的标签如link，script，img，iframe等； 5、使用gzip压缩内容 Gzip压缩所有可能的文件类型以来减少文件体积 6、把CSS放到顶部 实现页面有秩序地加载，这对于拥有较多内容的页面和网速较慢的用户来说更为重要，同时，HTML规范清楚指出样式表要放包含在页面的<head />区域内； 7、把JS放到底部 HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同 8、避免使用CSS表达式 页面显示和缩放，滚动、乃至移动鼠标时，CSS表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替CSS表达式。 9、将CSS和JS放到外部文件中 我们需要权衡内置代码带来的HTTP请求减少与通过
li在FF、IE8下无间隔，但在IE6、7下会出现间隔 CSS代码： li { height:28px; line-height:28px; width:99%; overflow:hidden; border:1px solid red; } 效果： 这应该是IE6的bug，解决方法是加zoom:1; vertical-align:middle;
在前段领域中，对Javascript和CSS的优化一直是大家关注的焦点，相应的压缩优化工具也非常丰富，相对而言对HTML优化的关注则显得有些冷淡。在Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法，例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等，唯独没有细说HTML优化。在整个前端的构成中，HTML是必不可少的一部分，而且是真正的展示“前端”。虽然与动辄十几K的Javascript相比，HTML的大小在整个页面资源中一般不会占太多的比重，而且还有Gzip，但是事实表明，大多数页面都有较大的压缩余地，即使是Gzip过后仍然能减小可观的体积，这一事实在后续的文章中会给出，本文主要讨论HTML优化的一些可行和看上去不那么可行的途径。对
初学div css网页布局的设计者常常会被一个问题困扰着。在IE和其他(Mozilla、Opera等)浏览器里显示的效果常常会偏差2px。这是因为IE对盒之间距离的解释的bug造成的。一个技巧提示帮我们找到了解决的方法：用!important。!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式sRule!important，即写在定义的最后面，如：Example Source Code Example Source Code box{color:red !important;}
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. 1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行