《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第8課 使用CSS3美化列表_第1頁(yè)
《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第8課 使用CSS3美化列表_第2頁(yè)
《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第8課 使用CSS3美化列表_第3頁(yè)
《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第8課 使用CSS3美化列表_第4頁(yè)
《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第8課 使用CSS3美化列表_第5頁(yè)
已閱讀5頁(yè)，還剩8頁(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美化列表的基基本本PAGE12821821使用CSS3美化列表第821使用CSS3美化列表第課PAGE138212使用CSS3美化列表第8212使用CSS3美化列表第課PAGE1

課題使用CSS3美化列表課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）學(xué)習(xí)使用CSS3設(shè)置列表項(xiàng)目符號(hào)（2）掌握使用CSS3制作導(dǎo)航條、圖文列表、排行榜的方法思政育人目標(biāo)：（1）培養(yǎng)學(xué)生嚴(yán)謹(jǐn)、細(xì)心的工作態(tài)度（2）在學(xué)習(xí)中開(kāi)拓自己的眼界，提升自己的辯證思維能力教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：CSS3設(shè)置列表項(xiàng)目符號(hào)和制作導(dǎo)航條等的操作方法教學(xué)難點(diǎn)：熟練操作CSS3制作導(dǎo)航條、圖文列表、排行榜教學(xué)方法講授法、啟發(fā)法、問(wèn)答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：考勤（2min）→導(dǎo)入新知（4min）→知識(shí)講解（24min）→知識(shí)競(jìng)賽（15min）第2節(jié)課：案例分析（4min）→知識(shí)講解（20min）→課堂練習(xí)（12min）→課堂小結(jié)（7min）→作業(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在美化列表上的優(yōu)勢(shì)，引出新知識(shí)點(diǎn)只使用HTML5制作的列表比較簡(jiǎn)單，想要制作圖文列表、排行榜等比較美觀、實(shí)用的效果就要用到CSS3，CSS3提供了大量處理列表的標(biāo)簽，豐富了列表美化的操作【學(xué)生】聆聽(tīng)、思考【教師】提出問(wèn)題同學(xué)們對(duì)CSS3美化列表的方法了解多少呢？自己常用的，最常見(jiàn)的美化列表的方法是哪個(gè)呢？【學(xué)生】思考、討論、發(fā)言通過(guò)問(wèn)答的方式，介紹CSS3美化列表的方法，引出本節(jié)課的內(nèi)容知識(shí)講解

（24min）【教師】講述設(shè)置項(xiàng)目符號(hào)1．項(xiàng)目符號(hào)類(lèi)型在CSS3中，使用list-style-type屬性設(shè)置列表項(xiàng)的符號(hào)類(lèi)型，其屬性值及說(shuō)明如表4-1所示。表4-1list-style-type的屬性值及說(shuō)明屬性值說(shuō)明屬性值說(shuō)明none不使用項(xiàng)目符號(hào)lower-alpha小寫(xiě)英文字母disc實(shí)心圓（默認(rèn)值）upper-alpha大寫(xiě)英文字母circle空心圓lower-roman小寫(xiě)羅馬數(shù)字square實(shí)心方塊upper-roman大寫(xiě)羅馬數(shù)字decimal阿拉伯?dāng)?shù)字hiragana日文平假名cjk-ideographic中文數(shù)字katakana日文片假名【教師】演示【例4-7】操作流程，實(shí)現(xiàn)圖4-9的效果設(shè)置列表項(xiàng)的項(xiàng)目符號(hào)，頁(yè)面效果如圖4-9所示。圖4-9列表項(xiàng)項(xiàng)目符號(hào)的設(shè)置效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建商品分類(lèi)導(dǎo)航列表的結(jié)構(gòu)。<ulclass="t1"> <li>家用電器 <ulclass="t2"> <li>電視 <ulclass="t3"> <li>超薄電視</li> <li>全面屏電視</li> <li>智能電視</li> </ul> </li> <li>空調(diào) <ulclass="t3"> <li>空調(diào)掛機(jī)</li> <li>空調(diào)柜機(jī)</li> </ul> </li> </ul> </li></ul>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置商品分類(lèi)導(dǎo)航列表項(xiàng)的項(xiàng)目符號(hào)，1～3級(jí)列表項(xiàng)的項(xiàng)目符號(hào)分別為實(shí)心方塊、大寫(xiě)英文字母和小寫(xiě)英文字母。.t1{list-style-type:square;}.t2{list-style-type:upper-alpha;}.t3{list-style-type:lower-alpha;}2．自定義項(xiàng)目符號(hào)除了前面給出的預(yù)定義項(xiàng)目符號(hào)之外，在CSS3中還可以使用list-style-image屬性自定義圖像文件為項(xiàng)目符號(hào)，具體格式為：list-style-image:none|url;其中，none是默認(rèn)值，表示沒(méi)有自定義項(xiàng)目符號(hào)；url表示圖像文件的地址。【教師】演示【例4-8】操作流程，實(shí)現(xiàn)圖4-10的效果為列表項(xiàng)設(shè)置自定義項(xiàng)目符號(hào)，頁(yè)面效果如圖4-10所示。圖4-10自定義項(xiàng)目符號(hào)的設(shè)置效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，為例4-1中的列表項(xiàng)設(shè)置自定義項(xiàng)目符號(hào)。<style> .t1{list-style-image:url(images/p1.png);}/*設(shè)置無(wú)序列表的自定義項(xiàng)目符號(hào)*/</style>……<body> <p>商品分類(lèi)</p> <ulclass="t1"> <li>家用電器</li> <li>手機(jī)/數(shù)碼</li> <li>家具/家居/家裝/廚具</li> <li>男裝/女裝/童裝</li> <li>美妝/清潔</li> </ul></body>3．項(xiàng)目符號(hào)位置在CSS3中，使用list-style-position屬性設(shè)置項(xiàng)目符號(hào)的位置，具體格式為：list-style-position:outside|inside;其中，outside是默認(rèn)值，表示項(xiàng)目符號(hào)在列表項(xiàng)左側(cè)；inside表示項(xiàng)目符號(hào)在列表項(xiàng)之內(nèi)?！緦W(xué)生】聆聽(tīng)、思考【教師】演示【例4-9】操作流程，實(shí)現(xiàn)圖4-11的效果設(shè)置列表項(xiàng)項(xiàng)目符號(hào)的位置，頁(yè)面效果如圖4-11所示圖4-11項(xiàng)目符號(hào)位置的設(shè)置效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，設(shè)置嵌套列表項(xiàng)項(xiàng)目符號(hào)的位置。<style> .t1{list-style-position:inside;}/*設(shè)置項(xiàng)目符號(hào)顯示在列表項(xiàng)之內(nèi)*/</style>……<body> <ol> <li>列表 <ol> <li>無(wú)序列表</li> <liclass="t1">有序列表</li> <liclass="t1">自定義列表</li> </ol> </li> </ol></body>【學(xué)生】跟教師一起編寫(xiě)代碼【教師】巡視課堂，指導(dǎo)學(xué)生完成代碼編寫(xiě)【教師】講述使用列表制作水平導(dǎo)航條使用display屬性可以改變?cè)氐娘@示方式。具體格式為：display:none|inline|block|inline-block|list-item;其中，none表示不顯示該元素；inline是默認(rèn)值，表示將該元素轉(zhuǎn)換為行內(nèi)元素；block表示將該元素轉(zhuǎn)換為塊級(jí)元素；inline-block表示將該元素轉(zhuǎn)換為行內(nèi)塊元素；list-item表示將該元素轉(zhuǎn)換為列表塊元素?！窘處煛垦菔尽纠?-10】操作流程，實(shí)現(xiàn)圖4-12的效果設(shè)置列表項(xiàng)的顯示方式使其水平顯示，頁(yè)面效果如圖4-12所示。圖4-12列表項(xiàng)水平顯示的頁(yè)面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，將列表項(xiàng)轉(zhuǎn)換為行內(nèi)元素，使其水平顯示。<style> li{display:inline;padding:10px;}/*將列表項(xiàng)轉(zhuǎn)換為行內(nèi)元素，并設(shè)置其內(nèi)邊距*/</style>……<body> <p>商品分類(lèi)</p> <ul> <li>家用電器</li> <li>手機(jī)/數(shù)碼</li> <li>家具/家居/家裝/廚具</li> <li>男裝/女裝/童裝</li> <li>美妝/清潔</li> </ul></body>【教師】演示【例4-11】操作流程，實(shí)現(xiàn)圖4-12的效果制作購(gòu)物網(wǎng)站的水平導(dǎo)航條，頁(yè)面效果如圖4-13所示。圖4-13購(gòu)物網(wǎng)站水平導(dǎo)航條的頁(yè)面效果【學(xué)生】聆聽(tīng)、思考、記錄通過(guò)講解知識(shí)點(diǎn)，讓學(xué)生進(jìn)一步了解使用CSS3美化列表的操作知識(shí)競(jìng)賽

