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!