列表与超链接-课件.pptx

1、第五章 列表与超链接无序、有序及定义列表的使用CSS伪类超链接标记的使用5.25.2【案例12】：二维码名片5.15.1【案例11】：精美电商悬浮框5.35.3【案例13】：电商团购悬浮框目录5.45.4【案例14】：唱吧导航栏5.1【案例11】精美电商悬浮框在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类，这样即可以方便消费者搜索商品，也可以使网页结构变得清晰美观。本节将运用无序列表制作一款精美的电商“悬浮框”，如下图所示。案例引入5.1【案例11】知识引入1 1无序列表无序列表2 2有序列表有序列表知识引入5.1【案例11】知识点讲解无序列表是网页中最常用的列表，之所

2、以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。定义无序列表的基本语法格式如下：1、无序列表无序列表 列表项1 列表项2 列表项3.5.1【案例11】知识点讲解值得一提的是，和都拥有type属性，用于指定列表项目符号。在无序列表中type属性的常用值有三个，它们呈现的效果不同，具体如下表所示。1、无序列表无序列表type属性值属性值显示效果显示效果disc（默认值）（默认值）circlesquare5.1【案例11】知识点讲解有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基

3、本语法格式如下：2、有、有序列序列表表 列表项1 列表项2 列表项3.5.1【案例11】知识点讲解在有序列表中，除了type属性之外，还可以为定义start属性、为定义value属性，它们决定有序列表的项目符号，其取值和含义如下表所示。2、有、有序列序列表表属性属性属性值属性值描述描述type1（默认）项目符号显示为数字1 2 3a或A项目符号显示为英文字母a b c d或A B Ci或I项目符号显示为罗马数字i ii iii或I II IIIstart数字规定项目符号的起始值value数字规定项目符号的数字5.1【案例11】案例实现5.2【案例12】二维码名片二维码名片的出现，简化了繁琐的信

4、息录入方式，轻轻一扫，就可读取内部包涵的文字和图片信息，极大地提高了信息的存取速度。本节将运用定义列表制作一款时尚潮流的“二维码名片”，如下图所示。案例引入5.2【案例12】知识引入1 1定义列表定义列表2 2定义列表实现图文混排定义列表实现图文混排3 3列表嵌套列表嵌套知识引入5.2【案例12】知识点讲解定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下：1、定义列表定义列表 名词1 名词1解释1 名词1解释2 .名词2 名词2解释1 名词2解释2 .5.2【案例12】知识点讲解在网页设计中，定义列表常用于实现图文混排效果，其中

5、标记中插入图片，标记中放入对图片解释说明的文字。如下图所示的“讲师简介”模块就可以通过定义列表来实现。2、定义列表实现图文混排定义列表实现图文混排5.2【案例12】知识点讲解在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。3、列表嵌套列表嵌套5.2【案例12】案例实现5.3【案例13】知识点讲解同盒子模型的边框等属性一样，CSS中的列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style

6、属性综合设置列表样式的语法格式如下：1、list-style复合属性复合属性list-style:列表项目符号 列表项目符号的位置 列表项目图像;5.3【案例13】知识点讲解由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为设置背景图像的方式实现列表项目图像。下面对背景属性定义列表项目符号的方法做具体演示。2、背景图像定义列表项目符号背景图像定义列表项目符号5.3【案例13】案例实现5.4【案例14】唱吧导航栏浏览网站时，通过导航栏可以让访问者迅速找到所需要的资源区域，本节将运用列表和超链接的相关知识制作一款“唱吧导航栏”，其效果如下图（上）所示。当鼠标移上每个歌曲分类时，其背景

7、颜色和背景图像都发生变化，如下图（下）所示。案例引入（上）（下）5.4【案例14】知识引入1 1超链接标记超链接标记2 2清除超链接图像的边框清除超链接图像的边框知识引入3 3链接伪类链接伪类4 4锚点链接锚点链接5.4【案例14】知识点讲解一个网站通常由多个页面构成，进入网站时首先看到的是其首页，如果想从首页跳转到其子页面，就需要在首页相应的位置添加超链接。在HTML中创建超链接非常简单，只需用标记环绕需要被链接的对象即可。创建超链接的基本语法格式如下：1、超链接标记超链接标记文本或图像5.4【案例14】知识点讲解标记是一个行内标记，用于定义超链接，href和target为其常用属性，下面对

8、它们进行具体地解释。href：用于指定链接目标的url地址，当为标记应用href属性时，它就具有了超链接的功能。target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。1、超链接标记超链接标记5.4【案例14】知识点讲解创建图像超链接时，在某些浏览器中，图像会自动添加边框效果，如下图所示。2、清除超链接图像的边框清除超链接图像的边框5.4【案例14】知识点讲解为了不影响页面的美观，通常需要清除超链接图像的边框，使图像正常显示。去掉链接图像的边框很简单，只需将图像的边框定义为0即可，具体示例代码如下

9、：这时保存HTML文件，刷新页面，效果如下图所示，链接图像的边框消失了。2、清除超链接图像的边框清除超链接图像的边框5.4【案例14】知识点讲解在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。超链接标记的伪类有4种，具体如下表所示。3、链接链接伪类伪类超链接标记超链接标记的伪类的伪类含义含义a:linkCSS样式规则样式规则;未访问时超链接的状态a:visitedCSS样式规则样式规则;访问后超链接的状态a:hoverCSS样式规则样式规则;鼠标经过、悬停时超链接的状态a:activeCSS样式规则样式规则;鼠标点击不动时超链接的状态5.4【案例14】知识点讲解浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。下面对创建锚点链接的方法做具体演示。4、锚点链接锚点链接5.4【案例14】案例实现PPT模板下载： You!