怎么用html语言快速做一个网页的三级菜单呢？
<title>随便写，不影响整体。上海信息工程大学
，在style里用这条语句调置c位： text-align: center;既然咱们写的是菜单，就会使用到大量的列表标签，div可以不用。
那么，我我们会用到哪些标签呢？
最外层用到
- 无序标签，
- 列表标签，它是用于定义列表（有序列表
- 和无序列表
- 就是导航菜单中的一个单独菜单项。使用这些列表标签不断嵌套，不仅三级菜单，想做多少都可以，宛如套娃游戏。
实现点击跳转，使用超链接标签，
- 文本
，在用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>非常感谢您花时间阅读和支持，如果您觉得内容对您有所帮助或启发，那将是对我最大的鼓励。希望您能关注我，未来我会为大家带来更多优质、有价值的技术分析内容。
<ul>）中的单个项目。比如说其中
- 就是导航菜单中的一个单独菜单项。使用这些列表标签不断嵌套，不仅三级菜单，想做多少都可以，宛如套娃游戏。
- 用于构建网站的一级导航菜单列表。
会大量使用到
本文转载自: https://blog.csdn.net/2301_77306863/article/details/140388890
版权归原作者 小蜗牛肥肥 所有， 如有侵权，请联系我们删除。
版权归原作者 小蜗牛肥肥 所有， 如有侵权，请联系我们删除。