北京珠峰培训CSS+DIV课程最新大纲
第一部分 CSS血统论
1、 什么是HTML血统。HTML血统是指的HTML标记（标签）默认的语义和外观样式。充分理解这一点，是我们设计网站，优化网站（SEO）的基础。理解HTML血统，一定要把握以下三个方面。
2、 标记（标签）的基本语义和对SEO的影响。
比如<h1>标记在网页里指的是大标题，好比一篇文章的总纲要或一本书的书名。搜索引擎在分析网页中的标记时，给它的权重是最高的。从<h1>到<h6>，都表示标题，权重都会比较高。其次是li或dl这些标记，它们都表示目录HTML
比如<h1>标记在网页里指的是大标题，好比一篇文章的总纲要或一本书的书名。搜索引擎在分析网页中的标记时，给它的权重是最高的。从<h1>到<h6>，都表示标题，权重都会比较高。其次是li或dl这些标记，它们都表示目录HTML
3、 标记（标签）的默认样式。HTML
4、 由于各个浏览器对HTML标记的默认样式给的定义不同，而引起的浏览器兼容性问题。这是一个非常重要的问题，把握不好这点，就不好解决最基本的浏览器兼容性问题。
比如ul和li标记
比如ul和li标记
5、 标记和CSS的关系HTML
6、 和DIV是什么关系CSS
第二部分 标准流。什么是标准流。
1、 什么叫脱离标准流的元素
HTML标签的显示方式一般会被分成两类，一种是以块状显示（display:block),另一种是元素在同一行显示（display:inline)，所有的HTML元素都属于block和inline之一。
1、什么叫块级元素（block）。
块级元素的特点是：
1、总是在新行上开始；
2、高度，行高、宽度以及顶和底边距都可控制；
3、宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。(<form>这个标签本身是块级元素，但是，工作在他里面的那些文本框，单选、复选按钮，下拉菜单，却多数是行内元素）
2、 什么叫行内元素（inline）。
相反地，行内元素的特点是：
1,和其他元素都在一行上；
2,无法为一个行内元素设置高度和宽度
3，宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>（还有表单元素，表单元素不是指的<form>这个标签本身，而是指的文本框，单选、复选按钮，下拉菜单这些元素）是inline元素。
如果想给行内元素设定高和宽，就需要把行内元素转化为块级元素，用<a>做的超链接一般都这么来做
注意：尽量不要给行内元素设背景，因为不同的浏览器对行内元素的背景的解释是不同的。
注意：无论那是块元素还是行内元素，一但成为浮动元素，就一样了。
第三部分 盒子原理
1、 如果不给一个块级元素设定宽度，则这个盒子的默认宽度（这个宽是指margin+border+padding+width)是它父盒子宽度（这个宽度就是指width)的百分百。这是个非常有用的特点，很多的变宽布局就是用这个特点实现的。很多大公司的面试题也会出在这里。
2、 一个块级元如果不设定高度，则它的高是auto(height:auto),这个意思是自动适应其内部子元素的高度，比如子元素是50px，则它也是50px。如果设定了盒子的高度，一定要注意它的子元素如果溢出会对它的弟弟元素产生影响这一严重后果。因为它的弟弟元素的起始位置以它（哥哥）的高度为依据。（在IE6里不会这样，其它浏览器则会出现这一严重后果，这个问题，老师在讲浏览器兼容性问题（扩展框问题）的时候会说的很清楚，）
3、 的多数标签元素是有默认值的，比如我们在做网页布局的时候，往往先把body的margin设为0;在用除DIV标签之外的标签做布局的时候，一定要注意到这一点。 HTML
4、 为了不使布局产生混乱，很重要的一点就是要考虑内容会溢出这样情况。也就是说overflow是个非常重要的属性，不会用overflow这个属性的人，CSS肯定水平不高。
5、 这一属性经常会不起作用，但是一个盒子浮动之后，margin一般都会起作用。margin-left这一属性在IE6中（浮动的时候）会加倍，解决这个问题只需再加一个CSS属性：display:inline既可解决。margin-top不起作用的问题margin
6、 补充
一，在标准流下，margin-top都会不起作用。一但浮动之后，就会起作用了。
二，在其父元素中加一个overflow:hidden，也会解决这个问题。
一，在标准流下，margin-top都会不起作用。一但浮动之后，就会起作用了。
二，在其父元素中加一个overflow:hidden，也会解决这个问题。
三，在父元素中加overflow,也可以解决父元素的高度不能适应浮动的子元素的高度的问题。
第四部分 浮动（float）
1、 什么是浮动，为什么要浮动，浮动的元素有那些特点。
2、 清除浮动(clear)是指的让元素本身不受浮动的元素影响，而并非是不让元素自身浮动。
3、 浮动的元素是脱离标准流的。脱离标准流的元素，就没有块级元素和行内元素的区别了。
1， 一个HTML标记加了float:left或float:right之后，它会变成浮动元素，不再有块级元素和行内元素的分别（block和inline），它的特点是它的父元素和他的弟弟元素会视它为不存在。
2，行内元素设定了float之后，会和块级元素设定float一样，它们的宽和高会自动适应内容的宽度和高度。也可以理解为元素设定了float:left或 float:righ之后，行内元素也会变成浮动的块级元素。
3，在IE6中，给元素设定float:left或float:right后，它的margin-left或margin-right会加倍，加一个display:inline就可以解决问题。
4，用到了float属性，一定要考虑使用clear这个属性。很多布局混乱的情况、或浏览兼容性问题，就是因为没有用好clear这个属性。不会使用clear属性的人，CSS肯定是菜鸟。
第四部分 定位（position）
关键要理解定位的依据是什么，或者说定位的参照物是什么
第五部分z-index详解（又称堆叠关系或层级关系）
1、 重点要理解什么叫z轴方向的先后顺序，理解了这一点就知道什么叫层级关系了，也叫知道什么是z-index了。
2、 要真正理解在什么情况下会产生一个新的层级关系。
第六部分 浏览器兼容性问题
1、 由于不同的的浏览器对HTML标记的默认值的解释不同引起的
2、 其它常见兼容性问题
说明：在IE9正式发布的时候，我们的课程将去掉IE6的兼容性这一部分内容
说明：在IE9正式发布的时候，我们的课程将去掉IE6的兼容性这一部分内容
第七部分 CSS sprite(CSS精灵)
充分理解background和background-position的用法
（特效和综合应用）
第七部分 滑动门
（特效和综合应用）
第八部分 网站布局与复杂的圆角可变化的布局
（综合应用）
第九部分 CSS3的新特性与CSS的发展趋势。
说明：在IE9正式发布的时候，课程会重点加入CSS3的内容。
第十部分 CSS和javascript脚本的调试工具
1、 的开发人员工具IE8
2、 火狐浏览器的FireBug
珠峰培训 2010年9月7日星期二正式公布
《后页附表》
《后页附表》
霍营市场监督管理所投诉举报电话：010-60787760 | 