首页
课件、教案、试卷中心
用户登录
资料
搜索
课件编号17678559
中职《Web前端开发案例教程(HTML5+CSS3)(第2版)》(人邮版·2023)任务5制作学院网站导航条 同步课件(共30张PPT)
日期:2024-06-23
科目:
类型:课件
查看:66次
大小:1949578Byte
来源:二一课件通
预览图
1/12
张
中职
,
学院
,
30张
,
课件
,
同步
,
网站导航
(
课件网
) 任务5 制作学院网站导航条 Web前端开发案例教程 HTML5+CSS3 微课版 导航条是网页的重要组成元素,导航条可以将网站的信息分类处理,帮助浏览者快速查找所需信息。本任务使用 HTML 的无序列表标记构建导航条的结构,使用 CSS 完成导航条样式设计,实现带有下拉菜单的学院网站导航条。通过本任务的实现,掌握导航条的构建及导航条样式设置等。 任务3 制作学院网站导航条 任务5 任务效果 创建带有下拉菜单的学院网站导航条,浏览效果如图所示。 (1)导航条的宽度为 100%,高度为 42px。 (2)导航条的背景颜色为蓝色 RGB(28,75,169)。 (3)每个导航项的宽度为 120px,高度为 42px,文字水平居中。 (4)每个导航项为超链接,文字采用微软雅黑体,文字大小为 14px,文字颜色为白色,无下划线。 (5)鼠标指针悬停到主菜单项上时,显示下拉菜单。 任务效果 创建带有下拉菜单的学院网站导航条,要求如下。 知识点 无序列表样式设置 01 超链接样式设置 02 元素的类型与转换 03 任务3 制作学院网站导航条 任务5 5.2.1 无序列表样式设置 列表有无序列表、有序列表和自定义列表等,对应的标记分别是
、
和
等。在实际应用中,无序列表是使用最频繁的列表之一,例如,本任务中的导航条就是用无序列表来构建的。 无序列表样式设置 5.2.1 无序列表样式设置 (1)list-style-type 属性:控制无序或有序列表的项目符号。例如,无序列表的取值有 disc、circle、square。 (2)list-style-position 属性:设置列表项目符号的位置,其取值有 inside 和 outside 两种。 (3)list-style-image 属性:设置列表项的项目图像,使列表的样式更加美观,其取值为图像的URL。 (4)list-style 属性:综合设置列表样式,可以代替上面 3 个属性。使用 list-style 属性综合设置列表项的样式,格式如下。 无序列表样式设置 5.2.1 无序列表样式设置 list-style: 列表项目符号 列表项目符号的位置 列表项目图像; example01.html 无序列表样式设置 5.2.1 无序列表样式设置 5.2.2 超链接样式设置 超链接默认的文字颜色为蓝色且带有下划线,这种单调的样式并不好看。实际上,为了使超链接看起来更加美观,经常需要为超链接指定不同的状态,使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。在 CSS 中,通过超链接伪类可以实现不同的超链接状态。 超链接样式设置 5.2.2 超链接样式设置 超链接标记
的伪类有如下 4 种。 (1)a:link{CSS 样式规则;}:未访问时超链接的状态。 (2)a:visited{CSS 样式规则;}:访问后超链接的状态。 (3)a:hover{CSS 样式规则;}:鼠标指针悬停时超链接的状态。 (4)a:active{CSS 样式规则;}:按下鼠标左键后不松开时超链接的状态 超链接样式设置 5.2.2 超链接样式设置 通常在实际应用时,只使用 a:link 和 a:visited 来定义未访问和访问后的样式,而且为 a:link 和a:visited 定义相同的样式;使用 a:hover 定义鼠标指针悬停时超链接的样式。有时干脆只定义 a 和a:hover 的样式。 超链接样式设置 5.2.2 超链接样式设置 example02. html 5.2.3 元素的类型与转换 HTML 提供了丰富的标记,用于组织页面结构。为了使页面结构的组织更加清晰、合理,HTML 标记被定义成了不同的类型,一般分为块标记和行内标记,也称块元素和行内元素。块元素和行内元素还能根据实际需求进行类型转换。 块元素 5.2.3 元素的类型与转换 块元素(Block Element)在页面中以区域块的形式出现,其特点是:每个块元素通常都会占据一整行或多行,可以对其设置宽度、高度、对齐方式等属性,常用于网页布局和搭建网页结构。 常见的块元素有 h1~h6、p、ul、ol、li、div、head ... ...
~~ 您好,已阅读到文档的结尾了 ~~
立即下载
免费下载
(校网通专属)
登录下载Word版课件
同类资源
模块一 任务五车刀的刃磨(课件)2024年《高级车工工艺与技能训练(第三版)》(劳动版)同步教学(2024-06-01)
模块八 任务六 车四拐曲轴. (课件)2024年《高级车工工艺与技能训练(第三版)》(劳动版)同步教学(2024-05-31)
模块二 任务二 粗车台阶轴(课件)2024年《高级车工工艺与技能训练(第三版)》(劳动版)同步教学(2024-06-01)
第2章 第1节借入资金的账务处理(课件)2023-2024学年中职高二《电子商务会计(第三版)》(中国劳动社会保障出版社)同步教学(2024-06-01)
模块一 任务1汽车涂装的认知(课件)2023年《汽车涂装技术(第二版)》(人民交通出版社)(2024-06-01)
上传课件兼职赚钱