下拉菜单

今天讲一下关于下拉菜单的制作,这些作业都是老师在平时课堂上交待我们完成的练习或是晚自习作业。

效果图如下:                  红色框里面的内容是鼠标经过菜单显示在下方

这个作业我也看了其他同学的做法,大概就是2种:

第一种是先做上面的3个菜单项,再制作下面的二级列表(大多数)

第二种是直接做一列出来(菜单+列表) 其余的两列就复制过去  


我是按第一种完成的

上方的3个菜单 在设置好背景 宽度 高度等相关的样式之后 只需要一个left就完成了


红色方框的设置:           


下方ul里面的设置:

        

这样一个下拉菜单列表就完成了。


还有一点就是  老师要求我们在打代码之前 一开始都要把默认的样式打好

就是这些:

<style>
 *{
 padding: 0;
 margin: 0;
 list-style: none;
 text-decoration:none;
 
然后练习做多了,自然就把代码记下来了  甚至老师经常用Box去定义教学 有些同学也用Box,但是换一个定义的名称就不习惯了。

这就需要我们灵活 学会思考!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值