網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件05.為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件05.為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件05.為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件05.為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件05.為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀_第5頁(yè)
已閱讀5頁(yè)，還剩49頁(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ì)與制作項(xiàng)目式教程（HTML+CSS）項(xiàng)目二

簡(jiǎn)單展示類網(wǎng)頁(yè)開發(fā)項(xiàng)目——為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀項(xiàng)目實(shí)施任務(wù)分析小丁使用HTML制作了“中國(guó)民俗”網(wǎng)站頁(yè)面的內(nèi)容后，發(fā)現(xiàn)最終效果跟網(wǎng)站設(shè)計(jì)需求的效果不一樣，老師告訴小丁，他只完成了網(wǎng)站頁(yè)面的html內(nèi)容的設(shè)置，還需要為網(wǎng)站頁(yè)面設(shè)置CSS外觀樣式，設(shè)置了外觀樣式的網(wǎng)頁(yè)最終效果如圖2-1和圖2-2所示。圖2-1

“中國(guó)民俗”網(wǎng)站網(wǎng)頁(yè)圖2-2傳統(tǒng)節(jié)日詳情頁(yè)任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備知識(shí)導(dǎo)圖本任務(wù)涉及的主要知識(shí)點(diǎn)如圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式1.CSS基本概念CSS（CascadingStyleSheets），即串聯(lián)樣式表，CSS的出現(xiàn)是為了改造HTML標(biāo)簽在瀏覽器中所展示的外觀，使其變得更加好看，就像蓋房子，HTML是把房子結(jié)構(gòu)建好，而CSS是給房子裝修，刷油漆和裝飾。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式2.CSS功能特點(diǎn)（1）豐富的樣式定義CSS提供了豐富的文檔樣式外觀，樣式定義如何顯示HTML元素，如字體樣式、文本樣式、邊框樣式、背景樣式、超鏈接樣式、圖片樣式、列表樣式、表格樣式等一些系列頁(yè)面效果。（2）易于使用和修改CSS有多種定義方式供HTML頁(yè)面使用，如果要修改樣式，只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式（3）多頁(yè)面應(yīng)用CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中，這樣我們可以在多個(gè)頁(yè)面中使用同一個(gè)CSS樣式表，可以同時(shí)控制多張網(wǎng)頁(yè)的布局，極大地提高工作效率。（4）層疊層疊就是多個(gè)樣式定義可層疊為一個(gè)，對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式，將使用最后一次設(shè)置的屬性值。例如對(duì)多個(gè)頁(yè)面同時(shí)應(yīng)用了一套CSS樣式表，而某一個(gè)頁(yè)面中的某些元素想要使用其他的樣式，就可以針對(duì)這些樣式單獨(dú)定義到頁(yè)面中，這些后來(lái)的樣式將覆蓋掉前面的樣式設(shè)置，在瀏覽器中看到的將會(huì)是最后面設(shè)置的樣式效果。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備3.CSS引入方式在HTML中，共有3種CSS引入方式，分別是內(nèi)聯(lián)樣式表，內(nèi)部樣式表，外部樣式表，這3種引入方式的優(yōu)先級(jí)為：內(nèi)聯(lián)樣式表>內(nèi)部樣式表>外部樣式表。新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備（1）內(nèi)聯(lián)樣式表內(nèi)聯(lián)樣式表，也是將HTML代碼和CSS代碼放在同一個(gè)文件中，但是它和內(nèi)部樣式表不同，CSS樣式不是在<style></style>標(biāo)簽中定義，而是將CSS樣式寫在元素的通用屬性style中，這種方式只對(duì)單個(gè)元素有效，不會(huì)影響整個(gè)文件，可以精準(zhǔn)地控制HTML文檔的顯示效果，對(duì)于一些規(guī)模較小的項(xiàng)目，或者只需要設(shè)置少量樣式的情況下，可是適當(dāng)使用內(nèi)聯(lián)樣式，示例代碼如下：新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式代碼運(yùn)行效果：任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備（2）內(nèi)部樣式表內(nèi)部樣式表是將HTML代碼和CSS代碼放在同一個(gè)文件中，直接將CSS樣式寫在<style></style>標(biāo)簽中作為內(nèi)容，這種寫法重用性較差，有時(shí)還會(huì)導(dǎo)致HTML文檔過(guò)大，當(dāng)重復(fù)的CSS代碼在不同的HTML文檔中存在時(shí)會(huì)導(dǎo)致大量的重復(fù)下載，在希望某些CSS樣式效果僅對(duì)某個(gè)頁(yè)面有效時(shí)，通常采用這種形式，示例代碼如下：引入CSS樣式后頁(yè)面預(yù)覽效果同內(nèi)聯(lián)樣式表。新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備（3）外部樣式表外部樣式表是最理想的CSS引入方式，在實(shí)際開發(fā)中，為了提高網(wǎng)頁(yè)的性能和維護(hù)性，一般都使用外部樣式表，外部樣式表就是將HTML頁(yè)面和CSS頁(yè)面單獨(dú)放在不同文件中，然后在HTML文檔的<head></head>標(biāo)簽中通過(guò)link標(biāo)簽來(lái)引入CSS樣式表，基本格式如下：<linktype=”text/css”rel=”stylesheet”href=”CSS樣式文件的URL”/>在CSS文件夾中新建CSS文件，如下圖所示。新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備給CSS文件命名，如下圖所示。項(xiàng)目布局如下圖所示新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備在HTML頁(yè)面使用<link>標(biāo)簽引入CSS文件，需注意CSS文件名必須一致，示例代碼如下：新知學(xué)習(xí)1：CSS基本概念、功能特點(diǎn)和引入方式CSS文件中書寫樣式代碼和引入CSS樣式后頁(yè)面預(yù)覽效果同內(nèi)部樣式表。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備在css中，可以對(duì)文本的顯示效果進(jìn)行設(shè)置，常用設(shè)置文本樣式的屬性如下表所示。新知學(xué)習(xí)2：CSS文本樣式屬性描述color定義文本顏色text-align定義文本的水平對(duì)齊方式vertical-align定義元素的垂直對(duì)齊方式text-decoration定義文本裝飾text-transform定義文本轉(zhuǎn)換text-indent定義文本縮進(jìn)letter-spacing定義文本中字符之間的間距l(xiāng)ine-height定義行之間的間距任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備1.文本顏色顏色屬性Color用于設(shè)置文本顏色，顏色取值有以下三種方法：（1）顏色名。如”red”(紅色)、”blue”(藍(lán)色)、”yellow”(黃色)。（2）十六進(jìn)制值。如”#FF0000”(紅色)、”#000FFF”(藍(lán)色)、”#FFFF00”(黃色)。（3）RGB值。如”RGB(255,0,0)”(紅色)、”RGB(0,0,255)”(藍(lán)色)、”RGB(255,255,0)”(黃色)。新知學(xué)習(xí)2：CSS文本樣式任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備2.文本水平對(duì)齊方式文本水平對(duì)齊text-align屬性取值如下表所示。新知學(xué)習(xí)2：CSS文本樣式text-align屬性值功能left文本左對(duì)齊center文本居中right文本右對(duì)齊text-align屬性用于設(shè)置文本的水平對(duì)齊方式，文本可以左對(duì)齊或右對(duì)齊，或居中對(duì)齊。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備3.文本垂直對(duì)齊方式文本垂直對(duì)齊方式vertical-align屬性取值如下表所示。新知學(xué)習(xí)2：CSS文本樣式vertical-align屬性值功能top把元素頂端與行中最高元素頂端對(duì)齊middle把此元素放置在父元素的中部bottom底端對(duì)齊vertical-align屬性設(shè)置一個(gè)元素的垂直對(duì)齊方式。該屬性常用于表格單元格框中單元格內(nèi)容的對(duì)齊方式或內(nèi)聯(lián)元素中，但不適用于塊元素，在使用塊元素時(shí)使用此屬性會(huì)無(wú)效。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備4.文本裝飾

