TP08定位網(wǎng)頁元素

定位網(wǎng)頁元素第八章本章任務(wù)制作經(jīng)濟半小時專題報道頁面制作帶按鈕的輪播廣告制作下拉列表導(dǎo)航菜單制作當當圖書榜頁面2/30本章目標會使用position定位網(wǎng)頁元素會使用z-index屬性調(diào)整定位元素的堆疊次序3/30定位在網(wǎng)頁中的應(yīng)用隨滾動條移動的廣告圖片工作地點選擇框4/30在線咨詢圖框定位position屬性static：默認值，沒有定位relative：相對定位absolute：絕對定位fixed：固定定位fixed目前還不被一些瀏覽器支持，實際網(wǎng)頁制作中也不常用。經(jīng)驗5/30static定位static屬性值演示示例1：static定位沒有定位，以標準流方式顯示6/30相對定位relative屬性值相對自身原來位置進行偏移偏移設(shè)置：top、left、right、bottom演示示例2：relative定位示例#first{ background-color:#FC9; border:1px#B55A00dashed;

position:relative; top:-20px; left:20px;}#third{ background-color:#C5DECC; border:1px#395E4Fdashed;

position:relative; right:20px; bottom:30px;}7/30概念：相對定位就是相對于自己應(yīng)該在的位置的定位,比如left:1px的時候就是相對于正常位置右移了1個像素,相對定位元素的規(guī)律設(shè)置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置。設(shè)置相對定位的盒子仍在標準流中，它對父級盒子和相鄰的盒子都沒有任何影響。8/30浮動元素設(shè)置相對定位設(shè)置第二個盒子右浮動，再設(shè)置第一、第二盒子相對定位#second{ background-color:#CCF; border:1px#0000A8dashed;

float:right;}示例#first{ background-color:#FC9; border:1px#B55A00dashed;

position:relative; right:20px; bottom:20px;}#second{ background-color:#CCF; border:1px#0000A8dashed;

float:right; position:relative; left:20px; top:-20px;}演示示例3：浮動元素使用relative定位9/30相對定位小結(jié)設(shè)置了position屬性值為relative的網(wǎng)頁元素，無論是在標準流中還是在浮動流中，都不會對它的父級元素和相鄰元素有任何影響，它只針對自身原來的位置進行偏移。10/30絕對定位absolute屬性值偏移設(shè)置：left、right、top、bottom11/30絕對定位是相對于瀏覽器窗口的定位,left:1px就是在瀏覽器窗口距離左邊1像素的位置絕對定位小結(jié)使用了絕對定位的元素以它最近的一個“已經(jīng)定位”的“祖先元素”為基準進行偏移。如果沒有已經(jīng)定位的祖先元素，那么會以瀏覽器窗口為基準進行定位。絕對定位的元素從標準文檔流中脫離，這意味著它們對其他元素的定位會造成影響。相對就是與絕對相反的，當頁面拉伸的時候相對定位的兩個元素會因為位置關(guān)系而做相應(yīng)的位置改變，但是絕對定位不會

12/30設(shè)置了絕對定位但沒有設(shè)置偏移量的元素將保持在原來的位置。這個性質(zhì)在網(wǎng)頁制作中可以用于需要使某個元素脫離標準流，而仍然希望它保持在原來的位置的情況。#second{ background-color:#CCF; border:1px#0000A8dashed;

