《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第1頁(yè)
《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第2頁(yè)
《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第3頁(yè)
《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第4頁(yè)
《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第5頁(yè)
已閱讀5頁(yè)，還剩15頁(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)介

第課使用CSS3美化圖像和背景的第課使用CSS3美化圖像和背景的基基本本PAGE1868216821使用CSS3美化圖像和背景第6821使用CSS3美化圖像和背景第課PAGE196212使用CSS3美化圖像和背景第6212使用CSS3美化圖像和背景第課PAGE1

課題使用CSS3美化圖像和背景課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握使用CSS3美化圖像和設(shè)置背景的方法（2）學(xué)習(xí)CSS3對(duì)圖文混排的處理流程（3）掌握使用CSS3設(shè)置漸變的方法思政育人目標(biāo)：通過(guò)對(duì)CSS3美化圖像和背景的學(xué)習(xí)，培養(yǎng)學(xué)生的邏輯思維能力，使學(xué)生懂得用技巧解決問(wèn)題，以提高工作效率教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：了解CSS3美化圖像、設(shè)置背景和漸變的原理教學(xué)難點(diǎn)：使用CSS3設(shè)置圖像漸變教學(xué)方法講授法、啟發(fā)法、問(wèn)答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：考勤（2min）→導(dǎo)入新知（4min）→知識(shí)講解（24min）→課堂練習(xí)（15min）第2節(jié)課：?jiǎn)栴}導(dǎo)入（4min）→知識(shí)講解（16min）→小組活動(dòng)（18min）→課堂小結(jié)（5min）→作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況新知導(dǎo)入

（4min）【教師】講解CSS3美化在日常生活中的使用，引出新知識(shí)點(diǎn)在日常生活中，可以經(jīng)常看到網(wǎng)頁(yè)中圖像的大小、邊框、陰影等樣式，還有一些網(wǎng)頁(yè)總體顏色的漸變格式，這些樣式大部分都是用CSS3樣式來(lái)設(shè)計(jì)的【學(xué)生】思考、討論【教師】總結(jié)學(xué)生討論內(nèi)容和其他編程語(yǔ)言不一樣的地方，CSS3編程語(yǔ)言最大的優(yōu)勢(shì)就是對(duì)于格式的控制以及美化操作的簡(jiǎn)潔性通過(guò)概述知識(shí)點(diǎn)，讓學(xué)生了解學(xué)習(xí)CSS3語(yǔ)言的必要性知識(shí)講解

