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

1、YCF正版可修改PPT（中职）Web前端设计基础 项目八-2电子课件CSS 3创建网页菜单项目八授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备CSS 3美化超链接；CSS 3美化项目列表。CSS 3美化项目列表1.美化无序列表和有序列表在以前的项目学习中，有序列表和无序列表的列表项符号都是使用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默认值，数字1、2、3lower-roman小写罗马数字i、ii、iiiupper-roman大写罗马数字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）。无序列表政府工作报告再提人工智能解答“四问”谷歌发布全球首个72量子比特通用量子计算机2018家博会格力将重磅发布节能“黑科技.全球首款“4D吃糖”设备：桥本环奈喂你吃糖华为CEO透露:今年华为会发布新款智能手表有序列表政府工作报告再提人工智能解答“四问”谷歌发布全球首个72量子比特通用量子计算机2018家博会格力将重磅发布节能“黑科技.全球首款“4D吃糖”设备：桥本环奈喂你吃糖华为CEO透露:今年华为会发布新款智能手表 CSS 3美化项目列表1

5、.美化无序列表和有序列表【例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

6、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;.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、答“四问”谷歌发布全球首个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来定义，格式如下： l

9、ist-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;.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.列表的复合属性【例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 size2._属性用来定义有序或无序列表项标志的图像。A list-style B li