制作产品中心导航模块.pptxVIP

《物联网Web前端开发基础》课程 制作头部模块 【任务6-6】制作头部模块效果分析——结构分析头部模块通栏显示，整体上由一个大盒子控制。头部模块中的内容居中对齐，由一个div搭建结构。另外，登录和个人中心栏目结构清晰，可以分别通过无序列表ul嵌套li标签进行定义。 【任务6-6】制作头部模块效果分析——样式分析头部模块通栏显示，需要对最外层的大盒子设置宽度100%。需要为li标签设置左浮动，使各个子栏目有序排列。 【任务6-6】制作头部模块效果分析——JavaScript特效分析当鼠标移动到“个人中心”时，在其下方将出现一个背景色为白色，并带有边框的下拉菜单；当鼠标划过下拉菜单中的某个选项时，其背景色变为灰色；当鼠标移出后，菜单栏恢复原来的样式。 【任务6-6】制作头部模块模块制作——搭建结构 ul class=left lia href=#登录/a/li lia href=#免费注册/a/li /ul ul class=right li class=listspan个人中心/span/li li class=line|/li lispan使用须知/span/li li class=line|/li lispan收藏夹/span/li li class=line|/li lispan解决方案/span/li li class=line|/li lispan联系我们/span/li /ul 【任务6-6】制作头部模块模块制作——控制样式#top_bg{ width:100%; height:30px; background:#F7F7F7;}#top{ width:980px; height:30px; line-height:30px; margin:0 auto;} 【任务6-6】制作头部模块模块制作——控制样式.left{float:left;}.right{float:right;}#top li{ float:left; padding:0px 10px 0px 0px;}#top .line{color:#CCC;}.right li{ cursor:pointer; border:1px solid #f7f7f7;}.right li span{padding:0px 9px;} 【任务6-6】制作头部模块模块制作——添加JS效果li class=list onmouseover=change(list_cur,block) onmouseout=change (list_cur,none) span个人中心/span div id=list_cur a href=#已完成订单/a a href=#未完成订单/a a href=#我的保险/a a href=#账户安全/a a href=#个人信息/a a href=#常用联系人/a /div /li添加下拉菜单结构代码 【任务6-6】制作头部模块模块制作——添加JS效果.right .list{position:relative;}.right #list_cur{ width:95px; display:none; position:absolute; left:-1px; top:30px; background-color:#FFF; border:1px solid #EEE;}定义下拉菜单CSS样式 【任务6-6】制作头部模块模块制作——添加JS效果.right #list_cur a{ display:block; padding:0 10px; line-height:28px; color:#6C6C6C;}.right #list_cur a:hover{background:#F5F5F5;}定义下拉菜单CSS样式 【任务6-6】制作头部模块模块制作——添加JS效果function change(myid,mode){ document.getElementById(myid).style.di