1. 文档类型
这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。
Copy(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)
2. Css样式
CSS样式分为：外部样式、内部样式、行内样式、导入样式。以下分别说明：
外部样式：css单独写到一个css文件内，然后在源代码中以link方式链接。
内部样式：，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。
行内样式：写在标签内以sytle标记。
导入样式：链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部引入另一个样式。
3. CSS选择器
参考：http://www.w3school.com.cn/cssref/css_selectors.asp
关于CSS选择器的优先级有如下规则
id优先级高于class；
后面的样式覆盖前面的；
指定的高于继承；
行内样式高于内部或外部样式；
总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的。
4. CSS盒子模型组成
一个容器DIV的内容(content)、填充(padding)、边框(border)、边界(margin)属性分别对应下图：
整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方。
5. CSS布局
一列布局
代码参照附件“课程练习代码\llayout\0.html”
一列多行布局
代码参照附件“课程练习代码\llayout\1.html”
小知识点
u 设置DIV居中使用属性margin:0,auto;
u 去除默认边距body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉。
u 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。
多列布局
两列布局
代码参照附件“课程练习代码\llayout\2.html”
小知识点
u 块元素和内联元素：
块级元素：就是一个方块，像段落一样，默认占据一行出现；
内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
效果图如下：
u 浮动float
任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
代码参照附件“课程练习代码\llayout\3.html”。
6、CSS制作导航栏
u 纵向导航栏
代码参照附件“课程练习代码\menu\0.html”
小知识点
相对定位和绝对定位
定位标签：position 包含属性：relative（相对） absolute（绝对）
1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）
3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角
4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个。
超链接伪类
伪类定义：a开始后边跟个冒号，再跟个状态限定字符；
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
:first-letter作用与网页首字母的伪类。
使用CSS制作按钮
代码参照附件“课程练习代码\button\0.html”
首字下沉
代码参照附件“课程练习代码\button\1.html”
横向图文列表
代码参照附件“课程练习代码\layout\4.html”
横向导航栏
代码参照附件“课程练习代码\layout\5.html”
使用图片美化导航栏
代码参照附件“课程练习代码\layout\6.html”
v CSS Sprites技术
CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。
例：
#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 -28px no-repeat; }
css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是左右和上下，第一个参数表示距左多少px，第二个参数表示距上多少；no-repeat表示背景图片向哪个方向重复，此时为不重复。强调一点css中值为0可以不带单位，其它数值都必须带单位（line-height值为多少倍时，zoom，z-index除外）,定位图片位置的参数是以图片的左上角为原点的。
下拉及多级弹出菜单
代码参照附件“课程练习代码\layout\7.html”
小知识点
v 绝对定位与浮动的区别
当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。
浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。
CSS设计自适应宽度菜单
代码参照附件“课程练习代码\button\2.html”
<!--EndFragment-->