中職 網(wǎng)頁設(shè)計(jì)與制作案例教程第12章_第1頁
中職 網(wǎng)頁設(shè)計(jì)與制作案例教程第12章_第2頁
中職 網(wǎng)頁設(shè)計(jì)與制作案例教程第12章_第3頁
中職 網(wǎng)頁設(shè)計(jì)與制作案例教程第12章_第4頁
中職 網(wǎng)頁設(shè)計(jì)與制作案例教程第12章_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

中職網(wǎng)頁設(shè)計(jì)與制作案例教程第12章工信版第12章CSS定位布局312.1基礎(chǔ)項(xiàng)目1：制作“精品購物網(wǎng)”首頁12.2知識庫：定位的原理及應(yīng)用技巧12.3提高項(xiàng)目：制作“會當(dāng)凌絕頂—小說投稿”

網(wǎng)頁12.4拓展項(xiàng)目：制作“創(chuàng)意照片墻”網(wǎng)頁目錄412.1基礎(chǔ)項(xiàng)目：制作“精品購物網(wǎng)”首頁5（1）了解position屬性和CSS定位的類型，掌握相對定位與絕對定位的區(qū)別。（2）掌握left、right、top和bottom屬性的作用。（3）掌握z-index屬性的作用。（4）了解visibility屬性的作用。（5）能對整個頁面進(jìn)行HTML結(jié)構(gòu)設(shè)計(jì)。（6）能利用定位法對頁面元素進(jìn)行定位。知識技能目標(biāo)12.1基礎(chǔ)項(xiàng)目：制作“精品購物網(wǎng)”首頁6首頁結(jié)構(gòu)設(shè)計(jì)12.1.1對頁面進(jìn)行整體布局7首頁結(jié)構(gòu)設(shè)計(jì)12.1.1對頁面進(jìn)行整體布局812.1.2制作主體內(nèi)容區(qū)912.1.3制作側(cè)邊導(dǎo)航欄1012.2知識庫：

定位的原理及應(yīng)用技巧定位是通過CSS中的position屬性來確定元素在網(wǎng)頁上的位置。通過定位屬性可以設(shè)置一些不規(guī)則的布局。12.2.1CSS定位屬性屬性描述position把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。top定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。left定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。overflow設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。clip設(shè)置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。vertical-align設(shè)置元素的垂直對齊方式。z-index設(shè)置元素的堆疊順序。12.2.1CSS定位屬性top、right、bottom和left這4個屬性都是配合position屬性使用的，只有當(dāng)將position屬性設(shè)置為absolute、relative或fixed才有效，否則沒有任何意義。12.2.1CSS定位屬性

position的屬性值值描述relative生成相對定位元素，該元素相對于其正常位置進(jìn)行定位。元素框偏移某個距離，元素仍保持其未定位前的形狀，它原本所占的空間仍保留。其偏移的距離通過left、top、right及bottom屬性設(shè)定。absolute生成絕對定位元素，該元素相對于最近的已定位的祖先元素進(jìn)行定位。元素框從文檔流完全刪除，元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。元素的位置通過left、top、right及bottom屬性設(shè)定。fixed生成絕對定位元素，該元素相對于瀏覽器窗口進(jìn)行定位。元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含塊是視窗本身。元素的位置通過left、top、right及bottom屬性設(shè)定。static默認(rèn)值，沒有定位，元素出現(xiàn)在正常流中。塊級元素生成一個矩形框，作為文檔流的一部分；行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。忽略left、top、right、bottom或z-index聲明。12.2.1CSS定位屬性在定位過程中要注意left、top、right和bottom屬性只需要定義兩個，水平方向：left或right，垂直方向top或bottom，即X軸與Y軸兩點(diǎn)確定位置，不能4個屬性同時(shí)設(shè)置。12.2.2相對定位元素的位置相對于它在標(biāo)準(zhǔn)流中的位置。如果對一個元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點(diǎn)進(jìn)行移動。12.2.2相對定位<html><head><styletype="text/css">p{width:200px;height:50px;background-color:aqua;}.p1{position:relative;left:-20px;}.p2{position:relative;left:20px;}</style></head><body><p>相對定位測試</p><pclass="p1">相對于正常位置向左移動20px</p><pclass="p2">相對于正常位置向右移動20px</p></body></html>12.2.2相對定位在使用相對定位時(shí)，無論是否進(jìn)行移動，元素仍然占據(jù)原來的空間。因此，移動元素可能會導(dǎo)致它覆蓋其它框。所以單獨(dú)使用相對定位的時(shí)候比較少，通常是結(jié)合絕對定位法使用，即將相對定位元素作為絕對定位的祖先元素使用。相對定位后，元素仍保持其未定位前的形狀。12.2.2相對定位<html><head><styletype="text/css">p{width:100px;height:100px;background-color:aqua;}span{width:200px;height:200px;background-color:red;}/*.sp1{position:relative;left:30px;top:-30px;}*/</style></head><body><p>相對定位測試</p><spanclass="sp1">相對定位測試span1</span><span>相對定位測試</span></body></html>12.2.3絕對定位絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。

