首页用hmtl写小米商城导航栏下拉框

用hmtl写小米商城导航栏下拉框

时间: 2023-07-18 16:42:38 浏览: 82

好的，下面是一个简单的示例代码，你可以参考一下： ```html <!DOCTYPE html> <html> <head> <title>小米商城导航栏下拉框</title> <style> /* 设置导航栏样式 */ .nav { display: flex; justify-content: center; align-items: center; background-color: #333; color: #fff; height: 50px; font-size: 18px; } /* 设置下拉框的样式 */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; background-color: #f9f9f9; min-width: 120px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .dropdown:hover .dropdown-content { display: block; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1; } </style> </head> <body>  <div class="nav"> <div class="dropdown"> <a href="#">手机</a> <div class="dropdown-content"> <a href="#">小米11</a> <a href="#">小米10</a> <a href="#">Redmi K40</a> </div> </div> <div class="dropdown"> <a href="#">电视</a> <div class="dropdown-content"> <a href="#">小米电视6</a> <a href="#">小米电视5</a> <a href="#">小米电视4</a> </div> </div> <div class="dropdown"> <a href="#">笔记本</a> <div class="dropdown-content"> <a href="#">小米笔记本Pro</a> <a href="#">小米笔记本Air</a> <a href="#">RedmiBook</a> </div> </div> </div> </body> </html> ``` 这里用了 HTML 和 CSS，通过 `div` 元素来实现导航栏，用 `a` 元素来实现下拉框的标题，用 `div` 元素来实现下拉框的内容。当鼠标移到标题上时，下拉框的内容就会显示出来。你可以根据需求来修改样式和内容。

阅读全文