HTML+CSS实现导航条及下拉菜单1
2024-05-08 17:41:08
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>HTML+CSS实现导航条及下拉菜单1相关推荐
- HTML+CSS实现导航栏二级下拉菜单图书案例
一.效果图 二.内容.要求 学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分法)进行分门别类,其中上面括号中的类别为 ...
- 前端学习———用css实现顶部导航条及下拉框
css实现顶部导航条及下拉框 一.原理 二.HTML 三.CSS 1.设置外部容器样式 2.设置内部容器样式 3.设置导航条中的元素 4.设置下拉框元素 5.设置父元素 6.效果展示 一.原理 1. ...
- CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言 该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
- 鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
- [css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
- vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单 引入顶部导航栏 使用下拉菜单 获取Vuex store数据 配置Vuex store 定义logout方法 引入顶部导航栏 创建client/s ...
- 【HTML+CSS】实现网页的导航栏和下拉菜单
熟练的使用导航栏,对于任何网站都非常重要,我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单.同时,我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果. 水平导航栏: 垂直导航栏 ...
- CSS导航栏及下拉菜单
导航栏对于一个网站来说非常重要,熟练地使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单.导航栏基本上是一个链接列表,所以使用 <ul></ul>和 <li> ...
- CSS样式：小米商城导航栏及下拉菜单小项目
小米商城 一.Html网页 二.CSS美化样式 三.成果图 一.Html网页 <!DOCTYPE html> <html lang="en"><hea ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'><h2 class='page-header'>导航</h2><!-- .navrbar n ...
最新文章
- jedis ShardedJedisPool的 HASH一致性算法（一）从String 的hashcode说起
- python字符串面试题：找出一个字符串中第一个字母和最后一个字符是第一次重复，中间没有重复且最长的子串...
- VTK：交叉点 PolyData 过滤器用法实战
- Beyond Compare配置
- php 计算本月第一天 本月最后一天 下个月第一天
- 比特币价格跌破3万美元登上彭博社头版
- opencv计算机视觉学习笔记一
- Oracle 重置过期密码,Oracle重置过期的密码
- 联想小新系列笔记本 黑苹果BIOS配置
- Linux的LILO引导程序,LILO引导程序
- SQL Sever：关于外键引用无效表的问题
- 【论文学习】《Who is Real Bob? Adversarial Attacks on Speaker Recognition Systems》
- ubuntu的一些安装设置
- 有关/mnt/asec /mnt/secure文件夹及app2sd原理
- 高数-极限-存在与连续1
- linux rcs 应用程序,Linux下的rcS文件的一些分析
- 从全国首日票房破百万看零售商家的线下营销
- log4j2的介绍与使用（配置文件，路径等）
- 金蝶kis商贸采购单商品代码_金蝶KIS商贸级版V3.0操作实例.doc
- 2013中国域名注册商报告：万网新增15.6万域名