如何在网页上做一个图片下拉菜单

 时间:2024-10-22 12:37:52

1、思路:做这样的一个图片式下拉菜单可以分为以下的这几个部分。第一:设置图片菜单的样式,一个是网页初始图片菜单样式,其次是下拉菜单中的图片菜单样式。第二:鼠标行为的声明。第三:文字与链接的声明。

如何在网页上做一个图片下拉菜单

2、下拉菜单的整体定义。.dropdown { position: relative; display: inline-block;}

如何在网页上做一个图片下拉菜单

3、下拉菜单的样式定义。.dropdown-content { display: none; position: absolute; background-color: #7D26CD; min-width: 170px; box-shadow: 0px 6px 17px 0px #8A8A8A;}

如何在网页上做一个图片下拉菜单

4、鼠标行为定义。.dropdown:hover .dropdown-content { display: block;}

如何在网页上做一个图片下拉菜单

5、下拉菜单当中的文本内容定义。.desc { padding: 16px; text-align: center;}

如何在网页上做一个图片下拉菜单

6、整个代码的水瑞侮瑜body 部分。标题、文本、图片地址等等。把整个图片下拉菜单呈现出来。<h2> 掬研疔缎图片菜单</h2><p>鼠标一动菜单就变</p><div class="dropdown"> <img src="https://exp.bdstatic.com/static/common/widget/top-search-box/logo_1e63520.png" alt="百度经验" width="110" height="60"> <div class="dropdown-content"> <img src="https://exp.bdstatic.com/static/common/widget/top-search-box/logo_1e63520.png" alt="百度经验" width="410" height="210"> <div class="desc">百度经验助力梦想</div> </div></div></body>

如何在网页上做一个图片下拉菜单
  • 如何用记事本制作简单的网页?
  • Dreamweaver网页制作:[9]鼠标经过更换图片
  • 用记事本编写简单html网页入门:[2]列表
  • css当中如何制作并排的图片
  • HTML中如何调节一个角的角度代码
  • 热门搜索
    劳动手抄报内容 热爱祖国手抄报 有关清明节的手抄报 小学英语手抄报 感恩的手抄报 卫生与健康手抄报 科技手抄报内容资料 昆虫记手抄报 关于元旦的手抄报 疫情防控手抄报