table

          div的定位問題

           層的隨意定位的特性給網(wǎng)頁設(shè)計者帶來的很大的方便,但同時也帶來了一定的麻煩。為什么這樣說呢?

                大家都知道,為了讓網(wǎng)頁能夠自動地適應(yīng)用戶設(shè)置的分辨率,在網(wǎng)頁制作過程中人們采用了百分比的設(shè)置方式,從而頁面的所有元素從新排版,保證原來的格式。但如果你在頁面上使用了層,你會發(fā)現(xiàn)當(dāng)瀏覽器大小改變時,層的位置卻沒有改變,結(jié)果它和其他的元素之間的配合出現(xiàn)了錯位現(xiàn)象,頁面變得雜亂無章了。而我們是不能夠強(qiáng)制用戶使用特定的分辨率的,那么就只有想辦法讓層的位置也能夠象表格一樣根據(jù)瀏覽器大小的改變而重新定位,這就需要合理地使用相對定位和絕對定位了。

                絕對定位(position:absolute):即層默認(rèn)的定位方式,絕對于瀏覽器左上角的邊緣開始計算定位數(shù)值。

                相對定位(position:relative):層的位置相對于某個元素設(shè)置,該元素位置改變,則層的位置相應(yīng)改變。

                對比兩種定位方式,不難發(fā)現(xiàn),使用相對定位的層才是真正實(shí)現(xiàn)設(shè)計者思想的方式,從而完全掌握層的排版。

                 絕對定位有沒有用呢?當(dāng)然有用了,當(dāng)你的網(wǎng)頁全部使用層來排版,而且頁面是使用默認(rèn)的居左放置的,那么使用默認(rèn)的絕對定位方式可以方便的排版,提高設(shè)計的工作效率。

                 在Dreamweaver中,插入的層雖然都是使用的絕對(absolute)定位方式,但是插入的方式不同,帶來的效果是不同的。前面我們已經(jīng)知道,使用菜單插入的層是沒有定位的坐標(biāo)的,只有當(dāng)你使用鼠標(biāo)拖動該層改變其位置后,才會寫入坐標(biāo)值。而拖拉出來的層的初始位置坐標(biāo)就是鼠標(biāo)開始動作時的坐標(biāo)。

                 請明確一個概念:由Dreanweaver賦予坐標(biāo)值的層是絕對于瀏覽器邊緣定位的層。不帶坐標(biāo)值的層則是相對于某元素定位的層!

                 所以,最簡單的設(shè)置相對定位層的的方式就是:選定插入層的位置(例如某個單元格或者頁面中某處)將光標(biāo)停留在該位置,然后選擇Insert-->Layer,即可在該位置創(chuàng)建一個固定大小的層,這個層就是相對于該位置定位的了。需要注意,采用這種方式創(chuàng)建的層,你只可以使用鼠標(biāo)調(diào)整它的大小,絕對不可以移動它的位置!也就是說,在屬性面板上,層的位置欄中(Left Top)絕對不可以有數(shù)值。

                 很多情況下,插入的層的位置并不一定準(zhǔn)確,特別是Dreamweaver并非真正的所見即所得的軟件,網(wǎng)頁的排版只有到瀏覽器中顯示才可以真正看到排版的表現(xiàn),所以上面所說的方法就顯的過于簡單而容易出問題了。這個時候,你需要給層一個定位的參照物,讓它真正地做到相對的定位。

                 簡單的參照物可以是一個父層,即先插入一個相對定位的空白的層,在此層中插入你真正需要的層,而這個層是可以隨意拖拉改變位置的。但這樣畢竟在網(wǎng)頁中多插入了一個空白的層,我想它一定不是專業(yè)的網(wǎng)頁設(shè)計師所希望的。下面我們介紹使用CSS來實(shí)現(xiàn)真正的相對定位的層。

                 我們需要先設(shè)置一個CSS Class,來定義定位的方式為相對:

                .ceng { position: relative; }
                然后,賦予你所需要的參照物(可以是 table,tr,td... )一個 CSS屬性為這個類。這樣瀏覽器就會以它的左上角為原點(diǎn),建立新的坐標(biāo)系。再在這個參照物的下級插入層,則層絕對于該參照物定位,如果你需要改變層的位置,你可以直接在層的屬性面板上輸入Left Top的數(shù)值(不可以使用鼠標(biāo)拖拉),切記此數(shù)值的坐標(biāo)原點(diǎn)是你所指定的參照物,而不是瀏覽器的邊緣(在Dreamweaver中編輯時,該層看起來象是絕對于頁面邊緣定位的,但在瀏覽器中,它是絕對于你所指定的參照物的)。

                很多朋友使用層是為了等到動態(tài)的效果,例如使用時間線讓某個物體運(yùn)動起來,增加網(wǎng)頁的動感,那么相對定位后的層還可以運(yùn)動嗎?回答當(dāng)然是肯定的。由于定義對象的兩個位置需要拖動該對象改變位置,所以使用簡單的層定位的方法是不行的,但如果你使用CSS來設(shè)置相對定位的效果的話,那么就完全可以實(shí)現(xiàn)了。只是需要注意,定義運(yùn)動的初始位置和結(jié)束位置時,你仍然不可以使用鼠標(biāo)拖拉,而只能自行輸入Left和Top的數(shù)值。

          posted on 2008-12-15 11:47 小卓 閱讀(630) 評論(0)  編輯  收藏 所屬分類: html and js

          主站蜘蛛池模板: 博兴县| 历史| 读书| 扎囊县| 南江县| 鄂伦春自治旗| 文安县| 望奎县| 天峨县| 桃园市| 五河县| 郴州市| 盐亭县| 凤翔县| 若羌县| 乐亭县| 宁河县| 灌云县| 托克托县| 辽阳市| 乐清市| 博湖县| 亚东县| 武宣县| 黄浦区| 油尖旺区| 宝鸡市| 紫金县| 铁力市| 青浦区| 宁乡县| 环江| 舟山市| 临武县| 托里县| 长海县| 舞钢市| 兴山县| 射洪县| 布拖县| 石门县|