，你可以用 div 將網頁內容的各區塊包起來，再去做 CSS 排板，目前所有的主流瀏覽器都支援 DIV div 標籤。 若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。 使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。 特性 z-index 用于堆叠屏幕上的单元。 缺省情况下，单元堆叠的顺序为它们在HTML标记出现的顺序——也就是说，后出现单元堆叠在早出现单元的上面。
每當您啟用視覺輔助以檢視 CSS 版面區塊背景時，Dreamweaver 便會自動指定每個 CSS 版面區塊的不同背景顏色 (Dreamweaver 利用一種演算程序來選取顏色，您無法自己指定顏色)。 指定的顏色看起來都不同，並且是專為協助您在 CSS 版面區塊之間進行分辨而設計的。 固定绝对或相对定位单元的 width 和 height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。
div: 插入 div 標籤
CSS 的 float 可以讓網頁設計師自己決定浮動的 DIV 區塊要靠左還是靠右浮動，參數設定請參閱《CSS float 浮動》篇的介紹。 如果附加了樣式表，在清單中便會出現該樣式表中所定義的 ID。 定位了的要素在页面上显示时仍然会从左到右一直显示。 利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。 所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。 例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。
- 可以用以下的四个值来给出这个方块的在 DIV 位置和大小。
- 当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。
- Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。
- 值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容（同 clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。
- 當您將滑鼠指標移過方塊邊緣時，Dreamweaver 就會將其標示。
- 當現有 CSS 樣式表的樣式已經附加到文件中時，這個方法就很有用。
- Top、right、bottom 和 left 的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字 auto。
对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。 如 Netscape Communivator 4 和Internet Explorer4 都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实现文本“划入”和图像渐显等显示特征。 從範例一到範例三，各位應該已經發現 DIV 區塊的各種樣式改變都是用 CSS 的屬性來調整，這也是未來的網頁設計趨勢，傳統的 HTML DIV 區塊因為有了 CSS 而有了更多的應用機會。 範例三再替 HTML DIV 區塊增加一個 background-color 屬性，並將屬性值設定為 orange，意思是橘色的背景顏色。
div: CSS 版面區塊
標籤邊緣時，Dreamweaver 便會標示標籤的邊框。 div div 您就可以依需要啟用或停用標示功能，或是在「偏好設定」對話方塊中，變更標示的顏色。 標籤便會在文件中以方塊顯示，其中包含預留位置文字。
采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。 Clip 给出 layer 的 clipping（可看的见的）部分。 Clip 可使得 DIV 显示为一个可以定义的很准确的方块。 可以用以下的四个值来给出这个方块的在 DIV 位置和大小。 给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。
div: 使用 div 標籤
當您將滑鼠指標移過方塊邊緣時，Dreamweaver 就會將其標示。 如果附加了樣式表，在清單中便會出現該樣式表中所定義的類別。 使用這個彈出式選單可選取要套用至標籤的樣式。 標籤與 div Cascading Style Sheets 來建立網頁的方式，可以依據 Dreamweaver 隨附的其中一個預先設計的版面來建立 CSS 版面。
Dreamweaver 提供了幾項檢視 CSS 版面區塊的視覺輔助。 例如，當您設計時，可以啟用 CSS 版面區塊的外框、背景和方塊模型。 當您將滑鼠指標滑過版面區塊時，您也可以檢視顯示選取的 CSS 版面區塊屬性的工具提示。
div: HTML DIV 標籤用法
如果您不熟悉使用 CSS 的方式，但是熟悉使用表格的方式，也可以嘗試使用表格。 网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。 要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。 其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。
延續範例一的程式碼，我們這次增加了 font-size 屬性，這是 CSS 用來設計文字大小用的屬性，我們將 font-size 設為 13px，這是一種小型可閱讀文字的概念。 div 為了視覺上的呈現，CSS 版面區塊不包含行內元素 (也就是程式碼位於一行文字內的元素) 或簡單區塊元素 (像是段落)。 最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。 而同时，若非必须太多花哨的网站，采用CSS布局，同样可以到达所想要的效果。 DIV是层叠样式表中的定位技术，全称DIVision，即为划分。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
div: DIV用法
当把文字，图像，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。 所以当看到这些名词的时候，就知道它们是指一段在 DIV 中的 HTML。 這些選項會影響到所有的物件，例如表格，尤其是當您將滑鼠指標移過去時 Dreamweaver 就會將其標示的那些表格。
给名字的目的是以后可用JavaScript来控制它， 比如说移动它或改变它的一些性质等等。
Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。 按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。 同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 -2 的单元的上面）。 元素同时应用 class 和 id 属性，但是更常见的情况是只应用其中一种。 这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的特定的元素。 当使用 CSS-P 的时候， 主要把它用在 DIV（division）tag 上。
由香港SEO公司 Featured 提供SEO服務
