列表与超链接-课件

PPT,模板下载：, 列表与超链接,无序、有序及定义列表的,使用,CSS,伪类,超链接标记的使用,第五章 列表与超链接无序、有序及定义列表的使用超链接标记的,5.2,【,案例,12】,：二维码名片,5.1,【,案例,11】,：精美电商悬浮框,5.3,【,案例,13】,：电商团购悬浮框,目录,5.4,【,案例,14】,：唱吧导航栏,5.2【案例12】：二维码名片5.1【案例11】：精美电商悬,5.1,【,案例,11】,精美电商悬浮框,在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类，这样即可以方便消费者搜索商品，也可以使网页结构变得清晰美观。本节将运用,无序列表,制作一款精美的电商“,悬浮框,”，,如下图所示。,案例引入,5.1 【案例11】精美电商悬浮框在制作电商网站时，通常需要,5.1,【,案例,11】,知识引入,1,无序列表,2,有序列表,知识,引入,5.1 【案例11】知识引入1无序列表2有序列表知识引入,5.1,【,案例,11】,知识点讲解,无序列表,是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为,并列关系,，没有顺序级别之分,。定义,无序列表的,基本语法格式,如下：,1,、,无序列表,列表项,1,列表项,2,列表项,3,.,5.1 【案例11】知识点讲解无序列表是网页中最常用的列表，,5.1,【,案例,11】,知识点讲解,值得一提的是，,和,都拥有,type,属性，用于指定,列表项目符号,。在无序列表中,type,属性的常用值有三个，它们呈现的效果不同，具体,如,下,表所,示。,1,、,无序列表,type,属性值,显示效果,disc,（默认值）,circle,square,5.1 【案例11】知识点讲解值得一提的是，和li,5.1,【,案例,11】,知识点讲解,有序列表,即为,有排列顺序,的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的,基本语法格式,如下：,2,、有,序列,表,列表项,1,列表项,2,列表项,3,.,5.1 【案例11】知识点讲解有序列表即为有排列顺序的列表，,5.1,【,案例,11】,知识点讲解,在有序列表中，除了,type,属性之外，还可以为,定义,start,属性、为,定义,value,属性，它们决定有序列表的,项目符号,，其取值和含义,如,下,表所,示。,2,、有,序列,表,属性,属性值,描述,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】知识点讲解在有序列表中，除了type属性,5.1,【,案例,11】,案例实现,5.1 【案例11】案例实现,5.2,【,案例,12】,二维码名片,二,维码名片,的出现，简化了繁琐的信息录入方式，轻轻一扫，就可读取内部包涵的文字和图片信息，极大地提高了信息的存取速度。本节将运用,定义列表,制作一款时尚潮流的“,二维码名片,”，,如下图所示。,案例引入,5.2 【案例12】二维码名片二维码名片的出现，简化了繁琐的,5.2,【,案例,12】,知识引入,1,定义列表,2,定义列表实现图文混排,3,列表嵌套,知识,引入,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】,知识点讲解,在网页设计中，,定义列表,常用于实现,图文混排,效果，其中,标记中插入图片，,标记中放入对图片解释说明的文字。,如,下,图所,示的“讲师简介”模块就可以通过,定义列表,来实现。,2,、,定义列表实现图文混排,5.2 【案例12】知识点讲解在网页设计中，定义列表常用于实,5.2,【,案例,12】,知识点讲解,在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表,项,，,要,想在,列表项中,定义,子列表项,就需要将列表进行,嵌套,。,3,、,列表嵌套,5.2 【案例12】知识点讲解在网上购物商城中浏览商品时，经,5.2,【,案例,12】,案例实现,5.2 【案例12】案例实现,5.3,【,案例,13】,知识点讲解,同盒子模型的边框等属性一样，,CSS,中的,列表样式,也是一个,复合属性,，可以将列表相关的样式都综合定义在一个复合属性,list-style,中。使用,list-style,属性综合,设置列表样式的语法格式,如下,：,1,、,list-style,复合属性,list-style:,列表项目符号 列表项目符号的位置 列表项目图像,;,5.3 【案例13】知识点讲解同盒子模型的边框等属性一样，C,5.3,【,案例,13】,知识点讲解,由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为,设置背景图像,的方式实现,列表项目图像,。下面对背景属性定义列表项目符号的方法做具体,演示,。,2,、,背景图像定义列表项目符号,5.3 【案例13】知识点讲解由于列表样式对列表项目图像的控,5.3,【,案例,13】,案例实现,5.3 【案例13】案例实现,5.4,【,案例,14】,唱吧导航栏,浏览网站时，通过导航栏可以让访问者迅速找到所需要的资源区域,，本,节将运用,列表和超链接,的相关知识制作一款“,唱吧导航栏,”，其效果,如,下,图,（上）,所,示。当鼠标移上每个歌曲分类时，其背景颜色和背景图像都发生变化，,如,下,图,（下）,所,示。,案例引入,（上）,（下）,5.4 【案例14】唱吧导航栏浏览网站时，通过导航栏可以让访,5.4,【,案例,14】,知识引入,1,超链接标记,2,清除超链接图像的边框,知识,引入,3,链接伪类,4,锚点链接,5.4 【案例14】知识引入1超链接标记2清除超链接图,5.4,【,案例,14】,知识点讲解,一个网站通常由,多个,页面构成，进入网站时首先看到的是其首页，如果想从首页跳转到其子页面，就需要在首页相应的位置,添加超链接,。在,HTML,中创建超链接非常简单，只需用,标记,环绕需要,被链接的对象,即可。,创建超链接的基本语法格式,如下：,1,、,超链接标记,文本或图像,5.4 【案例14】知识点讲解一个网站通常由多个页面构成，进,5.4,【,案例,14】,知识点讲解,标记,是一个,行内标记,，用于,定义超链接,，,href,和,target,为其常用属性，下面对它们进行具体地解释。,href,：用于指定链接目标的,url,地址，当为,标记应用,href,属性时，它就具有了超链接的功能。,target,：用于指定链接页面的打开方式，其取值有,_self,和,_blank,两种，其中,_self,为默认值，意为在原窗口中打开，,_blank,为在新窗口中打开。,1,、,超链接标记,5.4 【案例14】知识点讲解标记是一个行内标记，用于,5.4,【,案例,14】,知识点讲解,创建图像超链接时，在某些浏览器中，图像会自动,添加边框,效果，,如,下,图所,示。,2,、,清除超链接图像的边框,5.4 【案例14】知识点讲解创建图像超链接时，在某些浏览器,5.4,【,案例,14】,知识点讲解,为了不影响页面的美观，通常需要,清除超链接图像,的,边框,，使图像正常显示。去掉链接图像的边框很简单，只需将,图像的边框定义为,0,即可，具体示例代码如下,：,这时保存,HTML,文件，,刷新页面,，效果,如,下,图所,示，链接图像的边框消失了。,2,、,清除超链接图像的边框,5.4 【案例14】知识点讲解为了不影响页面的美观，通常需要,5.4,【,案例,14】,知识点讲解,在,CSS,中，通过,链接伪类,可以实现,不同的链接状态,，使得超链接在,点击前,、,点击后,和,鼠标悬停时,的样式不同,。超,链接标记,的伪类有,4,种，具体,如,下,表所,示。,3,、,链接,伪类,超链接标记,的伪类,含义,a:link CSS,样式规则,; ,未访问时超链接的状态,a:visited CSS,样式规则,; ,访问后超链接的状态,a:hover CSS,样式规则,; ,鼠标经过、悬停时超链接的状态,a: active CSS,样式规则,; ,鼠标点击不动时超链接的状态,5.4 【案例14】知识点讲解在CSS中，通过链接伪类可以实,5.4,【,案例,14】,知识点讲解,浏览网站时，为了提高信息的检索速度，常需要用到,HTML,语言中一种特殊的链接,锚点链接,，通过创建锚点链接，用户能够,快速定位到目标内容,。下面对创建锚点链接的方法做具体,演示,。,4,、,锚点链接,5.4 【案例14】知识点讲解浏览网站时，为了提高信息的检索,5.4,【,案例,14】,案例实现,5.4 【案例14】案例实现,Thank You!,Thank You!,