创建一级导航栏
使用 ul li 创建一个无序列表,即为一级导航栏
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">学校概况</a></li>
<li><a href="#">师资队伍</a></li>
<--!省略多个li标签-->
</ul>
#表示在当前页面,不跳转页面
这个时候一级导航栏为纵排,同时,前面会出现黑色小圆点,我们使用下面的方法
.nav ul{
/*让小黑圆点不显示*/
list-style: none;
}
.nav ul li {
/* 对其菜单项左浮动,呈横向排列 */
float: left;
}
此时,文字处于顶部(使用line-height垂直居中),没有间距(采用display:flex 同时让flex=1平分,这时就不需要左浮动了)
.nav ul{
list-style: none;
width: 1000px;
height: 44px;
line-height: 44px;
display: flex;
}
.nav ul li {
flex: 1;
text-align: center;
color: white;
font-weight: bold;
}
由于要创建二级导航栏,所以我们一级导航栏就不再需要a标签
<div class="nav">
<ul class="menu">
<li>首页</li>
<li>
学校概况
</li>
创建二级导航栏
在一级导航栏的基础上,只需要再加入
- 即可
<div class="nav">
<ul class="menu">
<li>首页</li>
<li>
学校概况
<ul>
<li><a href="#">学院简介</a></li>
<li><a href="#