網(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頁，還剩12頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計(jì)與制作（12）CSS樣式（7）

----設(shè)置網(wǎng)頁的背景

知識(shí)技能目標(biāo)1、通過實(shí)訓(xùn)項(xiàng)目熟練掌握運(yùn)用css設(shè)置網(wǎng)頁的背景。

實(shí)訓(xùn)內(nèi)容css對設(shè)置網(wǎng)頁的背景的綜合運(yùn)用實(shí)踐項(xiàng)目1：用CSS設(shè)置網(wǎng)頁的背景

實(shí)訓(xùn)項(xiàng)目課堂實(shí)踐1.（1）新建頁面，搭建頁面框架<body><divid="title“></div> <divid="content"> </div>課堂實(shí)踐1.（2）在正文中添加文本和圖像<body><divid="title">WorldWord</div> <imgsrc="mainroad.jpg“>

<span>春</span><divid="content"> <p>季，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。春季植物開始發(fā)芽生長，許多鮮花開放。冬眠的動(dòng)物蘇醒，許多以卵過冬的動(dòng)物孵化，鳥類開始遷徙，離開越冬地向繁殖地進(jìn)發(fā)。許多動(dòng)物在這段時(shí)間里發(fā)情，因此中國也將春季稱為“萬物復(fù)蘇”的季節(jié)。春季氣溫和生物界的變化對人的心理和生理也有影響。</p> <p>對農(nóng)民來說，春季是播種許多農(nóng)作物的季節(jié)。在春季，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。春季植物開始發(fā)芽生長，許多鮮花開放。冬眠的動(dòng)物蘇醒，許多以卵過冬的動(dòng)物孵化，鳥類開始遷徙，離開越冬地向繁殖地進(jìn)發(fā)。許多動(dòng)物在這段時(shí)間里發(fā)情，因此中國也將春季稱為“萬物復(fù)蘇”的季節(jié)。</p></div>style="float:right;"（3）設(shè)置圖文混排的效果課堂實(shí)踐<head>……<style><!--body{ background-color:#5b8a00; /*設(shè)置頁面背景顏色*/ margin:0px; padding:0px; color:#c4f762; /*設(shè)置頁面文字顏色*/}#content{……/*正文文字的屬性*/}span{……/*首字放大*/}--></style></head><body> ……2.設(shè)置背景顏色、首字放大等課堂實(shí)踐<head>……<style><!--body{ background-color:#5b8a00; /*設(shè)置頁面背景顏色*/ margin:0px; padding:0px; color:#c4f762; /*設(shè)置頁面文字顏色*/

background-image:url(bg1.jpg); /*背景圖片*/}3.(1)設(shè)置頁面的背景圖像(2)設(shè)置背景圖像垂直方向重復(fù)background-repeat:repeat-y; /*垂直方向重復(fù)*/課堂實(shí)踐<head>……<style>#content{……/*正文文字的屬性*/background:url(bg11.jpg);/*背景圖片*/ …… /*背景不重復(fù)*/……/*背景位置固定左下*/}（3）設(shè)置正文行塊的背景圖像（參考P159-161）課堂實(shí)踐<head>……<style>#content{……/*正文文字的屬性*/background:url(bg11.jpg);/*背景圖片*/ …… /*背景不重復(fù)*/……/*背景位置固定左下*/}（4）設(shè)置背景圖像位置固定（參考P163）課堂實(shí)踐<head>……<style>#title{……/*正文文字的屬性*/ background:url(s_logo.gif);/*背景圖片*/ background-repeat:……/*背景不重復(fù)*/ background-position:……;/*背景位置居中*/ …… ……5.設(shè)置圖像替換標(biāo)題(1)設(shè)置標(biāo)題的背景圖像課堂實(shí)踐span{ /*首字放大*/ …… display:none;}5.設(shè)置圖像替換標(biāo)題(2)隱藏文字(3)仔細(xì)觀察，隱藏文字后出現(xiàn)什么問題了，如何使首字重新顯示出來？實(shí)踐項(xiàng)目2：用CSS設(shè)置滑動(dòng)門效果

實(shí)訓(xùn)項(xiàng)目課堂實(shí)踐1：設(shè)置網(wǎng)頁寬\窄標(biāo)題的背景，如何讓寬標(biāo)題的背景花紋出現(xiàn)兩端呢？<style><!--h3{font-size:18px;padding-left:40px;background:url(leftbg.jpg);line-height:21px;}.wide{width:280px;}.narrow{width:170px;}</style></head><body><h3class="wide"><span>我寬些</span></h3><h3class="narrow"><span></span>我窄些

</h3></body></html>課堂實(shí)踐h3{font-size:13px;padding-left:80px;background:url(leftbg.jpg);background-repeat:no-repeat;line-height:21px;}span{display:block;padding-right:30px;background:url(leftbg.jpg);background-repeat:no-repeat;background-position:right;

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(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

提交評論