（24min）【教師】講述圖像樣式和背景樣式圖像樣式1．圖像大小使用<img/>標(biāo)簽的width和height屬性可以設(shè)置圖像大小，但一般不直接使用，而建議使用CSS3中的width和height屬性更加靈活地設(shè)置圖像大小。CSS3中還有以下4個(gè)設(shè)置圖像大小的屬性，設(shè)置它們可以使圖像元素在移動(dòng)端正常顯示。（1）min-width屬性。設(shè)置最小寬度。（2）max-width屬性。設(shè)置最大寬度。（3）min-height屬性。設(shè)置最小高度。（4）max-height屬性。設(shè)置最大高度?！窘處煛垦菔尽纠?-7】操作流程，實(shí)現(xiàn)圖3-9的效果設(shè)置圖像的大小，頁(yè)面效果如圖3-9所示。圖3-9圖像大小的設(shè)置效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，為img元素設(shè)置不同的圖像大小。<style> .ph{width:20%;} .ps{width:200px;} .pb{width:500px;}</style>……<body> <imgclass="ph"src="images\p3.jpg"alt="綠色小草"/> <imgclass="ps"src="images\p3.jpg"alt="綠色小草"/> <imgsrc="images\p3.jpg"alt="綠色小草"/> <imgclass="pb"src="images\p3.jpg"alt="綠色小草"/></body>2．圖像邊框網(wǎng)頁(yè)中的圖像元素默認(rèn)是沒(méi)有邊框的，使用CSS3的border屬性可以設(shè)置不同樣式、顏色、寬度的邊框。（1）邊框樣式。在CSS3中，使用border-style屬性設(shè)置邊框樣式，具體格式為：border-style:solid|dotted|dashed;其中，solid表示單實(shí)線，此外還有double（雙線）、groove（槽線）、ridge（脊線）等表示實(shí)線的屬性值；dotted表示點(diǎn)線；dashed表示虛線。（2）邊框顏色。在CSS3中，使用border-color屬性設(shè)置邊框顏色，具體格式為：border-color:color;其中的屬性值color與文本顏色的設(shè)置相同。（3）邊框?qū)挾?。在CSS3中，使用border-width屬性設(shè)置邊框?qū)挾?，具體格式為：border-width:length;其中的屬性值是表示邊框?qū)挾鹊臄?shù)值與單位，不能使用百分比?！窘處煛垦菔尽纠?-8】操作流程，實(shí)現(xiàn)圖3-10的效果設(shè)置圖像的邊框，頁(yè)面效果如圖3-10所示。圖3-10圖像邊框的設(shè)置效果創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，標(biāo)記圖像標(biāo)簽。<imgclass="s1"src="images\p3.jpg"alt="綠色小草"/><imgclass="s2"src="images\p3.jpg"alt="綠色小草"/><imgclass="s3"src="images\p3.jpg"alt="綠色小草"/>在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，為img元素設(shè)置不同的邊框效果。img{width:150px;margin-right:20px;}/*設(shè)置圖像寬度為150px，右側(cè)外邊距為20px*//*設(shè)置邊框樣式為實(shí)線，邊框顏色為棕色，邊框?qū)挾葹?px*//*設(shè)置邊框樣式為點(diǎn)線，邊框顏色為灰色，邊框?qū)挾葹?px*//*設(shè)置邊框樣式為虛線，邊框顏色為橙色，邊框?qū)挾葹?px*/3．不透明度在CSS3中，使用opacity屬性設(shè)置圖像不透明度，具體格式為：opacity:0～1;它的取值范圍為0～1，數(shù)值越高透明度越低，0表示完全透明，1表示完全不透明。4．圓角圖像在CSS3中，使用border-radius屬性設(shè)置圓角樣式，具體格式為：border-radius:none|length;其中，none是默認(rèn)值，表示沒(méi)有圓角；length表示設(shè)定弧度的數(shù)值，不可為負(fù)值。為了分別設(shè)置4個(gè)頂角的圓角，border-radius屬性和邊框樣式屬性類似，派生了4個(gè)子屬性，它們的含義如下。（1）border-top-right-radius屬性。設(shè)置右上角的圓角。（2）border-bottom-right-radius屬性。設(shè)置右下角的圓角。（3）border-bottom-left-radius屬性。設(shè)置左下角的圓角。（4）border-top-left-radius屬性。設(shè)置左上角的圓角。【教師】演示【例3-9】操作流程，實(shí)現(xiàn)圖3-11的效果設(shè)置圖像的透明度與圓角，頁(yè)面效果如圖3-11所示。圖3-11圖像透明度與圓角的設(shè)置效果(1)創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，標(biāo)記圖像標(biāo)簽。<imgclass="y3s5"src="images\p4.jpg"alt="金甌永固杯"/><imgclass="y3s6"src="images\p4.jpg"alt="金甌永固杯"/><imgclass="y4s7"src="images\p4.jpg"alt="金甌永固杯"/><imgclass="y4s8"src="images\p4.jpg"alt="金甌永固杯"/>(2)在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，為img元素設(shè)置不同的透明度與圓角效果。img{width:300px;margin:20px;border:solid3px;}/*設(shè)置圖像的寬度為300px，外邊距為20px，有3px的黑色實(shí)線邊框*/.y1{opacity:0.3;} .y2{opacity:0.5;}.y3{opacity:0.7;} .y4{opacity:0.9;}.s1{border-radius:20px;} .s2{border-radius:10px20px;}.s3{border-radius:10px20px30px;}.s4{border-radius:10px20px30px40px;}.s5{border-radius:50px/100px}.s6{border-radius:100px50px/50px100px;}.s7{border-radius:100px50px80px/60px80px100px;}.s8{border-radius:60px60px60px60px/100px100px60px60px;}/*設(shè)置不同的透明度與圓角*/5．圖像陰影在CSS3中，使用box-shadow屬性設(shè)置陰影，具體格式為：box-shadow:h-shadowv-shadowblurspreadcolorinset;其中，spread表示陰影的尺寸，inset表示內(nèi)部陰影，其余各屬性與在文本陰影中的意義相同。另外，上述各參數(shù)除h-shadow與v-shadow之外都可以省略?！窘處煛垦菔尽纠?-10】操作流程，實(shí)現(xiàn)圖3-12的效果設(shè)置圖像的陰影，頁(yè)面效果如圖3-12所示。圖3-12為圖像添加陰影的頁(yè)面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，為圖像元素設(shè)置不同的陰影效果。<style> img{width:300px;margin:20px;border-radius:30px; border:solid3px#777777;}/*設(shè)置圖像寬度、外邊距、圓角及邊框*/ .y1{box-shadow:5px5px3px2px#545454;} .y2{box-shadow:-10px-8px5px2px#550000,-15px8px5px5px#55557f;}/*設(shè)置兩種圖像陰影*/</style>……<body> <imgsrc="images\p4.jpg"alt="金甌永固杯"/> <imgclass="y1"src="images\p4.jpg"alt="金甌永固杯"/> <imgclass="y2"src="images\p4.jpg"alt="金甌永固杯"/></body>【學(xué)生】聆聽(tīng)、思考、記錄【教師】編寫(xiě)代碼，顯示圖像不同的陰影等級(jí)設(shè)置圖像陰影等級(jí)美化視頻元素，頁(yè)面效果如圖3-13所示。圖3-13美化視頻元素后的頁(yè)面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，設(shè)置視頻元素的邊框與圓角等樣式。<style> div{float:left;} /*設(shè)置div元素向左浮動(dòng)*/ video{width:500px;height:300px;border:solid2pxlightblue; border-radius:50px;float:right;}/*設(shè)置視頻元素的寬度、高度、邊框與圓角，并向右浮動(dòng)*/</style>……<body> <div><h1>風(fēng)景視頻</h1><p>感受云霧山水之美</p></div> </body>【學(xué)生】跟著老師，一起編寫(xiě)代碼【教師】講解背景樣式1．設(shè)置背景圖像（1）設(shè)置背景圖像。在CSS3中，使用background-image屬性設(shè)置背景圖像，具體格式為：background-image:none|url;其中，none是默認(rèn)值，表示無(wú)背景圖；url表示背景圖像的地址【教師】演示【例3-12】操作流程，實(shí)現(xiàn)圖3-14的效果設(shè)置元素的背景圖像，頁(yè)面效果如圖3-14所示。圖3-14背景圖像的設(shè)置效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，為div元素設(shè)置背景圖像。 h1{color:aliceblue;text-align:center; text-shadow:2px2px10px#f0f8ff;} h2{color:#f0f8ff;text-align:center;}/*設(shè)置標(biāo)題文本的樣式*/ div{width:500px;height:120px; background-image:url(images/p5.jpg);}/*設(shè)置div元素的寬度、高度與背景圖像*/</style>……<body> <div> <h1>網(wǎng)上書(shū)店</h1> <h2>真誠(chéng)邀請(qǐng)您前來(lái)選購(gòu)，給您貼心的售后服務(wù)</h2> </div></body>（2）設(shè)置背景圖像的顯示方式。在CSS3中，使用background-repeat屬性設(shè)置背景圖像的顯示方式，具體格式為：background-repeat:repeat-x|repeat-y|repeat|no-repeat|round|

space;各屬性值的含義如下。①repeat-x。在水平方向上平鋪。②repeat-y。在豎直方向上平鋪。③repeat。在水平與豎直方向上平鋪。④no-repeat。不平鋪，只顯示一次。⑤round。自動(dòng)縮放以適應(yīng)容器。⑥space。以相同間距平鋪整個(gè)容器或某個(gè)方向。（3）設(shè)置背景圖像的顯示位置。默認(rèn)情況下，背景圖像顯示在元素左上角。在CSS3中，可以使用background-position屬性重新設(shè)置背景圖像的顯示位置，具體格式為：background-position:length-xlength-y;其中，length-x表示背景圖像在水平方向的位置，具有屬性值left、center及right，默認(rèn)值為left；length-y表示豎直方向的位置，具有屬性值top、center及bottom，默認(rèn)值為top。這兩個(gè)屬性值都可以使用數(shù)值與單位表示，也可以使用百分比，當(dāng)使用數(shù)值或百分比時(shí)，均以左上角為原點(diǎn)確定背景圖像的顯示位置。另外，如果只設(shè)置一個(gè)參數(shù)，那么瀏覽器將默認(rèn)第二個(gè)參數(shù)為center，即50%?！窘處煛垦菔尽纠?-13】操作流程，實(shí)現(xiàn)圖3-15的效果設(shè)置背景圖像的顯示方式與位置，頁(yè)面效果如圖3-15所示。圖3-15為h1元素設(shè)置背景圖像的頁(yè)面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，為h1元素設(shè)置兩層背景圖像，并設(shè)置它們的顯示方式與位置。<style> h1{text-indent:1.2em;color:#505050; background-image:url(images/p6.jpg),url(images/p7.jpg); background-repeat:no-repeat,repeat-x; background-position:12px0px,center38px;}/*首先設(shè)置標(biāo)題元素的文本縮進(jìn)與文本顏色，然后設(shè)置兩個(gè)背景圖像，并設(shè)置它們的顯示方式與位置*/ p{text-indent:1em;} /*設(shè)置段落文本的縮進(jìn)*/</style>……<body> <h1>網(wǎng)上書(shū)店</h1><p>真誠(chéng)邀請(qǐng)您前來(lái)選購(gòu)，給您貼心的售后服務(wù)。</p> <p>濃縮圖書(shū)的庫(kù)存空間，數(shù)量大、種類多，不受時(shí)間與地域的限制，信息豐富，價(jià)格低廉，還擁有個(gè)性化服務(wù)，快來(lái)選購(gòu)吧。</p></body>（4）固定背景圖像。在CSS3中，使用background-attachment屬性設(shè)置背景圖像的固定方式，具體格式為：background-attachment:scroll|fixed|local;其中，scroll是默認(rèn)值，表示背景相對(duì)于元素固定；fixed表示背景相對(duì)于瀏覽器窗體固定；local表示背景相對(duì)于元素內(nèi)容固定?！窘處煛垦菔尽纠?-14】操作流程，實(shí)現(xiàn)圖3-16的效果。圖3-16固定背景的設(shè)置效果2．設(shè)置背景顏色在CSS3中，使用background-color屬性設(shè)置背景顏色，具體格式為：background-color:color;其中，屬性值color與文本顏色的設(shè)置相同?！窘處煛垦菔尽纠?-15】操作流程，實(shí)現(xiàn)圖3-17的效果設(shè)置元素的背景顏色，頁(yè)面效果如圖3-17所示。圖3-17背景顏色的設(shè)置效果【學(xué)生】聆聽(tīng)、思考、記錄【教師】詢問(wèn)學(xué)生，是否有不理解的地方【學(xué)生】提出問(wèn)題，向老師請(qǐng)教【教師】回答學(xué)生提問(wèn)通過(guò)講解知識(shí)點(diǎn)，讓學(xué)生知道CSS3中圖像和背景樣式的使用方法課堂練習(xí)

（15min）【教師】布置課堂練習(xí)提供已有的HTML5的圖像和背景，安排小組學(xué)生按照要求完成課堂練習(xí)（1）實(shí)現(xiàn)HTML5背景圖像的邊框顯示（2）在已有圖片的基礎(chǔ)上實(shí)現(xiàn)背景圖片的漸變【教師】講解課堂練習(xí)【學(xué)生】完成課堂練習(xí)【教師】巡視課堂，督促學(xué)生完成課堂練習(xí)利用練習(xí)法，加深學(xué)生對(duì)CSS3語(yǔ)言操作的經(jīng)驗(yàn)第二節(jié)課問(wèn)題導(dǎo)入

（4min）【教師】提出問(wèn)題，讓學(xué)生思考上一節(jié)課，我們對(duì)圖像和背景的樣式進(jìn)行了調(diào)整，但是操作都限制在單個(gè)對(duì)象上，如果遇到圖文混排的多個(gè)對(duì)象，甚至更為復(fù)雜的漸變處理，我們應(yīng)該如何解決呢【學(xué)生】聆聽(tīng)、思考、理解通過(guò)問(wèn)答的方式，激發(fā)學(xué)生對(duì)使用CSS3處理復(fù)雜對(duì)象的學(xué)習(xí)興趣知識(shí)講解

（15min）【教師】講解圖文混排圖文混排圖文混排是網(wǎng)頁(yè)中較為常見(jiàn)的表現(xiàn)形式，也更有利于提升用戶的閱讀體驗(yàn)。默認(rèn)情況下，圖像作為行內(nèi)元素顯示在頁(yè)面中，也就是說(shuō)它可以與文本一起放置在段落標(biāo)簽中以達(dá)到圖文混排的效果。但是這樣的排版效果并不理想，無(wú)法做出文本環(huán)繞圖像的頁(yè)面效果。使用CSS樣式中的浮動(dòng)屬性float，可以使元素脫離原本的文檔流，移動(dòng)到容器的邊界，以達(dá)到圖文混排的效果。float屬性值可以設(shè)置為left、right或none，表示元素向左、向右浮動(dòng)或不浮動(dòng)。【教師】演示【例3-16】操作流程，實(shí)現(xiàn)圖3-18的效果使用float屬性制作圖文混排效果，頁(yè)面效果如圖3-18所示。圖3-18圖文混排的頁(yè)面效果(1)創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建圖文內(nèi)容的結(jié)構(gòu)。<h2>宋代作者介紹</h2><p><imgclass="g1"src="images/p9.jpg"alt="李清照"/>

<strong>李清照</strong>號(hào)易安居士，漢族，山東省濟(jì)南章丘人。宋代（南北宋之交）女詞人，婉約詞派代表，有“千古第一才女”之稱。所作詞，前期多寫(xiě)其悠閑生活，后期多悲嘆身世，情調(diào)感傷。形式上善用白描手法，自辟途徑，語(yǔ)言清麗。論詞強(qiáng)調(diào)協(xié)律，崇尚典雅，提出詞“別是一家”之說(shuō)，反對(duì)以作詩(shī)文之法作詞。有《易安居士文集》《易安詞》，已散佚。后人有《漱玉詞》輯本。</p><p><imgclass="g2"src="images/p10.jpg"alt="陸游"/>

<strong>陸游</strong>，字務(wù)觀，號(hào)放翁。漢族，越州山陰（今浙江紹興）人，南宋著名詩(shī)人。中年入蜀，投身軍旅生活，官至寶章閣待制。晚年退居家鄉(xiāng)。創(chuàng)作詩(shī)歌今存九千多首，內(nèi)容極為豐富。著有《劍南詩(shī)稿》《渭南文集》《南唐書(shū)》《老學(xué)庵筆記》等。</p>(2)在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置文本內(nèi)容的樣式，并分別設(shè)置兩個(gè)圖像元素向左與向右浮動(dòng)，使圖像與文本元素混合排列。h2{text-align:center;}p{text-indent:2em;text-align:justify;}/*設(shè)置標(biāo)題與段落文本的樣式*/img.g1{float:left;margin:010px;}img.g2{float:right;margin:010px;}/*設(shè)置圖像向左或向右浮動(dòng)，并有10px的左右外邊距*/【學(xué)生】聆聽(tīng)、思考、記錄【教師】講解漸變樣式以前想要在網(wǎng)頁(yè)中實(shí)現(xiàn)漸變效果，只能通過(guò)添加具有漸變圖案的圖像，現(xiàn)在則可以直接設(shè)置CSS3的background屬性來(lái)實(shí)現(xiàn)。使用CSS3設(shè)置的漸變效果比添加漸變圖像更易修改，過(guò)渡也更自然。1．線性漸變?cè)贑SS3中，使用linear-gradient()方法設(shè)置線性漸變，具體格式為：linear-gradient(angle,color1,color2…);angle表示漸變的方向，可以使用角度（單位為deg）或關(guān)鍵字表示。其中4個(gè)關(guān)鍵字的含義如下（1）tobottom。默認(rèn)值，表示漸變從上到下，等同于180deg。（2）totop。表示漸變從下到上，等同于0deg。（3）toleft。表示漸變從右到左，等同于270deg。（4）toright。表示漸變從左到右，等同于90deg。color1，color2表示漸變的顏色，還可以在它們的后面增加一個(gè)長(zhǎng)度值或百分比，表示漸變的起點(diǎn)位置，顏色值與起點(diǎn)位置之間用空格隔開(kāi)。一個(gè)線性漸變至少包含兩個(gè)漸變顏色。【教師】演示【例3-17】操作流程，實(shí)現(xiàn)圖3-19的效果為超鏈接設(shè)置線性漸變效果，頁(yè)面效果如圖3-19所示。圖3-19應(yīng)用線性漸變的圓角按鈕效果(1)創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，標(biāo)記兩個(gè)超鏈接標(biāo)簽。<ahref="#">登錄</a><ahref="#">注冊(cè)</a>(2)在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置超鏈接的樣式，為其添加線性漸變效果。a{display:block;margin:20px;float:left;color:#6f6f6f;width:200px;height:50px;font-size:2em;background:linear-gradient(totop,#aaaaaa,#dfdfdf50%);}/*設(shè)置超鏈接的樣式，首先將其轉(zhuǎn)換為塊級(jí)元素，添加外邊距，向左浮動(dòng)，并設(shè)置文本顏色、寬度、高度和字號(hào)，然后消除下劃線，文本居中對(duì)齊，添加圓角邊框和線性漸變*/a:hover{background:linear-gradient(#aaaaaa5%,#dfdfdf);color:#3b3b3b;}/*設(shè)置鼠標(biāo)指針移動(dòng)至超鏈接上時(shí)的漸變效果與文本顏色*/2．徑向漸變?cè)贑SS3中，使用radial-gradient()函數(shù)設(shè)置徑向漸變，具體格式為：radial-gradient(shapesizeposition,color1,color2…);其中，shape表示漸變的類型，包括circle（圓形）和ellipse（橢圓形）兩類；size表示圓形的半徑或者橢圓的半長(zhǎng)軸與半短軸，可以使用數(shù)值、百分比或關(guān)鍵字，其中4個(gè)關(guān)鍵字的含義如下（1）farthest-corner。設(shè)置漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角。（2）farthest-side。設(shè)置漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊。（3）closest-side。設(shè)置漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊。（4）closest-corner。設(shè)置漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角。position表示漸變中心點(diǎn)的位置。一般包含兩個(gè)參數(shù)，分別表示水平位置坐標(biāo)與豎直位置坐標(biāo)，可以使用數(shù)值、百分比或關(guān)鍵字，關(guān)鍵字包括left（左邊線）、right（右邊線）、center（中心）、top（上邊線）和bottom（下邊線）。設(shè)置一個(gè)參數(shù)時(shí)默認(rèn)第二個(gè)參數(shù)為center，百分比為50%。需要注意的是，position需位于shape和size之后，并在參數(shù)前加一個(gè)at。color1，color2與線性漸變中的設(shè)置方法相同?！窘處煛垦菔尽纠?-18】操作流程，實(shí)現(xiàn)圖3-20的效果分別設(shè)置圓形與橢圓形的徑向漸變效果，頁(yè)面效果如圖3-20所示。圖3-20圓形與橢圓形徑向漸變的設(shè)置效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，分別為兩個(gè)div元素設(shè)置圓形與橢圓形的徑向漸變效果。<style> div{width:500px;height:200px;margin:10px;float:left;}/*設(shè)置div元素的寬度、高度與外邊距，并向左浮動(dòng)*/ div.d1{ background:radial-gradient(circle8em,#ffff7f,#7c4b4c);}/*設(shè)置第一個(gè)div元素的圓形徑向漸變背景*/ div.d2{background: radial-gradient(ellipse15em8em,#ffff7f,#7c4b4c);}/*設(shè)置第二個(gè)div元素的橢圓形徑向漸變背景*/</style>……<body> <divclass="d1"></div> <divclass="d2"></div></body>【學(xué)生】聆聽(tīng)、思考、記錄不理解的問(wèn)題，向老師提問(wèn)【教師】巡視課堂，解答學(xué)生疑惑通過(guò)講解知識(shí)點(diǎn)，讓學(xué)生知道CSS3中圖文混排和漸變樣式的使用小組活動(dòng)

（15min）【教師】組織小組活動(dòng)以小組為單位進(jìn)行活動(dòng)，完成美化“圖書(shū)簡(jiǎn)介”頁(yè)面的圖像、視頻與背景的任務(wù)【教師】多媒體給出部分代碼提示在樣式文檔中的body{…}內(nèi)添加以下代碼，為頁(yè)面設(shè)置背景顏色background:#e5ede2;繼續(xù)在樣式文檔中的div.b_photo{…}內(nèi)添加以下代碼，設(shè)置圖像的樣式div.b_photo{float:l

溫馨提示

  • 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ù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 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)論