列表与超链接课件.pptx
《列表与超链接课件.pptx》由会员分享,可在线阅读,更多相关《列表与超链接课件.pptx(28页珍藏版)》请在三一办公上搜索。
1、第五章 列表与超链接,无序、有序及定义列表的使用CSS伪类,超链接标记的使用,第五章 列表与超链接无序、有序及定义列表的使用超链接标记的,目录,5.2【案例12】:二维码名片5.1【案例11】:精美电商悬,5.1【案例11】精美电商悬浮框,在制作电商网站时,通常需要使用一些精美的悬浮框对商品信息进行简单的分类,这样即可以方便消费者搜索商品,也可以使网页结构变得清晰美观。本节将运用无序列表制作一款精美的电商“悬浮框”,如下图所示。,案例引入,5.1【案例11】精美电商悬浮框在制作电商网站时,通常需要,5.1【案例11】知识引入,知识引入,5.1【案例11】知识引入1无序列表2有序列表知识引入,5
2、.1【案例11】知识点讲解,无序列表是网页中最常用的列表,之所以称为“无序列表”,是因为其各个列表项之间为并列关系,没有顺序级别之分。定义无序列表的基本语法格式如下:,1、无序列表,列表项1 列表项2 列表项3.,5.1【案例11】知识点讲解无序列表是网页中最常用的列表,,5.1【案例11】知识点讲解,值得一提的是,和都拥有type属性,用于指定列表项目符号。在无序列表中type属性的常用值有三个,它们呈现的效果不同,具体如下表所示。,1、无序列表,5.1【案例11】知识点讲解值得一提的是,和li,5.1【案例11】知识点讲解,有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列,例
3、如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下:,2、有序列表,列表项1 列表项2 列表项3.,5.1【案例11】知识点讲解有序列表即为有排列顺序的列表,,5.1【案例11】知识点讲解,在有序列表中,除了type属性之外,还可以为定义start属性、为定义value属性,它们决定有序列表的项目符号,其取值和含义如下表所示。,2、有序列表,5.1【案例11】知识点讲解在有序列表中,除了type属性,5.1【案例11】案例实现,5.1【案例11】案例实现,5.2【案例12】二维码名片,二维码名片的出现,简化了繁琐的信息录入方式,轻轻一扫,就可读取内部
4、包涵的文字和图片信息,极大地提高了信息的存取速度。本节将运用定义列表制作一款时尚潮流的“二维码名片”,如下图所示。,案例引入,5.2【案例12】二维码名片二维码名片的出现,简化了繁琐的,5.2【案例12】知识引入,知识引入,5.2【案例12】知识引入1定义列表2定义列表实现图文混排,5.2【案例12】知识点讲解,定义列表常用于对术语或名词进行解释和描述,与无序和有序列表不同,定义列表的列表项前没有任何项目符号。其基本语法如下:,1、定义列表,名词1 名词1解释1 名词1解释2.名词2 名词2解释1 名词2解释2.,5.2【案例12】知识点讲解定义列表常用于对术语或名词进行,5.2【案例12】知
5、识点讲解,在网页设计中,定义列表常用于实现图文混排效果,其中标记中插入图片,标记中放入对图片解释说明的文字。如下图所示的“讲师简介”模块就可以通过定义列表来实现。,2、定义列表实现图文混排,5.2【案例12】知识点讲解在网页设计中,定义列表常用于实,5.2【案例12】知识点讲解,在网上购物商城中浏览商品时,经常会看到某一类商品被分为若干小类,这些小类通常还包含若干的子类,同样,在使用列表时,列表项中也有可能包含若干子列表项,要想在列表项中定义子列表项就需要将列表进行嵌套。,3、列表嵌套,5.2【案例12】知识点讲解在网上购物商城中浏览商品时,经,5.2【案例12】案例实现,5.2【案例12】案
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 列表 超链接 课件
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-2037482.html