文本裝飾text-decoration屬性取值如下表所示。新知學(xué)習(xí)2：CSS文本樣式text-decoration屬性值功能none用于超鏈接去掉下劃線overline上劃線line-through刪除線underline下劃線text-decoration屬性用于設(shè)置或刪除文本裝飾，值為none時(shí)用于從鏈接上刪除下劃線，值為overline時(shí)是上劃線，值為line-through時(shí)是刪除線,值為underline時(shí)是下劃線。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備5.文本轉(zhuǎn)換文本轉(zhuǎn)換text-transform屬性取值如下表所示。新知學(xué)習(xí)2：CSS文本樣式text-transform屬性值功能uppercase將所有內(nèi)容轉(zhuǎn)換為大寫lowercase將所有內(nèi)容轉(zhuǎn)換為小寫capitalize將每個(gè)單詞的首字母大寫text-transform屬性用于指定文本中的大寫和小寫字母，它可用于將所有內(nèi)容轉(zhuǎn)換為大寫或小寫字母，或?qū)⒚總€(gè)單詞的首字母大寫。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備6.文本縮進(jìn)text-indent屬性用于指定文本第一行的縮進(jìn)。新知學(xué)習(xí)2：CSS文本樣式text-transform屬性值功能uppercase將所有內(nèi)容轉(zhuǎn)換為大寫lowercase將所有內(nèi)容轉(zhuǎn)換為小寫capitalize將每個(gè)單詞的首字母大寫text-transform屬性用于指定文本中的大寫和小寫字母，它可用于將所有內(nèi)容轉(zhuǎn)換為大寫或小寫字母，或?qū)⒚總€(gè)單詞的首字母大寫。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備7.字符間距l(xiāng)etter-spacing

