使用CSS－P，主要依靠<div>标签来实现，当你把HTML内容放在<div>标签里时，可以称它为:“DIV块”,“DIV元素”,“CSS-layer”,或者简单的称之为“layer”。
使用DIV标签的方法和其他标签没有什么两样：
<div>
HTML内容
</div>
纯粹使用<DIV>标签而不加任何CSS内容，其效果与用<P></P>是一样的。
但当把CSS放进DIV标签中以后，大家就可以指定HMTL元素显示在屏幕上的具体位置，可以在某一位置上画出方形或线，或者指定文字在某一个块中如何显示。首先要做的，是给这个DIV元素（即层）加上一个唯一的ID标识（ID的作用类似于为这个层起个名字）。
<divid=”abc”>
加一个ID号
</div>
层的ID可以随意设定，可由字母、数字和下划线组成，但必须以字母起头
div是html中的一个标签，通常情况下作为一个容器来容纳其它元素，在css中表示一种选择器；可以直接通过div（标签选择器）来查找对应的元素并设置其样式；如果是.div那就表示是类名选择器；是设置类名是div的元素来设置相关样式；在pc端页面中 使用的最多；
新建一个html网页，在body中插入【<div class=”content”></div>】并引入CSS【.content{width: 420px;height: 100px;background: #d4d4d4;padding: 5px 0 5px 5px;}】。
在大DIV中插入一个DIV【<div class=”a”></div>】并引入CSS【.a{width: 100px;height: 100px;margin-right: 5px;background: #ff0000;}】定义它的高，宽，外边距，背景色。
继续添加一个同级的DIV【<div class=”a b”></div>】并引入样式a和样式b，样式B只定义背景色【.b{background: #FF5F00;}】。可以看到第2个DIV排到了第一个的下方位置。
按照同样的方法再添加2个同级的DIV并引入不同颜色的DIV【<div class=”a c”></div><div class=”a d”></div>】。然后引入CSS【.c{background: #FFED00;}.d{background: #00FF93;}】。刷新后可以看到预览效果是4个IDV垂直排列的，怎么能让他们水平排列在一行呢？
为了方便朋友们查看顺序，把4个DIV分别插入一个数字，相当于给他们编一个号码。
接下来就要用到浮动代码了。在4个DIV共用的a样式中，加入左浮动【float: left;】。保存并刷新网页可以看到已经都在一行上了，而且是按照编码顺序从左到右排列的。
大家再来试一下右浮动【float:right】，可以看到DIV是从右向左排列的。现在朋友们知道怎么使用浮动代码了吗？
1.打开Dreamweaver 8，分别新建html和css格式的文件，分别存放在桌面web文件夹中的根目录和CSS文件夹中。
2.在首页index.html中为系统标签，因此在index.css文件中定义，语句表达方式为：body{ background:#4B7E9B; padding:0; margin:0;}，body标签与其它标签类似，其内部编程方式为：命令（如background），参数（如#4B7E9B（颜色代码）），上述语句的释义为：首页的背景颜色为#4B7E9B，填充为0，间距为0。
首页index.html文件中调用刚才定义好的body标签，语句表达方式为：<link href=”css/index.css” rel=”stylesheet” type=”text/css” />
3.其它自己定义标签名称的标签为引用标签，它们的定义和调用方式与系统标签不同。某个引用标签语句表达方式为： .TOP1{ width:960px; height:30px; background:url(file:///D|/Users/ZhangZhaoJian/Desktop/web/images/topbg.gif) left repeat; float:left;}，
特别注意，TOP1为你自己定义的标签名称，为引用标签，为了与系统标签区别，在TOP1的前面有个 . 或 # ，在这里为 .TOP1。而标签内的语句编程方式与系统标签相同，上述语句的释义为：导航条的宽度为960像素，高度为30像素，背景是图片链接，向左填充。
4.首页index.html文件中调用刚才定义好的.TOP1标签，语句表达方式为：<div class=”TOP1″> </div>
