版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
定位網(wǎng)頁元素第八章本章任務(wù)制作經(jīng)濟半小時專題報道頁面制作帶按鈕的輪播廣告制作下拉列表導(dǎo)航菜單制作當(dāng)當(dāng)圖書榜頁面2/30本章目標(biāo)會使用position定位網(wǎng)頁元素會使用z-index屬性調(diào)整定位元素的堆疊次序3/30定位在網(wǎng)頁中的應(yīng)用隨滾動條移動的廣告圖片工作地點選擇框4/30在線咨詢圖框定位position屬性static:默認(rèn)值,沒有定位relative:相對定位absolute:絕對定位fixed:固定定位fixed目前還不被一些瀏覽器支持,實際網(wǎng)頁制作中也不常用。經(jīng)驗5/30static定位static屬性值演示示例1:static定位沒有定位,以標(biāo)準(zhǔn)流方式顯示6/30相對定位relative屬性值相對自身原來位置進(jìn)行偏移偏移設(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è)置相對定位的盒子會相對它原來的位置,通過指定偏移,到達(dá)新的位置。設(shè)置相對定位的盒子仍在標(biāo)準(zhǔn)流中,它對父級盒子和相鄰的盒子都沒有任何影響。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)頁元素,無論是在標(biāo)準(zhǔn)流中還是在浮動流中,都不會對它的父級元素和相鄰元素有任何影響,它只針對自身原來的位置進(jìn)行偏移。10/30絕對定位absolute屬性值偏移設(shè)置:left、right、top、bottom11/30絕對定位是相對于瀏覽器窗口的定位,left:1px就是在瀏覽器窗口距離左邊1像素的位置絕對定位小結(jié)使用了絕對定位的元素以它最近的一個“已經(jīng)定位”的“祖先元素”為基準(zhǔn)進(jìn)行偏移。如果沒有已經(jīng)定位的祖先元素,那么會以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。絕對定位的元素從標(biāo)準(zhǔn)文檔流中脫離,這意味著它們對其他元素的定位會造成影響。相對就是與絕對相反的,當(dāng)頁面拉伸的時候相對定位的兩個元素會因為位置關(guān)系而做相應(yīng)的位置改變,但是絕對定位不會
12/30設(shè)置了絕對定位但沒有設(shè)置偏移量的元素將保持在原來的位置。這個性質(zhì)在網(wǎng)頁制作中可以用于需要使某個元素脫離標(biāo)準(zhǔn)流,而仍然希望它保持在原來的位置的情況。#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)思路使用定義列表進(jìn)行圖文混排,圖片放在<dt>標(biāo)簽中,文本放在<dd>標(biāo)簽中使用浮動設(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ù),默認(rèn)值為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āng)鼠標(biāo)移至一級導(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é)員操作—當(dāng)當(dāng)圖書榜需求說明頁面右上角“3折瘋搶”圖片和圖書列表中的“1”、“2”、“3”圖片均使用定位方式實現(xiàn)。鼠標(biāo)移至導(dǎo)航菜單上時出現(xiàn)下劃線。頁面中英文體為Verdana,中文字體為宋體,字體大小為12px。完成時間:10分鐘練習(xí)24/30共性問題集中講解常見問題及解決辦法代碼規(guī)范問題調(diào)試技巧共性問題集中講解25/30總結(jié)使用position屬性定位頁面元素。position屬性值有static、relative、absolute和fixed,其中relative和absolute兩種定位方式是網(wǎng)
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 臨沂科技職業(yè)學(xué)院《STM單片機原理及其應(yīng)用》2023-2024學(xué)年第一學(xué)期期末試卷
- 遼東學(xué)院《體育游戲創(chuàng)編》2023-2024學(xué)年第一學(xué)期期末試卷
- 江西新能源科技職業(yè)學(xué)院《山水畫基礎(chǔ)二》2023-2024學(xué)年第一學(xué)期期末試卷
- 江蘇電子信息職業(yè)學(xué)院《數(shù)字化空間設(shè)計》2023-2024學(xué)年第一學(xué)期期末試卷
- 華東師范大學(xué)《媒介通論》2023-2024學(xué)年第一學(xué)期期末試卷
- 江蘇連云港某公司“12.9”爆炸事故報告
- 湖北國土資源職業(yè)學(xué)院《信號與控制綜合實踐》2023-2024學(xué)年第一學(xué)期期末試卷
- 遵義醫(yī)科大學(xué)醫(yī)學(xué)與科技學(xué)院《PC技術(shù)》2023-2024學(xué)年第一學(xué)期期末試卷
- 珠海格力職業(yè)學(xué)院《電工技術(shù)與電氣控制》2023-2024學(xué)年第一學(xué)期期末試卷
- 重慶能源職業(yè)學(xué)院《電子信息科學(xué)與技術(shù)導(dǎo)論》2023-2024學(xué)年第一學(xué)期期末試卷
- 中俄東線天然氣管道工程(永清-上海)環(huán)境影響報告書
- 2024年長沙市中考數(shù)學(xué)真題試卷及答案
- SY-T 5333-2023 鉆井工程設(shè)計規(guī)范
- 蔣詩萌小品《誰殺死了周日》臺詞完整版
- TB 10010-2008 鐵路給水排水設(shè)計規(guī)范
- 黑色素的合成與美白產(chǎn)品的研究進(jìn)展
- 建筑史智慧樹知到期末考試答案2024年
- 金蓉顆粒-臨床用藥解讀
- 社區(qū)健康服務(wù)與管理教案
- 2023-2024年家政服務(wù)員職業(yè)技能培訓(xùn)考試題庫(含答案)
- 2023年(中級)電工職業(yè)技能鑒定考試題庫(必刷500題)
評論
0/150
提交評論