網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程（第4版） 課件 2-3-7 課件：“英博特智能科技”企業(yè)網(wǎng)站首頁頁面制作-產(chǎn)品展示

第二篇：項目實戰(zhàn)篇任務(wù)3：“英博特智能科技”企業(yè)網(wǎng)站首頁頁面制作3.6產(chǎn)品展示3.7：產(chǎn)品展示（1）熟練掌握彈性布局。（2）學(xué)會CSS3過渡效果的設(shè)置。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述完成首頁頁面中產(chǎn)品展示模塊的制作，在該模塊中，上面是標(biāo)題，下面是三個產(chǎn)品內(nèi)容和更多超鏈接。3.7：產(chǎn)品展示任務(wù)思考（1）CSS3過渡效果對所有屬性均可設(shè)置么？

（2）鼠標(biāo)移上對子元素設(shè)置樣式時hover與子元素之間的分隔符是？

（3）行內(nèi)元素設(shè)置浮動需要清除浮動么？

3.7：產(chǎn)品展示認識CSS3CSS3是CSS（層疊樣式表）技術(shù)的升級版本，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。CSS3不僅有利于網(wǎng)站的開發(fā)與維護，還能提高網(wǎng)站的性能，增加網(wǎng)站的可訪問性、可用性，使網(wǎng)站能適配更多的設(shè)備，甚至還可以優(yōu)化網(wǎng)站，提高網(wǎng)站的搜索排名結(jié)果。CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、元素的過渡效果、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等等。

3.7：產(chǎn)品展示CSS3過渡CSS3過渡（transition）可以在限定的時間內(nèi)從一個屬性值平滑地過渡到另一個屬性值。這種過渡效果可以在鼠標(biāo)移上，鼠標(biāo)單擊，獲得焦點或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動畫效果改變CSS的屬性值。CSS3過渡效果可以應(yīng)用于各種CSS屬性，包括：背景顏色、寬度、高度、不透明度等。transition屬性類似于border，font這些屬性，可以簡寫，也可以單獨來寫。簡寫時，各函數(shù)之間用空格隔開，且需要按一定的順序排列。transition:[<transition-property>||<transition-duration>||<transition-timing-function>||<transition-delay>]用空格隔開3.7：產(chǎn)品展示transition-propertytransition-property指定過渡的CSS屬性，語法如下。transition-property:no|all|<single-transition-property>[,<single-transition-property>]（1）no：沒有指定任何樣式。（2）all：默認值，表示指定元素所有支持transition-property屬性的樣式。（3）<single-transition-property>：指定一個或多個樣式。注意：作用于多個過渡屬性時，過渡屬性中間用逗號隔開。不是所有樣式都能應(yīng)用transition-property進行過渡，只有具有一個中點值的樣式才能具備過渡效果，如顏色，長度，漸變等。3.7：產(chǎn)品展示transition-property示例【示例代碼】2-3-6.html。transition-property指定過渡的CSS屬性3.7：產(chǎn)品展示transition-durationtransition-duration指定完成過渡所需的時間，語法如下。transition-duration:<time>[,<time>]<time>為數(shù)值，單位為s（秒）或ms（毫秒），默認值是0。當(dāng)有多個過渡屬性時，可以設(shè)置多個過渡時間分別應(yīng)用過渡屬性，也可以設(shè)置一個過渡時間應(yīng)用所有過渡屬性。3.7：產(chǎn)品展示transition-duration示例【示例代碼】2-3-6.html。transition-duration指定完成過渡所需的時間。3.7：產(chǎn)品展示transition-timing-functiontransition-timing-function指定過渡調(diào)速函數(shù)，語法如下。transition-timing-function:<single-transition-timing-function>[,<single-transition-timing-function>]（1）ease：默認值，元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時速度由快到慢，逐漸變慢。（2）linear：元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)速度是勻速。（3）ease-in：元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時，速度越來越快，呈一種加速狀態(tài)。這種效果稱為漸顯效果。（4）ease-out：元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時，速度越來越慢，呈一種減速狀態(tài)。這種效果稱為漸隱效果。（5）ease-in-out：元素樣式從初始狀態(tài)到終止?fàn)顟B(tài)時，先加速再減速。這種效果稱為漸顯漸隱效果。3.7：產(chǎn)品展示transition-timing-function示例【示例代碼】2-3-6.html。transition-timing-function指定過渡調(diào)速函數(shù)。3.7：產(chǎn)品展示transition-delaytransition-delay用來指定一個動畫開始執(zhí)行的時間，即當(dāng)改變元素屬性值后多長時間開始執(zhí)行過渡效果，它可以是正整數(shù)，負整數(shù)和0（默認值是0），非零的時候必須將單位設(shè)置為s（秒）或ms（毫秒）。語法如下。transition-delay:<time>[,<time>]3.7：產(chǎn)品展示任務(wù)實施實現(xiàn)三列布局02.設(shè)置文本內(nèi)容樣式03.01.搭建產(chǎn)品展示模塊結(jié)構(gòu)具體要求見任務(wù)書設(shè)置CSS3過渡效果04.3.7：產(chǎn)品展示討論區(qū)運用所學(xué)知識，