屬性用于指定文本中字符之間的間距。示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備8.行高line-height

屬性用于指定行之間的間距。示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備行高屬性也常用在塊元素內(nèi)部垂直居中，垂直居中行高的值必須等于元素高度的值。示例代碼如下：新知學(xué)習(xí)2：CSS文本樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備在CSS樣式中，使用font屬性可以設(shè)置豐富多彩的字體樣式。該屬性是一個(gè)復(fù)合屬性，常用于設(shè)置字體樣式的屬性如下表所示。新知學(xué)習(xí)3：CSS字體樣式屬性描述font-style定義字體斜體樣式font-weight定義字體粗細(xì)font-size定義字體大小font-variant定義字體變體任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備1.字體斜體樣式font-style

屬性主要用于指定斜體文本。font-style屬性值如下表所示。新知學(xué)習(xí)3：CSS字體樣式font-style屬性值功能normal字體正常顯示italic字體以斜體顯示oblique字體為傾斜，和斜體非常相似，但瀏覽器支持較少任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)3：CSS字體樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備2.字體粗細(xì)font-weight屬性指定字體的粗細(xì)。font-weight屬性值如下表所示。新知學(xué)習(xí)3：CSS字體樣式font-weight屬性值功能normal標(biāo)準(zhǔn)字符bold粗體字符bolder更粗的字符lighter更細(xì)的字符具體值值的區(qū)間在100-900，表示由細(xì)到粗的字符。400等同于normal，700等同于bold。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)3：CSS字體樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備3.字體大小font-size

屬性設(shè)置文本的大小。在網(wǎng)頁(yè)設(shè)計(jì)中，字體大小很重要。但是，不應(yīng)使用調(diào)整字體大小來(lái)使段落看起來(lái)像標(biāo)題，或是使標(biāo)題看起來(lái)像段落，應(yīng)使用正確的HTML元素，例如<h1>-<h6>用于標(biāo)題，<p>用于段落。font-size屬性值如下表所示。新知學(xué)習(xí)3：CSS字體樣式任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備新知學(xué)習(xí)3：CSS字體樣式font-size屬性的值功能xx-smallx-smallsmallmediumlargex-largexx-large把字體的大小設(shè)置為不同的尺寸，從xx-small到xx-large默認(rèn)值為mediumsmaller把字體設(shè)置為比父輩文本字體更小的尺寸larger把字體設(shè)置為比父輩文本字體更大的尺寸length把字體大小設(shè)置為一個(gè)固定值%把字體大小設(shè)置為基于父元素文本字體大小的一個(gè)百分比值任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備實(shí)際開發(fā)中，一般將font-size屬性值設(shè)置為一個(gè)“像素值”。實(shí)例代碼如下：新知學(xué)習(xí)3：CSS字體樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備4.字體變體font-variant

