下拉菜单栏的制作

这次我们学习到的是用HTML和css制作下拉式菜单栏。

这次还是像滑动手风琴一样需要引用图标。

引用图标库

先对菜单进行布局，用多个div进行布局，再向div中添加

• 当做下拉栏
  布局代码

  
  

  未添加css效果

  
  

  css

  1.需要注意的是选择器的使用，如下拉栏需要选择的是id中的ul中的li。

  2.运用hover实现鼠标移入时的栏目样式，之前需要用text-decoration:none对下拉文本进行隐藏

  3.因为没有用到超链接，则需添加在移入是的鼠标样式，即cursor：pointer，设置移入时鼠标为手指样式

  
  

  hover效果展示

  4.用@media设置当宽度减小时菜单栏的样式变化

  
  

  最大宽度小于700px时菜单栏变化

  
  

  缩放后菜单栏效果

  ps:本次作业难度不大，但选择器的使用即div的嵌套较多，容易造成嵌套顺序不对，使样式发生变化。总体来说对界面布局仍需要多多练习。