（15min）【教師】開(kāi)展知識(shí)競(jìng)賽1.設(shè)置知識(shí)競(jìng)賽內(nèi)容編程題在水平導(dǎo)航條的基礎(chǔ)上實(shí)現(xiàn)項(xiàng)目符號(hào)2.講解知識(shí)競(jìng)賽規(guī)則3.統(tǒng)計(jì)小組得分【學(xué)生】參加知識(shí)競(jìng)賽【教師】公布小組得分，安排優(yōu)秀小組分享心得【學(xué)生】講述比賽心得通過(guò)知識(shí)競(jìng)賽的方式，提高學(xué)生的積極性，鞏固這節(jié)課的知識(shí)點(diǎn)第二節(jié)課案例分析

（4min）【教師】講述CSS3美化列表方法，在日常生活中的使用案例，引出本節(jié)課內(nèi)容在日常生活中，我們經(jīng)常需要對(duì)圖文進(jìn)行美化，包括列表中圖片和文字的擺放位置、圖片是否設(shè)置為動(dòng)態(tài)、文字格式的調(diào)整，使其美觀、整潔，這樣才能吸引讀者，獲得高效的效果。所以學(xué)習(xí)CSS3美化列表的功能是非常有必要的【學(xué)生】聆聽(tīng)、思考、理解通過(guò)對(duì)CSS3美化列表在生活中應(yīng)用的講解，讓學(xué)生了解學(xué)習(xí)CSS3美化列表的必要性知識(shí)講解

