工信版（中职）Web前端设计基础 项目八-2电子课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2018/7/18,#,YCF,（中职）Web前端设计基础 项目八-2电子课件,CSS 3,创建网页菜单,项目八,授课教师,：,姓名,WEB,前端设计基础,Contents,1.,项目描述,2.,知识,准备,3.,项目实施,4.,项目拓展,5.,项目小结,6.,技能训练,二 知识准备,CSS 3,美化超链接,；,CSS 3,美化项目列表,。,CSS 3,美化项目列表,1.,美化无序列表和有序列表,在以前的项目学习中，有序列表和无序列表的列表项符号都是使用,type,属性来定义的，,type,属性值可以为“,disc,（默认值是实心圆）”、“,circle,（空心圆）”和“,square,（实心正方形）”，这是在标签属性中定义的。在,CSS 3,中，不管是有序列表还是无序列表，都使用,list-style-type,属性来定义列表符号，格式如下：,list-style-type:,属性值,;,list-style-type,属性值如,表所,示。,list-style-type,属性值,说,明,disc,默认值，实心圆“”,circle,空心圆“”,square,实心正方形“”,none,不使用任何符号,list-style-type,属性值,说明,decimal,默认值，数字,1,、,2,、,3,lower-roman,小写罗马数字,i,、,ii,、,iii,upper-roman,大写罗马数字,I,、,II,、,III,lower-alpha,小写英文字母,a,、,b,、,c,upper-alpha,大写英文字母,A,、,B,、,C,none,不使用任何符号,CSS 3,美化项目列表,1.,美化无序列表和有序列表,【,例,8-4】,美化无序列表和有序列表实例，代码如下所示（示例文件,8-4.html,）。,*,margin:0px;padding:0px;font-family:,微软雅黑,;font-size:12px;,.,big01,.big02,width: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-left:40px;,CSS 3,美化项目列表,1.,美化无序列表和有序列表,【,例,8-4】,美化无序列表和有序列表实例，代码如下所示（示例文件,8-4.html,）。,无序列表,政府工作报告再提人工智能解答“四问”,谷歌发布全球首个,72,量子比特通用量子计算机,2018,家博会格力将重磅发布节能“黑科技,.,全球首款“,4D,吃糖”设备：桥本环奈喂你吃糖,华为,CEO,透露,:,今年华为会发布新款智能手表,有序列表,政府工作报告再提人工智能解答“四问”,谷歌发布全球首个,72,量子比特通用量子计算机,2018,家博会格力将重磅发布节能“黑科技,.,全球首款“,4D,吃糖”设备：桥本环奈喂你吃糖,华为,CEO,透露,:,今年华为会发布新款智能手表,CSS 3,美化项目列表,1.,美化无序列表和有序列表,【,例,8-4】,美化无序列表和有序列表实例，代码如下所示（示例文件,8-4.html,）。,在,chrome,浏览器中预览,CSS 3,美化项目列表,2.,制作图片列表,在,CSS 3,中,list-style-image,属性用来定义有序或无序列表项标志的图像，可以将项目符号替换成任意的图像，格式如下：,list-style-image:none|url;,list-style-image,属性,值如,表所,示。,list-style-image,属性值,说,明,none,不指定图像,url,使用绝对路径或相对路径指定图像,CSS 3,美化项目列表,2.,制作图片列表,使用图像作为项目符号时，图像通常显示在列表的外部，在,CSS 3,中，图像相对于列表项内容的放置位置可以使用,list-style-position,属性进行控制，格式如下：,list-style-position:outside|inside;,list-style-position,属性,值如,表所,示。,属性值,说,明,outside,列表项目标记放置在文本以外，且环绕文本不根据标记对齐,inside,列表项目标记放置在文本以内，且环绕文本根据标记对齐,CSS 3,美化项目列表,2.,制作图片列表,【,例,8-5】,制作图片列表实例，代码如下所示（示例文件,8-5.html,）。,*,margin:0px;padding:0px;font-family:,微软雅黑,;font-size:12px;,.,big01,width:320px,;,border:1px,red dashed;,margin:10px,0 0 10px;,pmargin:3px,0 0 5px;color:3ef;font-size:14px;,.,big01 ulmargin-left:40px;,li,line-height,:20px;,list-style-image,:url(images/arrow_right.png);,.,poslist-style-position:inside;,CSS 3,美化项目列表,2.,制作图片列表,【,例,8-5】,制作图片列表实例，代码如下所示（示例文件,8-5.html,）。,图片列表,政府工作报告再提人工智能解答“四问”,谷歌发布全球首个,72,量子比特通用量子计算机,2018,家博会开展在即 格力将重磅发布节能,全球首款“,4D,吃糖”设备,今年华为会发布新款智能手表,CSS 3,美化项目列表,2.,制作图片列表,【,例,8-5】,制作图片列表实例，代码如下所示（示例文件,8-5.html,）。,在,chrome,浏览器中预览,CSS 3,美化项目列表,3.,列表的复合属性,上面已经学习了使用,list-style-type,定义列表的项目符号、使用,list-style-image,定义列表的图片符号和使用,list-style-position,定义图片的显示位置，其实在对项目列表进行操作时，可以直接使用一个复合属性,list-style,来定义，格式如下：,list-style:style;,其中,style,可以为如,表所,示属性值的字符串（最多可以有三个，任意次序）。,属性值,说,明,类型,list-style-type,属性使用的类型值的任意范围,图像,list-style-position,属性使用的图像值的任意范围,位置,list-style-position,属性使用的位置值的任意范围,CSS 3,美化项目列表,3.,列表的复合属性,【,例,8-6】,列表的复合属性实例，代码如下所示（示例文件,8-6.html,）。,*,margin:0px;padding:0px;font-family:,微软雅黑,;font-size:12px;,.,big01,width: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:none;,.,poslist-style:inside url(images/arrow_right.png);,CSS 3,美化项目列表,3.,列表的复合属性,【,例,8-6】,列表的复合属性实例，代码如下所示（示例文件,8-6.html,）。,列表的复合属性,政府工作报告再提人工智能解答“四问”,谷歌发布全球首个,72,量子比特通用量子计算机,2018,家博会开展在即格力将重磅发布,全球首款“,4D,吃糖”设备,今年华为会发布新款智能手表,CSS 3,美化项目列表,3.,列表的复合属性,【,例,8-6】,列表的复合属性实例，代码如下所示（示例文件,8-6.html,）。,在,chrome,浏览器中预览,作业,一、选择题,1.,有序列表和无序列表的列表项符号都是,使用,_,属性,来定义,的。,A list B style C,type D size,2._,属性用来定义有序或无序列表项标志的图像。,A list-style B list-style-image C list-style-type D list-style-position,3.,列表的复合属性用,_,来定义。,A list-style B list-style-image C list-style-type D,list-style-position,二、上机实训,上机完成例,8-4,和例,8-6,的实例操作。,End,