列表与超链接-课件.pptx

上传人(卖家):晟晟文业 文档编号:4684811 上传时间:2023-01-01 格式:PPTX 页数:28 大小:2.09MB
下载 相关 举报
列表与超链接-课件.pptx_第1页
第1页 / 共28页
列表与超链接-课件.pptx_第2页
第2页 / 共28页
列表与超链接-课件.pptx_第3页
第3页 / 共28页
列表与超链接-课件.pptx_第4页
第4页 / 共28页
列表与超链接-课件.pptx_第5页
第5页 / 共28页
点击查看更多>>
资源描述

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!

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(列表与超链接-课件.pptx)为本站会员(晟晟文业)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|