（20min）【教師】講述制作圖文列表圖文列表就是列表項(xiàng)中同時(shí)包含圖像與文本的列表，可以簡(jiǎn)單理解為圖像列表信息附帶簡(jiǎn)短的文字說(shuō)明【教師】演示【例4-12】操作流程，實(shí)現(xiàn)圖4-14的效果制作“菜品欣賞”圖文列表，頁(yè)面效果如圖4-14所示。圖4-14“菜品欣賞”圖文列表的頁(yè)面效果（1）創(chuàng)建“food.html”文檔，在<body>標(biāo)簽中輸入以下代碼，添加一個(gè)基本的圖文列表，此時(shí)頁(yè)面效果（瀏覽器顯示比例縮?。┤鐖D4-15所示。<divclass="d1"> <h1>湖北菜</h1> <ulclass="food"> <li><imgsrc="images/鮑汁扒時(shí)蔬.jpg"/><span>鮑汁扒時(shí)蔬</span></li> <li><imgsrc="images/潮州牛肉丸.jpg"/><span>潮州牛肉丸</span></li> <li><imgsrc="images/醋熘山藥.jpg"/><span>醋熘山藥</span></li> <li><imgsrc="images/鵝肝醬燒絲瓜.jpg"/><span>鵝肝醬燒絲瓜</span></li> <li><imgsrc="images/翡翠藕盒.jpg"/><span>翡翠藕盒</span></li> <li><imgsrc="images/風(fēng)味香辣蝦.jpg"/><span>風(fēng)味香辣蝦</span></li> </ul></div>圖4-15圖文列表設(shè)置樣式前的頁(yè)面效果（2）在頭部標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，對(duì)圖像與文本進(jìn)行排版，頁(yè)面效果如圖4-16所示。.d1{width:1354px;height:296px;} /*設(shè)置div元素的寬度與高度*/h1{text-align:center;} /*標(biāo)題文本居中對(duì)齊*/img{width:200px;height:150px;display:block;}/*設(shè)置圖像的寬度與高度，并將其轉(zhuǎn)換為塊級(jí)元素*/li{display:inline;float:left;padding:5px;margin:5px5px-2px5px;text-align:center;}/*將列表項(xiàng)轉(zhuǎn)換為行內(nèi)元素，向左浮動(dòng)，添加內(nèi)邊距與外邊距，文本居中對(duì)齊*/span{display:block;padding-top:10px;font-weight:bold;font-size:1.5em;color:#48486b;text-align:center;}/*將span元素轉(zhuǎn)換為塊級(jí)元素，并添加內(nèi)邊距，設(shè)置文本字體加粗，字號(hào)為默認(rèn)值的1.5倍，更改文本顏色，文本居中對(duì)齊*/.food{overflow:hidden;padding-left:0px;}/*設(shè)置列表隱藏溢出部分，去除左側(cè)內(nèi)邊距*/圖4-16圖文列表排版后的頁(yè)面效果（3）繼續(xù)在.d1{…}中添加以下代碼，設(shè)置整個(gè)列表的樣式。border:#48486B2pxdashed;border-radius:10px;background-color:#fffee7;/*設(shè)置整個(gè)列表的邊框、圓角與背景顏色*/（4）繼續(xù)在img{…}中添加以下代碼，設(shè)置圖像樣式。border:solid#e4e8ff2px;border-radius:10px60px;/*設(shè)置圖像的邊框、圓角*/（5）繼續(xù)在li{…}中添加以下代碼，設(shè)置列表項(xiàng)的樣式。border:#48486bdashed2px;border-radius:10px10px00;/*設(shè)置列表項(xiàng)的邊框、圓角*/（6）繼續(xù)在<style>標(biāo)簽中添加以下代碼，修改第一個(gè)與最后一個(gè)列表項(xiàng)的邊框和圓角，并添加鼠標(biāo)指針移至圖像上時(shí)的半透明效果。li:first-child{border-radius:010px010px;margin-left:-2px;}li:last-child{border-radius:10px010px0;margin-right:-2px;}img:hover{opacity:0.6;}【學(xué)生】聆聽(tīng)、思考、理解【教師】詢問(wèn)學(xué)生是否有不理解的地方【學(xué)生】提出問(wèn)題，尋求解答【教師】回答學(xué)生提問(wèn)【教師】講述使用列表制作排行榜（詳見(jiàn)教材）很多音樂(lè)網(wǎng)站上都設(shè)有排行榜欄目，通過(guò)它可以快速找到某個(gè)分類(lèi)下熱度靠前的歌曲，下面通過(guò)制作經(jīng)典老歌排行榜，了解這類(lèi)版塊的設(shè)置方法?！窘處煛垦菔尽纠?-13】操作流程（1）創(chuàng)建“music.html”文檔，在<body>標(biāo)簽中輸入以下代碼，在頁(yè)面中添加一個(gè)無(wú)序列表，此時(shí)的頁(yè)面效果如圖4-18所示。<divclass="d1"> <p>經(jīng)典老歌</p> <olclass="music"> <li><strong>挪威的森林</strong><span>伍佰</span>

<em>……在線試聽(tīng)</em></li> <li><strong>千千闕歌</strong><span>陳慧嫻</span>

<em>……在線試聽(tīng)</em></li> <li><strong>走過(guò)咖啡屋</strong><span>千百惠</span>

<em>……在線試聽(tīng)</em></li> <li><strong>追夢(mèng)人</strong><span>鳳飛飛</span>

<em>……在線試聽(tīng)</em></li> <li><strong>餓狼傳說(shuō)</strong><span>張學(xué)友</span>

<em>……在線試聽(tīng)</em></li> <li><strong>雨一直下</strong><span>張宇</span>

<em>……在線試聽(tīng)</em></li> <li><strong>愛(ài)如潮水</strong><span>張信哲</span>

<em>……在線試聽(tīng)</em></li> <li><strong>朋友</strong><span>周華健</span>

<em>……在線試聽(tīng)</em></li> <li><strong>大海</strong><span>張雨生</span>

<em>……在線試聽(tīng)</em></li> <li><strong>我可以抱你嗎</strong><span>張惠妹</span>

<em>……在線試聽(tīng)</em></li> </ol></div>圖4-18無(wú)序列表的頁(yè)面效果（2）在頭部標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置列表樣式。.d1{width:300px;height:380px;border:solid#758898;}/*設(shè)置div元素的寬度、高度與邊框*/font-size:1.5em;text-indent:1em;border-bottom:#758898dotted2px;}/*設(shè)置p元素的內(nèi)外邊距、背景顏色與文本顏色，字號(hào)為默認(rèn)值的1.5倍，添加1字符的縮進(jìn)與底邊邊框*/.music{padding:10px;margin:0px0px0px20px;}/*設(shè)置有序列表的內(nèi)外邊距*/li{margin-top:10px;}/*設(shè)置列表項(xiàng)的上外邊距*/lispan{margin-left:10px;color:#9e9e9e;font-style:italic;}/*設(shè)置歌手名的左外邊距與字體顏色，添加斜體效果*/strong:hover{color:#585858;text-decoration:underline;}/*設(shè)置文本顏色，添加下劃線效果*/em{font-size:0.9em;float:right;text-decoration:underline;}/*設(shè)置em元素的字號(hào)為默認(rèn)值的0.9倍，向右浮動(dòng)，添加下劃線效果*/【學(xué)生】聆聽(tīng)、思考、理解【教師】巡視課堂，督促學(xué)生學(xué)習(xí)【學(xué)生】記錄操作要點(diǎn)，鞏固課堂內(nèi)容通過(guò)講解知識(shí)點(diǎn)，讓學(xué)生進(jìn)一步了解CSS3美化表列表的實(shí)際應(yīng)用，熟悉CSS3語(yǔ)言的編寫(xiě)課堂練習(xí)

（12min）【教師】布置課堂練習(xí)內(nèi)容美化“網(wǎng)上書(shū)店”頁(yè)面的導(dǎo)航條本任務(wù)實(shí)施對(duì)“網(wǎng)上書(shū)店”頁(yè)面中的導(dǎo)航條進(jìn)行美化，進(jìn)一步鞏固使用列表制作導(dǎo)航條的方法【教師】演示重點(diǎn)操作流程在樣式文檔中添加以下代碼，設(shè)置整體樣式body,nav,ul{margin:0;padding:0;}/*去除body、nav、ul元素的內(nèi)外邊距*/body{background:#e5ede2;} /*設(shè)置頁(yè)面背景顏色*/nav{height:50px;background-color:#9194B5;}/*設(shè)置nav元素的高度為50px，背景顏色為紫色*/.menu{height:50px;width:900px;margin:0auto;}/*設(shè)置導(dǎo)航條的高度為50px，寬度為900px，上下外邊距為0px，左右外邊距根據(jù)瀏覽器窗口大小自動(dòng)調(diào)節(jié)*/繼續(xù)在樣式文檔中的ulli{…}內(nèi)添加以下代碼，設(shè)置列表項(xiàng)

溫馨提示

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