制作產(chǎn)品中心導航模塊

《物聯(lián)網(wǎng)Web前端開發(fā)基礎(chǔ)》課程

制作頭部模塊【任務6-6】制作頭部模塊效果分析——結(jié)構(gòu)分析頭部模塊通欄顯示，整體上由一個大盒子控制。頭部模塊中的內(nèi)容居中對齊，由一個<div>搭建結(jié)構(gòu)。另外，登錄和個人中心欄目結(jié)構(gòu)清晰，可以分別通過無序列表<ul>嵌套<li>標簽進行定義?！救蝿?-6】制作頭部模塊效果分析——樣式分析頭部模塊通欄顯示，需要對最外層的大盒子設(shè)置寬度100%。需要為<li>標簽設(shè)置左浮動，使各個子欄目有序排列?！救蝿?-6】制作頭部模塊效果分析——JavaScript特效分析當鼠標移動到“個人中心”時，在其下方將出現(xiàn)一個背景色為白色，并帶有邊框的下拉菜單；當鼠標劃過下拉菜單中的某個選項時，其背景色變?yōu)榛疑划斒髽艘瞥龊?，菜單欄恢復原來的樣式?！救蝿?-6】制作頭部模塊模塊制作——搭建結(jié)構(gòu)<ulclass="left"><li><ahref="#">登錄</a></li><li><ahref="#">免費注冊</a></li></ul><ulclass="right"><liclass="list"><span>個人中心</span></li><liclass="line">|</li><li><span>使用須知</span></li><liclass="line">|</li><li><span>收藏夾</span></li><liclass="line">|</li><li><span>解決方案</span></li><liclass="line">|</li><li><span>聯(lián)系我們</span></li></ul>【任務6-6】制作頭部模塊模塊制作——控制樣式#top_bg{ width:100%; height:30px; background:#F7F7F7;}#top{ width:980px; height:30px; line-height:30px; margin:0auto;}【任務6-6】制作頭部模塊模塊制作——控制樣式.left{float:left;}.right{float:right;}#topli{ float:left; padding:0px10px0px0px;}#top.line{color:#CCC;}.rightli{ cursor:pointer; border:1pxsolid#f7f7f7;}.rightlispan{padding:0px9px;}【任務6-6】制作頭部模塊模塊制作——添加JS效果<liclass="list"onmouseover="change('list_cur','block')"onmouseout="change('list_cur','none')"><span>個人中心</span><divid="list_cur"><ahref="#">已完成訂單</a><ahref="#">未完成訂單</a><ahref="#">我的保險</a><ahref="#">賬戶安全</a><ahref="#">個人信息</a><ahref="#">常用聯(lián)系人</a></div></li>添加下拉菜單結(jié)構(gòu)代碼【任務6-6】制作頭部模塊模塊制作——添加JS效果.right.list{position:relative;}.right#list_cur{ width:95px; display:none; position:absolute; left:-1px; top:30px; background-color:#FFF; border:1pxsolid#EEE;}定義下拉菜單CSS樣式【任務6-6】制作頭部模塊模塊制作——添加JS效果.right#list_cura{ display:block; padding:010px; line-height:28px; color:#6C6C6C;}.right#list_cura:hover{background:#F5F5F5;}定義下拉菜單CSS樣式【任務6-6】制作頭部模塊模塊制作——添加JS效果functionchange(myid,mode){ document.getElementById(myid).style.display=mode; if(mode=='block'){//顯示下拉菜單 //設(shè)置下拉菜單所在div的邊框 document.getElementById(myid).style.border="1pxsolid#eee"; document.getElementById(myid).style.borderTop="none"; //設(shè)置鼠標劃過的li的邊框及背景顏色 document.getElementById(myid).parentNode.style.backgroundColor="#fff"; document.getElementById(myid).parentNode.style.border="1pxsolid#eee"; document.getElementById(myid).parentNode.style.borderBottom="none"; } else{ //當不顯示下拉列表時，鼠標劃過的li的邊框及背景顏色 document.getElementById(myi