《列表与超链接课件.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】案
6、例实现,5.3【案例13】知识点讲解,同盒子模型的边框等属性一样，CSS中的列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综合设置列表样式的语法格式如下：,1、list-style复合属性,list-style:列表项目符号 列表项目符号的位置 列表项目图像;,5.3【案例13】知识点讲解同盒子模型的边框等属性一样，C,5.3【案例13】知识点讲解,由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为设置背景图像的方式实现列表项目图像。下面对背景属性定义列表项目符号的方法做具体演示。,2、背景图像定义列表项
7、目符号,5.3【案例13】知识点讲解由于列表样式对列表项目图像的控,5.3【案例13】案例实现,5.3【案例13】案例实现,5.4【案例14】唱吧导航栏,浏览网站时，通过导航栏可以让访问者迅速找到所需要的资源区域，本节将运用列表和超链接的相关知识制作一款“唱吧导航栏”，其效果如下图（上）所示。当鼠标移上每个歌曲分类时，其背景颜色和背景图像都发生变化，如下图（下）所示。,案例引入,（上）,（下）,5.4【案例14】唱吧导航栏浏览网站时，通过导航栏可以让访,5.4【案例14】知识引入,知识引入,5.4【案例14】知识引入1超链接标记2清除超链接图,5.4【案例14】知识点讲解,一个网站通常由多个页
8、面构成，进入网站时首先看到的是其首页，如果想从首页跳转到其子页面，就需要在首页相应的位置添加超链接。在HTML中创建超链接非常简单，只需用标记环绕需要被链接的对象即可。创建超链接的基本语法格式如下：,1、超链接标记,文本或图像,5.4【案例14】知识点讲解一个网站通常由多个页面构成，进,5.4【案例14】知识点讲解,标记是一个行内标记，用于定义超链接，href和target为其常用属性，下面对它们进行具体地解释。href：用于指定链接目标的url地址，当为标记应用href属性时，它就具有了超链接的功能。target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_sel
9、f为默认值，意为在原窗口中打开，_blank为在新窗口中打开。,1、超链接标记,5.4【案例14】知识点讲解标记是一个行内标记，用于,5.4【案例14】知识点讲解,创建图像超链接时，在某些浏览器中，图像会自动添加边框效果，如下图所示。,2、清除超链接图像的边框,5.4【案例14】知识点讲解创建图像超链接时，在某些浏览器,5.4【案例14】知识点讲解,为了不影响页面的美观，通常需要清除超链接图像的边框，使图像正常显示。去掉链接图像的边框很简单，只需将图像的边框定义为0即可，具体示例代码如下：这时保存HTML文件，刷新页面，效果如下图所示，链接图像的边框消失了。,2、清除超链接图像的边框,5.4【
10、案例14】知识点讲解为了不影响页面的美观，通常需要,5.4【案例14】知识点讲解,在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。超链接标记的伪类有4种，具体如下表所示。,3、链接伪类,5.4【案例14】知识点讲解在CSS中，通过链接伪类可以实,5.4【案例14】知识点讲解,浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。下面对创建锚点链接的方法做具体演示。,4、锚点链接,5.4【案例14】知识点讲解浏览网站时，为了提高信息的检索,5.4【案例14】案例实现,5.4【案例14】案例实现,Thank You!,Thank You!,
