首页用HTML代码做一个电商选品悬浮框

用HTML代码做一个电商选品悬浮框

时间: 2024-09-28 20:05:10 浏览: 37

在HTML中制作一个简单的电商选品悬浮框通常需要结合CSS来控制样式。以下是一个基础的示例，它包含一个浮动的选择菜单： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .select-box { position: fixed; bottom: 20px; /* 悬浮在页面底部的位置 */ right: 20px; /* 右侧距离 */ z-index: 999; /* 高于其他元素 */ background-color: #fff; padding: 10px; border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; align-items: center; cursor: pointer; } .select-box ul { list-style-type: none; margin: 0; padding: 0; } .select-box li { margin-right: 10px; } </style> </head> <body> <div class="select-box" onclick="showDropdown()">  <span>请选择商品类别</span>  <ul id="dropdown-list" style="display: none;"> <li><a href="#">电子产品</a></li> <li><a href="#">家居用品</a></li> <li><a href="#">服饰鞋包</a></li> <li><a href="#">美妆个护</a></li> </ul> </div> <script> function showDropdown() { var dropdownList = document.getElementById('dropdown-list'); if (dropdownList.style.display === 'none') { dropdownList.style.display = 'block'; } else { dropdownList.style.display = 'none'; } } </script> </body> </html> ``` 这个例子中，点击选品悬浮框时会显示下拉菜单，当你再次点击或者鼠标移出下拉菜单时，它又会隐藏起来。

阅读全文