列表与超链接.pptx

让IT教学更简单，让IT学习更有效第五章 列表与超链接无序、有序及定义列表的使用CSS伪类超链接标记的使用?目录5.35.15.25.4【案例11】：精美电商悬浮框【案例13】：电商团购悬浮框【案例14】：唱吧导航栏【案例12】：二维码名片5.1 【案例11】精美电商悬浮框在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类，这样即可以方便消费者有哪些信誉好的足球投注网站商品，也可以使网页结构变得清晰美观。本节将运用无序列表制作一款精美的电商“悬浮框”，如下图所示。案例引入5.1 【案例11】知识引入无序列表有序列表21知识引入5.1 【案例11】知识点讲解1、无序列表无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。定义无序列表的基本语法格式如下：ul li列表项1/li li列表项2/li li列表项3/li....../ul5.1 【案例11】知识点讲解1、无序列表值得一提的是，ul和li都拥有type属性，用于指定列表项目符号。在无序列表中type属性的常用值有三个，它们呈现的效果不同，具体如下表所示。type属性值显示效果disc（默认值）●circle○square■5.1 【案例11】知识点讲解2、有序列表有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：ol li列表项1/li li列表项2/li li列表项3/li....../ol5.1 【案例11】知识点讲解2、有序列表在有序列表中，除了type属性之外，还可以为ol定义start属性、为li定义value属性，它们决定有序列表的项目符号，其取值和含义如下表所示。属性属性值描述type?1（默认）项目符号显示为数字1 2 3…a或A项目符号显示为英文字母a b c d…或A B C…i或I项目符号显示为罗马数字i ii iii…或I II III…start数字规定项目符号的起始值value数字规定项目符号的数字5.1 【案例11】案例实现5.2 【案例12】二维码名片二维码名片的出现，简化了繁琐的信息录入方式，轻轻一扫，就可读取内部包涵的文字和图片信息，极大地提高了信息的存取速度。本节将运用定义列表制作一款时尚潮流的“二维码名片”，如下图所示。案例引入5.2 【案例12】知识引入定义列表列表嵌套定义列表实现图文混排321知识引入5.2 【案例12】知识点讲解1、定义列表定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下：dl dt名词1/dt dd名词1解释1/dd dd名词1解释2/dd ... dt名词2/dt dd名词2解释1/dd dd名词2解释2/dd .../dl5.2 【案例12】知识点讲解2、定义列表实现图文混排在网页设计中，定义列表常用于实现图文混排效果，其中dt/dt标记中插入图片，dd/dd标记中放入对图片解释说明的文字。如下图所示的“讲师简介”模块就可以通过定义列表来实现。5.2 【案例12】知识点讲解3、列表嵌套在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。5.2 【案例12】案例实现5.3 【案例13】知识点讲解1、list-style复合属性同盒子模型的边框等属性一样，CSS中的列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综合设置列表样式的语法格式如下：list-style:列表项目符号 列表项目符号的位置 列表项目图像;5.3 【案例13】知识点讲解2、背景图像定义列表项目符号由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为li设置背景图像的方式实现列表项目图像。下面对背景属性定义列表项目符号的方法做具体演示。5.3 【案例13】案例实现5.4 【案例14】唱吧导航栏浏览网站时，通过导航栏可以让访问者迅速找到所需要的资源区域，本节将运用列表和超链接的相关知识制作一款“唱吧导航栏”，其效果如下图（上）所示。当鼠标移上每个歌曲分类时，其背景颜色和背景图像都发生变化，如下图（下）所示。案例引入（上）（下）5.4 【案例14】知识引入超链接标记a链接伪类清除超链接图像的边框锚点链接3421知识引入5.4 【案例14】知识点讲解1、超链接标记a 一个网站通常由多个页面构成，进入网站时首先看到的是其首页，如果想从首页跳转到其子页面，就需要在首页相应的位置添加超链接。在H