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

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

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

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

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

6、3中，圖像相對于列表項內(nèi)容的放置位置可以使用list-style-position屬性進行控制，格式如下：list-style-position:outside|inside;list-style-position屬性值如表所示。屬性值說 明outside列表項目標記放置在文本以外，且環(huán)繞文本不根據(jù)標記對齊inside列表項目標記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標記對齊CSS 3美化項目列表2.制作圖片列表【例8-5】制作圖片列表實例，代碼如下所示（示例文件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美化項目列表2.制作圖片列表【例8-5】制作圖片列表實例，代碼如下所示（示例文件8-5.html）。圖片列表政府工作報告再提人工智能解

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

9、ist-style:style; 其中style可以為如表所示屬性值的字符串（最多可以有三個，任意次序）。屬性值說 明類型list-style-type屬性使用的類型值的任意范圍圖像list-style-position屬性使用的圖像值的任意范圍位置list-style-position屬性使用的位置值的任意范圍CSS 3美化項目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實例，代碼如下所示（示例文件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美化項目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實例，代碼如下所示（示例文件8-6.html）。列表的復(fù)合屬性政府工作報告再提人工智能解答“四問”谷歌發(fā)布全球首個72量子比特通用量子計算機2018家博會開展在即格力將重磅發(fā)布全球首款“4D吃糖”設(shè)備今年華為會發(fā)布新款智能手表CSS 3美化項目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實例，代碼如下所示（示例文件8-6.html）。在chrome瀏覽器中預(yù)覽作業(yè)一、選擇題1.有序列表和無序列表的列表項符號都是使用_屬性來定義的。A list B style C type D size2._屬性用來定義有序或無序列表項標志的圖像。A list-style B li