js实现二级导航

一级导航

  • 首先写页面结构,结构写好了再确定特效。在书写页面结构时,同时要确定每个块的宽高、位置,并通过设置颜色属性调试
  • 在写css特效时,首先要注意重置默认样式,即浏览器默认给的一些属性。例如,我们打开检查发现body有一个margin=8的属性,这是谷歌浏览器默认给的,要重置掉



    
    
    Document

    


    

二级导航

  • 二级导航可以理解为,使一级导航的每个li对应一个区域,当鼠标滑到这个li时,就让区域显示出来。若我们将二级导航写在外边,还要用js强行联系,麻烦;不如直接写在一级导航的li里边
  • 写样式时,经常遇到没有给距离样式,却莫名其妙的给了样式。这是由于样式污染,样式污染可能由命名重复、继承、优先级引起。在样式中,所有的文本样式会被继承(如字体大小、粗细、行高、行间距、文字对齐等),我们可以从检查中的inherited from看到。
  • 如何避免文本样式的继承污染呢?和文本有关的样式全部写在文本所在的元素,不要把文本样式写在结构父集中。
  • div ul li是结构标签,a h1 p是文本标签。我们之前把行高和行间距放到li里边了,所以出错,应该放到a标签里

完整代码




    
    
    Document

    


    

     
     
     
     

你可能感兴趣的:(前端)