用HTML代码做一个电商选品悬浮框
时间: 2024-09-28 10:05:10 浏览: 34
前端html静态页面化妆品电商购物网站.rar(含html源码)
5星 · 资源好评率100%
在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>
```
这个例子中,点击选品悬浮框时会显示下拉菜单,当你再次点击或者鼠标移出下拉菜单时,它又会隐藏起来。
阅读全文