首页 > 网站 > WEB开发 > 正文

下拉菜单

2024-04-27 15:07:59
字体:
来源:转载
供稿:网友

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

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

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

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

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

我是按第一种完成的

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

红色方框的设置:           

下方ul里面的设置:

        

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

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

就是这些:

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

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表