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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

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

——不同于相對(duì)定位絕對(duì)定位元素的位置相對(duì)于最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。在絕對(duì)定位中，標(biāo)準(zhǔn)流中其他元素的布局就像絕對(duì)定位的元素不存在一樣。元素絕對(duì)定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。12.2.3絕對(duì)定位<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>絕對(duì)定位測(cè)試</p><spanclass="sp1">絕對(duì)定位測(cè)試標(biāo)簽span1</span><span>絕對(duì)定位測(cè)試對(duì)比span標(biāo)簽</span></body></html>12.2.4元素的堆疊順序、溢出和剪裁1．元素的堆疊順序因?yàn)榻^對(duì)定位元素的框與標(biāo)準(zhǔn)流無(wú)關(guān)，所以它們有可能覆蓋頁(yè)面上的其它元素?？梢酝ㄟ^(guò)設(shè)置z-index屬性來(lái)控制這些框的堆疊順序。z-index屬性只能應(yīng)用于使用了絕對(duì)定位的元素，其值為整數(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屬性用來(lái)規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)如何處理，常用的屬性值見下表值描述visible默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。hidden元素框之外的內(nèi)容會(huì)被修剪，修剪掉的內(nèi)容不顯示。scroll元素框之外的內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看修剪掉的內(nèi)容。auto讓瀏覽器自動(dòng)處理被修剪掉的內(nèi)容，通常會(huì)顯示滾動(dòng)條以便查看。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>這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為scroll，不論是否需要，用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。</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>這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為scroll，不論是否需要，用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。</div></body></html>12.2.4元素的堆疊順序、溢出和剪裁3．元素的裁剪clip屬性用來(lái)剪裁絕對(duì)定位元素，它可以為元素塊定義一個(gè)矩形裁剪框，裁剪框之內(nèi)的區(qū)域顯示，之外的區(qū)域不顯示（或根據(jù)overflow的屬性值來(lái)處理）。clip屬性的基本語(yǔ)法為：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. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論