（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八-2電子課件

1、YCF正版可修改PPT（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八-2電子課件CSS 3創(chuàng)建網(wǎng)頁(yè)菜單項(xiàng)目八授課教師：姓名WEB前端設(shè)計(jì)基礎(chǔ)Contents1.項(xiàng)目描述2.知識(shí)準(zhǔn)備3.項(xiàng)目實(shí)施4.項(xiàng)目拓展5.項(xiàng)目小結(jié)6.技能訓(xùn)練二 知識(shí)準(zhǔn)備CSS 3美化超鏈接；CSS 3美化項(xiàng)目列表。CSS 3美化項(xiàng)目列表1.美化無(wú)序列表和有序列表在以前的項(xiàng)目學(xué)習(xí)中，有序列表和無(wú)序列表的列表項(xiàng)符號(hào)都是使用type屬性來(lái)定義的，type屬性值可以為“disc（默認(rèn)值是實(shí)心圓）”、“circle（空心圓）”和“square（實(shí)心正方形）”，這是在標(biāo)簽屬性中定義的。在CSS 3中，不管是有序列表還是無(wú)序列表，都使用list-s

2、tyle-type屬性來(lái)定義列表符號(hào)，格式如下：list-style-type:屬性值;list-style-type屬性值如表所示。list-style-type屬性值說(shuō) 明disc默認(rèn)值，實(shí)心圓“”circle空心圓“”square實(shí)心正方形“”none不使用任何符號(hào)list-style-type屬性值說(shuō)明decimal默認(rèn)值，數(shù)字1、2、3lower-roman小寫羅馬數(shù)字i、ii、iiiupper-roman大寫羅馬數(shù)字I、II、IIIlower-alpha小寫英文字母a、b、cupper-alpha大寫英文字母A、B、Cnone不使用任何符號(hào)CSS 3美化項(xiàng)目列表1.美化無(wú)序列表和有

3、序列表【例8-4】美化無(wú)序列表和有序列表實(shí)例，代碼如下所示（示例文件8-4.html）。*margin:0px;padding:0px;font-family: 微軟雅黑;font-size:12px;.big01,.big02width:320px;border:1px red dashed;margin:10px 0 0 10px;pmargin:3px 0 0 5px;color:3ef;font-size: 14px;.big01 ulmargin-left:40px; list-style-type: disc;liline-height: 20px;.big02 olmargin-

4、left:40px;CSS 3美化項(xiàng)目列表1.美化無(wú)序列表和有序列表【例8-4】美化無(wú)序列表和有序列表實(shí)例，代碼如下所示（示例文件8-4.html）。無(wú)序列表政府工作報(bào)告再提人工智能解答“四問(wèn)”谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)2018家博會(huì)格力將重磅發(fā)布節(jié)能“黑科技.全球首款“4D吃糖”設(shè)備：橋本環(huán)奈喂你吃糖華為CEO透露:今年華為會(huì)發(fā)布新款智能手表有序列表政府工作報(bào)告再提人工智能解答“四問(wèn)”谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)2018家博會(huì)格力將重磅發(fā)布節(jié)能“黑科技.全球首款“4D吃糖”設(shè)備：橋本環(huán)奈喂你吃糖華為CEO透露:今年華為會(huì)發(fā)布新款智能手表 CSS 3美化項(xiàng)目列表1

5、.美化無(wú)序列表和有序列表【例8-4】美化無(wú)序列表和有序列表實(shí)例，代碼如下所示（示例文件8-4.html）。在chrome瀏覽器中預(yù)覽CSS 3美化項(xiàng)目列表2.制作圖片列表在CSS 3中l(wèi)ist-style-image屬性用來(lái)定義有序或無(wú)序列表項(xiàng)標(biāo)志的圖像，可以將項(xiàng)目符號(hào)替換成任意的圖像，格式如下：list-style-image: none | url;list-style-image屬性值如表所示。list-style-image屬性值說(shuō) 明none不指定圖像url使用絕對(duì)路徑或相對(duì)路徑指定圖像CSS 3美化項(xiàng)目列表2.制作圖片列表使用圖像作為項(xiàng)目符號(hào)時(shí)，圖像通常顯示在列表的外部，在CSS

