css布局的时候多多注意一下，相信很快就可以掌握了css布局的技巧！
一、IE边框若显若无，须注意，定是高度设置已忘记；
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
三、三像素文本慢移不必慌，高度设置帮你忙；
四、兼容各个浏览须注意，默认设置行高可能是杀手；
五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
九、IE浮动双边距，请用display：inline拘。
十、列表横向排版，列表代码须紧靠，空隙自消须铭记。 ......

css渐变代码4种
一、从上往下渐变
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、从左上至右下渐变
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}
三、从左往右渐变
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、从上往下渐变
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);" ......

CSS滤镜的使用方法：filter:filtername(parameters)　即 filter:滤镜名称（参数）
alpha：设置透明层次
blur：创建高速度移动效果，即模糊效果
chroma：制作专用颜色透明
DropShadow：创建对象的固定影子
FlipH：创建水平镜像图片
FlipV：创建垂直镜像图片
glow：加光辉在附近对象的边外
gray：把图片灰度化
invert：反色
light：创建光源在对象上
mask：创建透明掩膜在对象上
shadow：创建偏移固定影子
具体的应用有两种方法：
1、先定义好CSS ，再在页面中需要的对象上使用预先定义好的CSS，实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了，我们只需填上适合的具体参数即可：
2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。
Alpha滤镜: 听到这个名字，你可能会想到Flash里有，Photoshop里也似乎见过。一点不错，它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合"通俗地说就是一个元素的透明度.
语法：STYLE="filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
说明： ......

2009年2月24日
，Safari 4.0
beta版正式发布，Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3)。不过为了方便大家的工作，下面提供了最新版
本的CSS选择器浏览器支持情况，其中包括最新的CSS3和Safari 4.0 Beta的支持情况。感谢Estelle Weyl
的总结。
2009年6月30日
，FireFox 3.5发布，类似Safari 3.1及更新的版本 (包括Safari
4 beta)，Opera 9.64 （及更新版本） 和 Google Chrome 都支持所有 CSS2.1 和 CSS3
选择器。以下是我对所有浏览器测试后的兼容性统计表，希望对大家有所帮助。
注:
绿色 / √  表示目前支持。
橙色/ Δ   表示浏览器部分支持当前CSS选择器。
红色/ Χ   表示浏览器完全不支持。
点击上图查看清晰大图
......

使用wap css可以把内容和表示分离，好处：
1.使用wcss使内容和样式分离，可以为不同手机，设计几个版本wap css style sheet 和指定不同屏
幕大小。内容却不需要修改。
2.为不同设备，如PC,PDA,MOBILE PHONE，准备不同样式表，内容不需要改变。
3.减少维护一个wap站点，当有新的电话，只需要增加新的样式表，内容不需要修改。
4.多个wap页面应用一个wap css样式表，如果要改变页面，只需要修改样式表。
5.在多个工程中重复使用样式表。
6.如果应用样式表，这样mobile只是需要下载一次，然后就会存在缓存中，下次访问不需要在连接服
务器。
7.xhtml mp 文档变得更小，因为可以把布局和样式信息放入外部wap css样式表中。小文件下载时间
就更短。
缺点：
1.不同wap浏览器具有对wcss的不同支持度，一个wap浏览器支持，也许另一个就不支持。
2.一个外部wcss样式表，在第一次导入样式表时，会增加请求时间，如：
  a. 样式表不再缓存中
  b. xhtml mp和external wcss是两个不同的下载请求
  c. 如果你用wcss指定mobile internet site的表示信息，wcss将变得相当大。
  d. wap 浏览器需要额外的解析wcss
注意：
1.样式表使用，选择器区分大 ......

使用wap css可以把内容和表示分离，好处：
1.使用wcss使内容和样式分离，可以为不同手机，设计几个版本wap css style sheet 和指定不同屏
幕大小。内容却不需要修改。
2.为不同设备，如PC,PDA,MOBILE PHONE，准备不同样式表，内容不需要改变。
3.减少维护一个wap站点，当有新的电话，只需要增加新的样式表，内容不需要修改。
4.多个wap页面应用一个wap css样式表，如果要改变页面，只需要修改样式表。
5.在多个工程中重复使用样式表。
6.如果应用样式表，这样mobile只是需要下载一次，然后就会存在缓存中，下次访问不需要在连接服
务器。
7.xhtml mp 文档变得更小，因为可以把布局和样式信息放入外部wap css样式表中。小文件下载时间
就更短。
缺点：
1.不同wap浏览器具有对wcss的不同支持度，一个wap浏览器支持，也许另一个就不支持。
2.一个外部wcss样式表，在第一次导入样式表时，会增加请求时间，如：
  a. 样式表不再缓存中
  b. xhtml mp和external wcss是两个不同的下载请求
  c. 如果你用wcss指定mobile internet site的表示信息，wcss将变得相当大。
  d. wap 浏览器需要额外的解析wcss
注意：
1.样式表使用，选择器区分大 ......

今天看到一篇文章是css打造进度条。然后自己做成动态的进度条，同样，使用到css和jauery，请看：
1  首先，需要引入jquery.js文件。
 <script src="Content/jquery.js" type="text/javascript"></script>
2  所用到的样式部分：
<style>
 .graph {
                     position: relative;
                      width: 200px;
                     border: 1px solid #B1D632;
                      padding: 2px;
                      margin-bottom: .5em ......