4.3垂直导航条的制作(翻转课堂)

交集选择符
#homelink
a#homelink
a
注意：
1、由2个选择符直接连接构成，其结果是选中两者范围的交集 2、第1个必须是标签选择符，第二个必须是类选择符或ID选择符 3、两个选择符之间不能有空格，必须连续书写
拓展任务
请完成乐学在线上的“垂直 导航条拓展作业”，网页效 果如图所示。
拓展任务
标签分析
div ul+li+a
拓展任务
难点1 导航条与背景图的位置调整
通过margin调整 导航条的位置， 使其正好位于背 景图的条幅中
拓展任务
难点2 如何删除最后一条虚线
在最后的a标签上 添加id，为其单独 设计底部边框
小结
当网站内容在网页显示过长的时，用户习惯用鼠标无 限去滚动网站内容，以便更加快速加载下面的内容， 这时网站适合采用垂直式的导航，方便用户在浏览内 容时导航信息始终保持在一个位置可以被快速找到。
垂直导航条的制作
课前预习问题汇总
如何将超链接的范围扩大？ 菜单文字与左侧的图标位置不合理 首页左侧的图标与其他菜单不一样，如何实现？
案例分析
需要突出的 菜单项
图片 指示
鼠标 经过
案例分析
垂直导航条的标签 突出的菜单项
超链接的范围 扩展为矩形
相关知识