——不同于相對定位絕對定位元素的位置相對于最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。在絕對定位中，標(biāo)準(zhǔn)流中其他元素的布局就像絕對定位的元素不存在一樣。元素絕對定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。12.2.3絕對定位<html><head><styletype="text/css">p{width:200px;height:200px;background-color:aqua;}span{width:200px;height:200px;background-color:red;}/*.sp1{position:absolute;left:30px;top:30px;}*/</style></head><body><p>絕對定位測試</p><spanclass="sp1">絕對定位測試標(biāo)簽span1</span><span>絕對定位測試對比span標(biāo)簽</span></body></html>12.2.4元素的堆疊順序、溢出和剪裁1．元素的堆疊順序因?yàn)榻^對定位元素的框與標(biāo)準(zhǔn)流無關(guān)，所以它們有可能覆蓋頁面上的其它元素?？梢酝ㄟ^設(shè)置z-index屬性來控制這些框的堆疊順序。z-index屬性只能應(yīng)用于使用了絕對定位的元素，其值為整數(shù)，可以是正數(shù)也可以是負(fù)數(shù)，默認(rèn)值為0，數(shù)值越高堆疊順序越高。12.2.4元素的堆疊順序、溢出和剪裁1．元素的堆疊順序<html><head><styletype="text/css">span{display:inline-block;width:200px;height:200px;}.sp1{background-color:aqua;}.sp2{background-color:red;}.sp3{background-color:blue;}</style></head><body><spanclass="sp1">元素的堆疊順序sp1</span><spanclass="sp2">元素的堆疊順序sp2</span><spanclass="sp3">元素的堆疊順序sp3</span></body></html>12.2.4元素的堆疊順序、溢出和剪裁1．元素的堆疊順序.sp2{position:absolute;left:30px;top:20px;background-color:red;}12.2.4元素的堆疊順序、溢出和剪裁1．元素的堆疊順序.sp2{position:absolute;left:30px;top:20px;z-index:-1;background-color:red;}12.2.4元素的堆疊順序、溢出和剪裁2．元素的溢出overflow屬性用來規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)如何處理，常用的屬性值見下表值描述visible默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。hidden元素框之外的內(nèi)容會被修剪，修剪掉的內(nèi)容不顯示。scroll元素框之外的內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看修剪掉的內(nèi)容。auto讓瀏覽器自動處理被修剪掉的內(nèi)容，通常會顯示滾動條以便查看。inherit規(guī)定應(yīng)該從父元素繼承overflow屬性的值。12.2.4元素的堆疊順序、溢出和剪裁2．元素的溢出<html><head><styletype="text/css">div{background-color:#0FF;width:150px;height:150px;overflow:scroll;}</style></head><body><div>這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。如果值為scroll，不論是否需要，用戶代理都會提供一種滾動機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條。</div></body></html>12.2.4元素的堆疊順序、溢出和剪裁2．元素的溢出<html><head><styletype="text/css">div{background-color:#0FF;width:150px;height:150px;

overflow:hidden;}</style></head><body><div>這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。如果值為scroll，不論是否需要，用戶代理都會提供一種滾動機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條。</div></body></html>12.2.4元素的堆疊順序、溢出和剪裁3．元素的裁剪clip屬性用來剪裁絕對定位元素，它可以為元素塊定義一個矩形裁剪框，裁剪框之內(nèi)的區(qū)域顯示，之外的區(qū)域不顯示（或根據(jù)overflow的屬性值來處理）。clip屬性的基本語法為：clip:rect(top,right,bottom,left);12.2.4元素的堆疊順序、溢出和剪裁3．元素的裁剪<html><head><styletype="text/css">div{float:left;}.clipimg{position:absolute;left:200px;top:0px;clip:rect(24px,226px,207px,11

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論