實例解析CSS定位與DIV布局
你對CSS定位的用法是否熟悉，在網頁設計時，能否控制好各個模塊在頁面中的位置是非常關鍵的，本文對CSS定位作詳細的介紹，并介紹重要的div標記，講解利用CSS+div對頁面元素進行定位的方法，并分析二維三維定位等。
理解CSS定位與div布局
在網頁設計時，能否控制好各個模塊在頁面中的位置是非常關鍵的。在前面的課程中，已經對CSS的基本使用有了一定的了解。本課在此基礎上對CSS定位作詳細的介紹，并介紹重要的div標記，講解利用CSS+div對頁面元素進行定位的方法，并分析二維三維定位等。
1．div標記與span標記
在使用CSS排版的頁面中，div與span是兩個常用的標記。利用這兩個標記，加上CSS對其樣式的控制，可以很方便的實現各種效果。我們在這里從二者的基本概念出發，介紹這兩個標記的用法與區別。希望大家能夠掌握以下幾個方面的內容：
div與span的概念
div與span的區別
2．元素的CSS定位
網頁中各種元素都必須有自己合理的位置，從而搭建出整個頁面的結構。我們在這里圍繞CSS定位的幾種原理方法，進行深入的介紹，包括position、float、z-index等。需要說明的是，這里的定位不是用table進行排版，而是CSS的方法對頁面中塊元素的定位。希望大家能夠掌握以下幾個方面的內容：
float定位
position定位
z-index空間位置
3．定位實例一：輕輕松松給圖片簽名
手里有漂亮的圖片需要放到頁面上，而且希望給圖片加上個人信息，如果對各種圖象處理軟件不是很熟悉，用CSS定位完全可以實現給圖片簽名的效果。
首先找好希望放到網上的圖片，然后將其放入一個div塊中，并用盒子模型的方法給圖片加框（padding、border）。然后將需要簽名的文字放入另外一個div塊，用position定位將其移動到圖片上，再設置相應的字體、顏色即可。
4．定位實例二：文字陰影效果
前面介紹了用CSS濾鏡實現文字陰影效果的方法，可是CSS濾鏡僅僅適用于IE瀏覽器，如果希望Firefox下也能有文字陰影的效果，該方法就無能為力。采用本課介紹的定位方法，便能輕松實現文字陰影的效果，而且適用于各個瀏覽器，本例效果如圖所示。
【編輯推薦】
