用hmtl写小米商城导航栏下拉框
时间: 2023-07-18 15:42:28 浏览: 84
好的,以下是一个简单的用 HTML 和 CSS 写的小米商城导航栏下拉框的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城导航栏下拉框</title>
<style>
/* 导航栏样式 */
.nav {
background-color: #f7f7f7;
padding: 10px;
}
/* 下拉框样式 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* 下拉框链接样式 */
.dropdown-content a {
color: #333;
padding: 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f7f7f7;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<!-- 下拉框 -->
<div class="dropdown">
<a href="#">手机</a>
<div class="dropdown-content">
<a href="#">小米手机</a>
<a href="#">Redmi手机</a>
<a href="#">黑鲨手机</a>
</div>
</div>
<div class="dropdown">
<a href="#">电视</a>
<div class="dropdown-content">
<a href="#">小米电视</a>
<a href="#">Redmi电视</a>
</div>
</div>
<div class="dropdown">
<a href="#">笔记本</a>
<div class="dropdown-content">
<a href="#">小米笔记本</a>
<a href="#">Redmi笔记本</a>
<a href="#">游戏本</a>
</div>
</div>
<!-- 其他导航链接 -->
<a href="#">智能硬件</a>
<a href="#">服务</a>
<a href="#">社区</a>
</div>
</body>
</html>
```
上面的代码中,我们使用了 `div` 元素来创建导航栏和下拉框,使用了 CSS 来设置它们的样式。在下拉框部分,我们使用了 `position` 属性来设置下拉框的位置,使用了 `display` 属性来设置下拉框的显示和隐藏,使用了 `z-index` 属性来设置下拉框的层级。在下拉框链接部分,我们使用了 `a` 元素来创建链接,使用了 CSS 来设置它们的样式。
请注意,这只是一个示例代码,实际的小米商城导航栏下拉框可能会更加复杂,需要根据具体的需求和设计进行调整。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)