position:absolute; right:30px;}絕對定位不設(shè)置偏移量示例經(jīng)驗13/30學(xué)員操作—經(jīng)濟半小時專題報道2-1訓(xùn)練要點使用float定位網(wǎng)頁元素使用background設(shè)置頁面背景使用border設(shè)置邊框樣式使用position定位網(wǎng)頁元素使用定義列表布局頁面內(nèi)容講解需求說明指導(dǎo)需求說明頁面內(nèi)容在瀏覽器中居中顯示14/30學(xué)員操作—經(jīng)濟半小時專題報道2-2實現(xiàn)思路使用定義列表進行圖文混排，圖片放在<dt>標簽中，文本放在<dd>標簽中使用浮動設(shè)置<dt>左浮動及寬度使用position設(shè)置第二個學(xué)員介紹的定位完成時間：10分鐘指導(dǎo)提示<dl><dt><imgsrc="image/adver-03.jpg"alt="學(xué)員照片"/></dt><dd><p><span>王洪賢</span>，北大……</p></dd></dl>15/30學(xué)員操作—帶按鈕的輪播廣告2-1訓(xùn)練要點使用background-color設(shè)置背景顏色使用border設(shè)置邊框樣式使用position定位網(wǎng)頁元素使用無序列表布局頁面內(nèi)容教員講解需求指導(dǎo)需求說明使用無序列表排版數(shù)字按鈕16/30學(xué)員操作—帶按鈕的輪播廣告2-2實現(xiàn)思路使用定位屬性設(shè)置數(shù)字按鈕顯示在圖片的右下方使用后代選擇器整體設(shè)置<li>的背景顏色、邊框樣式、數(shù)字邊框之間的距離完成時間：10分鐘提示指導(dǎo)#adverImg{ width:430px; height:130px;

position:relative; }#number{

position:absolute; right:5px; bottom:2px;}#numberli{ float:left; margin-right:5px; width:20px; height:20px; border:1px#666solid; text-align:center; line-height:20px; font-size:12px; list-style-type:none; background-color:#FFF;}17/30共性問題集中講解常見問題及解決辦法代碼規(guī)范問題調(diào)試技巧共性問題集中講解18/30z-index屬性調(diào)整元素定位時重疊層的上下位置z-index屬性值：整數(shù)，默認值為0設(shè)置了positon屬性時，z-index屬性可以設(shè)置各元素之間的重疊高低關(guān)系。z-index值大的層位于其值小的層上方19/30CSS中的

z-index屬性用于設(shè)置節(jié)點的堆疊順序,擁有更高堆疊順序的節(jié)點將顯示在堆疊順序較低的節(jié)點前面網(wǎng)頁元素透明度CSS設(shè)置元素透明度屬性說明舉例opacity:xx值為0~1，值越小越透明opacity:0.4;filter:alpha(opacity=x)x值為0~100，值越小越透明filter:alpha(opacity=40);演示示例5：z-index屬性20/30小結(jié)網(wǎng)頁中的元素都含有兩個堆疊層級，一個是未設(shè)置絕對定位時所處的環(huán)境，此時z-index是0；另一個是設(shè)置絕對定位時所處的堆疊環(huán)境，此時層的位置由z-index的值確定。改變設(shè)置絕對定位和沒有設(shè)置絕對定位的層的上下堆疊順序，只需調(diào)整絕對定位層的z-index值即可。21/30學(xué)員操作—制作下拉列表菜單2-1訓(xùn)練要點使用position設(shè)置相對定位和絕對定位使用z-index設(shè)置層級堆疊需求說明教員講解需求指導(dǎo)22/30學(xué)員操作—制作下拉列表菜單2-2實現(xiàn)思路初始狀態(tài)<dd>不顯示，并設(shè)置二級菜單的位置當鼠標移至一級導(dǎo)航菜單上時顯示對應(yīng)的二級菜單，使用超鏈接的偽類設(shè)置<dd>顯示出來完成時間：10分鐘提示指導(dǎo).menudd{

display:none; position:absolute; z-index:1; left:10px; top:36px;}.menudl:hoverdd{

display:block;}23/30學(xué)員操作—當當圖書榜需求說明頁面右上角“3折瘋搶”圖片和圖書列表中的“1”、“2”、“3”圖片均使用定位方式實現(xiàn)。鼠標移至導(dǎo)航菜單上時出現(xiàn)下劃線。頁面中英文體為Verdana，中文字體為宋體，字體大小為12px。完成時間：10分鐘練習24/30共性問題集中講解常見問題及解決辦法代碼規(guī)范問題調(diào)試技巧共性問題集中講解25/30總結(jié)使用position屬性定位頁面元素。position屬性值有static、relative、absolute和fixed，其中relative和absolute兩種定位方式是網(wǎng)