6、3中，圖像相對(duì)于列表項(xiàng)內(nèi)容的放置位置可以使用list-style-position屬性進(jìn)行控制，格式如下：list-style-position:outside|inside;list-style-position屬性值如表所示。屬性值說(shuō) 明outside列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊inside列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊CSS 3美化項(xiàng)目列表2.制作圖片列表【例8-5】制作圖片列表實(shí)例，代碼如下所示（示例文件8-5.html）。*margin:0px;padding:0px;font-family: 微軟雅黑;font-size:12px;.bi

7、g01width:320px;border:1px red dashed;margin:10px 0 0 10px;pmargin:3px 0 0 5px;color:3ef;font-size: 14px;.big01 ulmargin-left:40px;liline-height: 20px;list-style-image: url(images/arrow_right.png);.poslist-style-position: inside;CSS 3美化項(xiàng)目列表2.制作圖片列表【例8-5】制作圖片列表實(shí)例，代碼如下所示（示例文件8-5.html）。圖片列表政府工作報(bào)告再提人工智能解

8、答“四問(wèn)”谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)2018家博會(huì)開展在即 格力將重磅發(fā)布節(jié)能全球首款“4D吃糖”設(shè)備今年華為會(huì)發(fā)布新款智能手表CSS 3美化項(xiàng)目列表2.制作圖片列表【例8-5】制作圖片列表實(shí)例，代碼如下所示（示例文件8-5.html）。在chrome瀏覽器中預(yù)覽CSS 3美化項(xiàng)目列表3.列表的復(fù)合屬性上面已經(jīng)學(xué)習(xí)了使用list-style-type定義列表的項(xiàng)目符號(hào)、使用list-style-image定義列表的圖片符號(hào)和使用list-style-position定義圖片的顯示位置，其實(shí)在對(duì)項(xiàng)目列表進(jìn)行操作時(shí)，可以直接使用一個(gè)復(fù)合屬性list-style來(lái)定義，格式如下： l

9、ist-style:style; 其中style可以為如表所示屬性值的字符串（最多可以有三個(gè)，任意次序）。屬性值說(shuō) 明類型list-style-type屬性使用的類型值的任意范圍圖像list-style-position屬性使用的圖像值的任意范圍位置list-style-position屬性使用的位置值的任意范圍CSS 3美化項(xiàng)目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實(shí)例，代碼如下所示（示例文件8-6.html）。*margin:0px;padding:0px;font-family: 微軟雅黑;font-size:12px;.big01width:320px;border:1px

10、red dashed;margin:10px 0 0 10px;pmargin:3px 0 0 5px;color:3ef;font-size: 14px;.big01 ulmargin-left:40px;liline-height: 20px;list-style: none;.poslist-style:inside url(images/arrow_right.png);CSS 3美化項(xiàng)目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實(shí)例，代碼如下所示（示例文件8-6.html）。列表的復(fù)合屬性政府工作報(bào)告再提人工智能解答“四問(wèn)”谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)2018家博會(huì)開展在即格力將重磅發(fā)布全球首款“4D吃糖”設(shè)備今年華為會(huì)發(fā)布新款智能手表CSS 3美化項(xiàng)目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實(shí)例，代碼如下所示（示例文件8-6.html）。在chrome瀏覽器中預(yù)覽作業(yè)一、選擇題1.有序列表和無(wú)序列表的列表項(xiàng)符號(hào)都是使用_屬性來(lái)定義的。A list B style C type D size2._屬性用來(lái)定義有序或無(wú)序列表項(xiàng)標(biāo)志的圖像。A list-style B li