HTML+CSS实现导航条及下拉菜单1_导航条html代码

原创 admin  2023-05-03 07:48  阅读 3 次

1、效果截图

在这里插入图片描述

2、html代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="main-menu"> <div class="logo"> <p>XXX后台管理系统</p> </div> <div class="menu-list"> <div class="dropdown"> <button class="dropbtn">首页</button> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> </div> </div> <div class="content"></div> <div class="footer"></div> </body> </html>

3、css代码

<style>
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; width: 120px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 120px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: center; } .dropdown-content a:hover { background-color: #55aaff; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } .main-menu { background-color: #4caf50; height: 55px; width: 1200px; margin-left: 120px; } .menu-list{ margin-left: 250px; margin-top: -68px; } .logo{ /* background-color: #0000FF; */ line-height: 55px; width: 170px; padding-left: 10px; } .content{ background-color: #0080FF; height: 600px; width: 1200px; margin-top: 5px; margin-left: 120px; } .footer{ height: 70px; width: 1200px; margin-top: 5px; margin-left: 120px; background-color: #4cc971; } </style>

4、全部代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; width: 120px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 120px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: center; } .dropdown-content a:hover { background-color: #55aaff; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } .main-menu { background-color: #4caf50; height: 55px; width: 1200px; margin-left: 120px; } .menu-list { margin-left: 250px; margin-top: -68px; } .logo { /* background-color: #0000FF; */ line-height: 55px; width: 170px; padding-left: 10px; } .content { background-color: #0080FF; height: 600px; width: 1200px; margin-top: 5px; margin-left: 120px; } .footer { height: 70px; width: 1200px; margin-top: 5px; margin-left: 120px; background-color: #4cc971; } </style> </head> <body> <div class="main-menu"> <div class="logo"> <p>XXX后台管理系统</p> </div> <div class="menu-list"> <div class="dropdown"> <button class="dropbtn">首页</button> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜鸟1</a> <a href="#">菜鸟2</a> <a href="#">菜鸟3</a> </div> </div> </div> </div> <div class="content"></div> <div class="footer"></div> </body> </html>
来源：https://www.huanp.com/wangzhan/141414.html
声明：欢迎分享本文，转载请保留出处！

发表评论


表情