Web网页设计——制作简单的三级菜单

钜形不锈钢水箱 · 6 天前

怎么用html语言快速做一个网页的三级菜单呢？
<title>随便写，不影响团体。
<h3>上海信息工程大学</h3>，在style里用这条语句调置c位： text-align: center;
既然咱们写的是菜单，就会使用到大量的列表标签，div可以不消。
那么，我我们会用到哪些标签呢？
最外层用到<ul>无序标签，<ul class="nav1">用于构建网站的一级导航菜单列表。
会大量使用到<li>列表标签，它是用于定义列表（有序列表<ol>和无序列表<ul>）中的单个项目。比如说此中<li class="border1">就是导航菜单中的一个单独菜单项。使用这些列表标签不停嵌套，不仅三级菜单，想做多少都可以，宛如套娃游戏。
实现点击跳转，使用<a>超链接标签，<li><a href="跳转对象">文本</a></li>，在用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>

复制代码

非常感谢您花时间阅读和支持，假如您以为内容对您有所帮助或启发，那将是对我最大的鼓励。盼望您能关注我，未来我会为各人带来更多优质、有代价的技术分析内容。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

Web网页设计——制作简单的三级菜单

0 个回复

快速回复

楼主热帖

标签云