手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

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

时间: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>

如何在网页上做一个图片下拉菜单
© 手抄报圈