屬性指定是否以small-caps字體（小型大寫字母）顯示文本。在small-caps字體中，所有小寫字母都將轉(zhuǎn)換為大寫字母。但是，轉(zhuǎn)換后的大寫字母的字體大小小于文本中原始大寫字母的字體大小。示例代碼如下：新知學(xué)習(xí)3：CSS字體樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備CSS尺寸屬性允許控制元素的高度和寬度。height屬性設(shè)置元素的高度，width屬性設(shè)置元素的寬度，要注意的是

width屬性不包括填充，邊框和頁(yè)邊距！新知學(xué)習(xí)4：CSS寬高樣式width屬性值或height屬性值功能auto默認(rèn)值。瀏覽器可計(jì)算出實(shí)際的寬高。length使用

px、cm等單位定義寬高。單位%使用百分比設(shè)置百分比寬高。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)4：CSS寬高樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備在CSS中，對(duì)背景的設(shè)置比較豐富，背景用background屬性來(lái)設(shè)置，它是一個(gè)復(fù)合屬性，常用于設(shè)置背景的屬性如下表所示。新知學(xué)習(xí)5：CSS背景樣式屬性描述background-color定義背景顏色background-image定義背景圖像background-repeat定義背景圖像重復(fù)background-position定義背景圖像的位置任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備1.背景顏色background-color

屬性指定元素的背景顏色，顏色的指定方式同文字顏色，可搭配opacity屬性使用，示例代碼如下：新知學(xué)習(xí)5：CSS背景樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備2.背景圖像background-image屬性指定用作元素背景的圖像。默認(rèn)情況下，圖像會(huì)重復(fù)，以覆蓋整個(gè)元素。示例代碼如下：新知學(xué)習(xí)5：CSS背景樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備3.背景重復(fù)background-repeat屬性指定背景圖像的平鋪方式，默認(rèn)情況下，background-image屬性在水平和垂直方向上都重復(fù)圖像。某些圖像應(yīng)只適合水平或垂直方向上重復(fù)，否則它們看起來(lái)會(huì)很奇怪，如果圖像僅在水平方向重復(fù)

則使用background-repeat:repeat-x，則背景看起來(lái)會(huì)更好，如需垂直重復(fù)圖像，則設(shè)置

background-repeat:repeat-y，background-repeat

屬性還可指定只顯示一次背景圖像。具體屬性值如下表所示。新知學(xué)習(xí)5：CSS背景樣式background-repeat屬性值功能repeat-x僅在水平方向平鋪repeat-y僅在垂直方向平鋪no-repeat只顯示一次背景圖像任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備示例代碼如下：新知學(xué)習(xí)5：CSS背景樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備4.背景定位background-position

屬性用于指定背景圖像的位置。示例代碼如下：新知學(xué)習(xí)5：CSS背景樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備5.背景-簡(jiǎn)寫屬性在以上實(shí)例中可以看到頁(yè)面的背景通過(guò)了很多的屬性來(lái)控制。為了簡(jiǎn)化這些屬性的代碼，可以將這些屬性合并在同一個(gè)屬性中，背景的簡(jiǎn)寫屬性為"background"。示例代碼如下：新知學(xué)習(xí)5：CSS背景樣式頁(yè)面預(yù)覽效果如下圖所示。任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀知識(shí)儲(chǔ)備當(dāng)使用簡(jiǎn)寫屬性時(shí)，屬性值的順序?yàn)椋?/p>

background-color

background-image

background-repeat

background-attachment

background-position以上屬性無(wú)需全部使用，按照頁(yè)面的實(shí)際需要使用。新知學(xué)習(xí)5：CSS背景樣式任務(wù)2.4為“中國(guó)民俗”網(wǎng)站頁(yè)面設(shè)置外觀操作實(shí)踐在任務(wù)2.3中，小丁已經(jīng)制作了首頁(yè)的HT

溫馨提示

  • 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)論