一、源码

• 效果

  

• html

  
  
  
  
  首页
  部门机构
  现任领导
  部门组成
  审核评估
  评估简报
  通知公告
  评估文件
  评估动态
  关于评估
  经验交流
  联系我们
  新闻动态
  最新通知
  教务动态
  最新政策
  运行管理
  选课信息
  教学质量
  考试信息
  学籍管理
  实习管理
  教材管理
  教学研究
  教改动态
  教改项目
  教学成果
  规章制度
  
  
  

• css

  *{margin: 0;padding: 0;
  }
  body{overflow-x: hidden;
  }
  ul{list-style: none;  
  }
  header{width: 100vw;height: 50px;line-height: 50px;background-color: #533b77;
  }
  header .boxTop{/* 类似于float反正能让元素跑到一行 */display: flex;height: 50px;/* 它让li里面的字体是居中的 */text-align: center;/* 它让那些li相对于boxTop是居中的 */justify-content: center;
  }
  /* 主菜单 */
  header>.boxTop>li{/* border: 1px solid red; */width: 100px;color: white;
  }
  /* 主菜单被hover后展示的内容区域 */
  header>.boxTop>li>ul{display: none;width: 150px;/* background-color: green; */
  }
  header>.boxTop>li:hover ul,header>.boxTop>li:hover{display: block;background-color: #9982bc;
  }
  

二、技巧

• 颜色布局：所谓颜色布局，并不是颜色去写布局而是通过显著的颜色知道目前盒子的大小，便于下一步的布局，写这种内容的时候先不要使用display:none;，而应该刻意给内容加上点颜色或者边框便于观察与改变（下面的例子便是很好的展示）
  
• 子影响父：所谓子影响父，举例一种情况，就是当父辈不设置高度时，通常其高或者宽会被子代撑开（下面就是没有设置红色边框父辈元素的宽度，其被绿色子代撑开，“首页”没有子代所以其宽度只是文字宽度）

• 提醒：写margin，padding之前先清楚自己是否需要设置宽度（有时候padding或者margin可以用width或height效果更好）