怎么用html语言快速做一个网页的三级菜单呢？
<title>随便写，不影响整体。上海信息工程大学
，在style里用这条语句调置c位： text-align: center;既然咱们写的是菜单，就会使用到大量的列表标签，div可以不用。
那么，我我们会用到哪些标签呢？
最外层用到
- 无序标签，
- 列表标签，它是用于定义列表（有序列表
- 和无序列表
<ul>- 就是导航菜单中的一个单独菜单项。使用这些列表标签不断嵌套，不仅三级菜单，想做多少都可以，宛如套娃游戏。
实现点击跳转，使用超链接标签，
- 文本 ，在用css加上一点鼠标悬停效果，就可做出一个还不错的扁平化网页菜单。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="/HTML+CSS exercise/reset.css"><title>上海信息工程大学</title><style>h3 {font-size: 50px;text-align: center;}.nav1 {/*ul*/width: 1200px;margin: 0 auto;list-style: none;}.border1:last-child {border-right: none;}.nav1 li {float: left;line-height: 48px;}a {display: block;height: 48px;background-color: #1767f3;text-decoration: none;color: #ffffff;padding: 0 68px 0 68px;}.nav1 a:hover {background-color: #15427c;color: #ffffff;}.nav2 {position: absolute;width: 200px;display: none;}.nav1 li:hover .nav2,.nav2 li:hover .nav3,.nav2 li:hover .last {display: block;}.nav3 {position: absolute;width: 200px;left: 200px;/*菜单上移一格*/margin-top: -48px;display: none;}.last {position: absolute;width: 200px;right: 200px;margin-top: -48px;display: none;}</style></head><body><h3>上海信息工程大学</h3><ul class="nav1"><li class="border1"><a href="#">学校概况</a><ul class="nav2"><li><a href="#">学校简介</a><ul class="nav3"><li><a href="#">校园文化</a></li><li><a href="#">办学理念</a></li><li><a href="#">数字校园</a></li><li><a href="#">校史馆</a></li></ul></li><li><a href="#">学校领导</a><ul class="nav3"><li><a href="#">党委办公室</a></li><li><a href="#">党支部综合办</a></li><li><a href="#">教务处</a></li><li><a href="#">学院领导</a></li><li><a href="#">学生办事处</a></li></ul></li><li><a href="#">学校标识</a><ul class="nav3"><li><a href="#">校徽设计</a></li><li><a href="#">校区分布</a></li><li><a href="#">标志建筑</a></li><li><a href="#">建设规划</a></li></ul></li><li><a href="#">学术文化</a><ul class="nav3"><li><a href="#">名师风采</a></li><li><a href="#">获奖团队</a></li><li><a href="#">学科竞赛</a></li><li><a href="#">学术期刊</a></li></ul></li><li><a href="#">人才培养</a><ul class="nav3"><li><a href="#">师资队伍</a></li><li><a href="#">本科生教育</a></li><li><a href="#">研究生培养</a></li><li><a href="#">博士生培养</a></li><li><a href="#">国际学生教育</a></li><li><a href="#">继续教育</a></li></ul></li></ul></li><li class="border1"><a href="#">国际合作</a><ul class="nav2"><li><a href="#">国际交流</a><ul class="nav3"><li><a href="#">合作办学</a></li><li><a href="#">友谊大学</a></li><li><a href="#">联合单位</a></li></ul></li><li><a href="#">一带一路研究院</a><ul class="nav3"><li><a href="#">项目申请</a></li><li><a href="#">来华访问</a></li><li><a href="#">出国访问</a></li><li><a href="#">东南亚研究中心</a></li><li><a href="#">中东研究中心</a></li></ul></li><li><a href="#">孔子学院</a><ul class="nav3"><li><a href="#">教师队伍</a></li><li><a href="#">入学申请</a></li><li><a href="#">汉语言进修</a></li></ul></li><li><a href="#">留学交换</a><ul class="nav3"><li><a href="#">留学讲座</a></li><li><a href="#">合作院校</a></li><li><a href="#">交换申请</a></li><li><a href="#">公费专项</a></li></ul></li><li><a href="#">国际学院</a><ul class="nav3"><li><a href="#">留学生学生会</a></li><li><a href="#">留学生奖学金</a></li><li><a href="#">来华留学申请</a></li></ul></li></ul></li><li class="border1"><a href="#">院系部门</a><ul class="nav2"><li><a href="#">学院总览</a><ul class="nav3"><li><a href="#">大气科学学院</a></li><li><a href="#">地理科学学院</a></li><li><a href="#">软件学院</a></li><li><a href="#">海洋学院</a></li><li><a href="#">物理与电气学院</a></li><li><a href="#">计算机工程学院</a></li><li><a href="#">男德学院</a></li><li><a href="#">艺术学院</a></li></ul></li><li><a href="#">党政部门</a><ul class="nav3"><li><a href="#">组织部</a></li><li><a href="#">宣传部</a></li><li><a href="#">办事处</a></li><li><a href="#">武装部</a></li></ul></li><li><a href="#">直属单位</a><ul class="nav3"><li><a href="#">国利集团</a></li><li><a href="#">长江信息工程研究所</a></li></ul></li><li><a href="#">附属中学</a><ul class="nav3"><li><a href="#">报名入学</a></li><li><a href="#">访问参观</a></li></ul></li></ul></li><li class="border1"><a href="#">招生就业</a><ul class="nav2"><li><a href="#">迎新网</a><ul class="nav3"><li><a href="#">校园导航</a></li><li><a href="#">校园APP</a></li><li><a href="#">新生信息系统</a></li></ul></li><li><a href="#">本科生招生</a><ul class="nav3"><li><a href="#">历年分数</a></li><li><a href="#">招生指标</a></li><li><a href="#">校区分配</a></li></ul></li><li><a href="#">研究所招生</a><ul class="nav3"><li><a href="#">历年分数</a></li><li><a href="#">招考数据</a></li><li><a href="#">考纲信息</a></li><li><a href="#">珠海研究院</a></li></ul></li><li><a href="#">继续教育招生</a><ul class="nav3"><li><a href="#">成人本科</a></li><li><a href="#">干部培训</a></li></ul></li><li><a href="#">就业网信息</a><ul class="nav3"><li><a href="#">就业指导</a></li><li><a href="#">就业补助</a></li><li><a href="#">创业贷款</a></li><li><a href="#">就业数据</a></li></ul></li></ul></li><li class="border1"><a href="#">公共服务</a><ul class="nav2"><li><a href="#">MOOC</a><ul class="nav3"><li><a href="#">网课指导</a></li></ul></li><li><a href="#">图书馆</a><ul class="nav3"><li><a href="#">信息服务</a></li><li><a href="#">在线借阅</a></li><li><a href="#">入馆指导</a></li><li><a href="#">管理协会</a></li></ul></li><li><a href="#">正版软件</a><ul class="nav3"><li><a href="#">办公软件</a></li><li><a href="#">学习软件</a></li><li><a href="#">建模软件</a></li><li><a href="#">校园APP</a></li></ul></li><li><a href="#">电子支付</a><ul class="nav3"><li><a href="#">学费支付</a></li><li><a href="#">校园卡充值</a></li><li><a href="#">考试报名</a></li></ul></li><li><a href="#">邮箱服务</a><ul class="nav3"><li><a href="#">教工邮箱</a></li><li><a href="#">学生邮箱</a></li></ul></li></ul></li><li class="border1 "><a href="#">校友工作</a><ul class="nav2"><li><a href="#">校友服务</a><ul class=" last"><li><a href="#">入校申请</a></li><li><a href="#">学术交流</a></li></ul></li><li><a href="#">校友之家</a><ul class="last"><li><a href="#">周边产品</a></li><li><a href="#">更多服务</a></li></ul></li><li><a href="#">捐赠平台</a><ul class="last"><li><a href="#">母校募捐</a></li><li><a href="#">校友互助</a></li><li><a href="#">上信基金</a></li><li><a href="#">交通银行</a></li><li><a href="#">个人名义奖学金</a></li></ul></li><li><a href="#">校友风采</a><ul class="last"><li><a href="#">学术大师</a></li><li><a href="#">大国工匠</a></li><li><a href="#">优秀校友</a></li><li><a href="#">扶贫攻坚</a></li><li><a href="#">立德树人</a></li></ul></li></ul></li></ul></body></html>
）中的单个项目。比如说其中
需要代码的小伙伴见文章最后，代码效果图：
非常感谢您花时间阅读和支持，如果您觉得内容对您有所帮助或启发，那将是对我最大的鼓励。希望您能关注我，未来我会为大家带来更多优质、有价值的技术分析内容。
- 用于构建网站的一级导航菜单列表。
会大量使用到
本文转载自: https://blog.csdn.net/2301_77306863/article/details/140388890
版权归原作者 小蜗牛肥肥 所有， 如有侵权，请联系我们删除。
版权归原作者 小蜗牛肥肥 所有， 如有侵权，请联系我们删除。