你對(duì)CSS定位的用法是否熟悉，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，能否控制好各個(gè)模塊在頁(yè)面中的位置是非常關(guān)鍵的，本文對(duì)CSS定位作詳細(xì)的介紹，并介紹重要的div標(biāo)記，講解利用CSS+div對(duì)頁(yè)面元素進(jìn)行定位的方法，并分析二維三維定位等。

理解CSS定位與div布局

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，能否控制好各個(gè)模塊在頁(yè)面中的位置是非常關(guān)鍵的。在前面的課程中，已經(jīng)對(duì)CSS的基本使用有了一定的了解。本課在此基礎(chǔ)上對(duì)CSS定位作詳細(xì)的介紹，并介紹重要的div標(biāo)記，講解利用CSS+div對(duì)頁(yè)面元素進(jìn)行定位的方法，并分析二維三維定位等。

1．div標(biāo)記與span標(biāo)記

在使用CSS排版的頁(yè)面中，div與span是兩個(gè)常用的標(biāo)記。利用這兩個(gè)標(biāo)記，加上CSS對(duì)其樣式的控制，可以很方便的實(shí)現(xiàn)各種效果。我們?cè)谶@里從二者的基本概念出發(fā)，介紹這兩個(gè)標(biāo)記的用法與區(qū)別。希望大家能夠掌握以下幾個(gè)方面的內(nèi)容：

div與span的概念

div與span的區(qū)別

2．元素的CSS定位

網(wǎng)頁(yè)中各種元素都必須有自己合理的位置，從而搭建出整個(gè)頁(yè)面的結(jié)構(gòu)。我們?cè)谶@里圍繞CSS定位的幾種原理方法，進(jìn)行深入的介紹，包括position、float、z-index等。需要說(shuō)明的是，這里的定位不是用table進(jìn)行排版，而是CSS的方法對(duì)頁(yè)面中塊元素的定位。希望大家能夠掌握以下幾個(gè)方面的內(nèi)容：

float定位

position定位

z-index空間位置

3．定位實(shí)例一：輕輕松松給圖片簽名

手里有漂亮的圖片需要放到頁(yè)面上，而且希望給圖片加上個(gè)人信息，如果對(duì)各種圖象處理軟件不是很熟悉，用CSS定位完全可以實(shí)現(xiàn)給圖片簽名的效果。

首先找好希望放到網(wǎng)上的圖片，然后將其放入一個(gè)div塊中，并用盒子模型的方法給圖片加框（padding、border）。然后將需要簽名的文字放入另外一個(gè)div塊，用position定位將其移動(dòng)到圖片上，再設(shè)置相應(yīng)的字體、顏色即可。

4．定位實(shí)例二：文字陰影效果

前面介紹了用CSS濾鏡實(shí)現(xiàn)文字陰影效果的方法，可是CSS濾鏡僅僅適用于IE瀏覽器，如果希望Firefox下也能有文字陰影的效果，該方法就無(wú)能為力。采用本課介紹的定位方法，便能輕松實(shí)現(xiàn)文字陰影的效果，而且適用于各個(gè)瀏覽器，本例效果如圖所示。

【編輯推薦】

1. 三大CSS定位機(jī)制和position屬性用法
2. 詳解CSS定位屬性Position用法
3. 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
4. 實(shí)現(xiàn)DIV圖片居中方法揭秘
5. 鼠標(biāo)經(jīng)過(guò)時(shí)改變DIV背景顏色的三種途徑