项目总结（2）

项目技术

以下是做项目的时候碰到的知识点：

二级菜单的CSS纯做法：

原理:先创建一个类似DIV盒子,在DIV盒子中写出你的菜单栏，在你写完菜单栏后千万不要另起一个盒子去写你所需要隐藏的选项栏！千万不要另起一个盒子！！！需要隐藏的选项栏应该在父级元素下的子级元素去进行编写，就是需要写在显示菜单栏的同级。然后将隐藏菜单栏用display:none;进行隐藏，然后用:hover进行显示与隐藏。
如:
index:
<div class=“box”>
  <div class=“face”>显示盒子</div>
  <div class=“hidden”>隐藏盒子</div>
</div>
css:
.box{
  width:100px;
  height:100px;
  position:relative;
}
.face{
  width:100px;
  height:100px;
}
.hidden{
  width:100px;
  height:100px;
  display:none;
  position:absolute;
  background-position:0 0;
}
.box:hover .hidden{
  display:block;
}
效果图：
隐藏时：

显示时：

文本不换行、多余内容隐藏并改省略号：

css:
文本不换行：
white-space: nowrap;
超出部分隐藏：
overflow: hidden;
文本元素溢出内容改为省略号：
text-overflow: ellipsis;

元素旋转：

transform: rotate(度数deg);