交互导航下拉菜单应用.pptVIP

* 电子商务网页设计与制作 Design?and?Creation?of?E-commerce?Web Pages 交互导航下拉菜单应用 T H I S I S 导入：基础任务分析 创建交互下拉菜单结构及样式 美化下拉菜单样式 Content 导 入-基础任务分析 本次任务是以商品展示页面为基础完成侧边栏导航后，创建鼠标交互下拉式菜单。通过任务实施来进一步掌握网页元素内容结构和表现的分离以及定位布局的应用。 创建交互下拉菜单结构及样式 1.创建下拉菜单的结构 在实际页面中除了侧边栏导航外，本身的水平导航栏往往具有二级类目需要通过下拉菜单来加以实习。这里以“安厨优选”这一导航栏目为例来创建相应的下拉菜单。通过增加div结构，在结构中运用超链接文本完成一个小的下拉菜单内容。 2.设置下拉菜单的样式 注意：将父元素li设为相对定位，下拉菜单为绝对定位。而下拉菜单默认状态为不显示，则采用display: none;来设置。 创建交互下拉菜单结构及样式 3.设置通过鼠标交互下拉菜单 通过display: none;与display: block;的切换来实现下拉菜单部分的显示。 这里采用了堆叠次序 z-index，这是在使用定位布局时，可能会出现盒子重叠的情况，通过z-i