需求说明
- 使用无序列表布局导航结构
- 使用小图标组件为导航项设置相应图片
- 使用下拉菜单设置导航项的二级菜单
运行效果
参考代码1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.navtop {
background-color: rgb(0, 0, 51);
height: 50px;
color: #FFFFFF;
line-height: 50px;
font-size: 16px;
}
.navtop a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="row navtop">
<div class="col-md-6">
<div class="col-md-3">
<p class="text-center"><span class="glyphicon glyphicon-home"></span> 首页</p>
</div>
<div class="col-md-3">
<p class="text-center"><span class="glyphicon glyphicon-gift"></span> 通用英语</p>
</div>
<div class="col-md-3">
<p class="text-center"><span class="glyphicon glyphicon-pencil"></span> 海外考试</p>
</div>
<div class="col-md-3">
<p class="text-center"><span class="glyphicon glyphicon-globe"></span> 青少英语</p>
</div>
</div>
<div class="col-md-6">
<div class="col-md-3">
<p class="text-center"><span class="glyphicon glyphicon-bishop"></span> 行业英语</p>
</div>
<div class="col-md-3">
<p class="text-center"><span class="glyphicon glyphicon-shopping-cart"></span> 在线购买</p>
</div>
<div class="col-md-3">
<p class="text-center"><span class="glyphicon glyphicon-user"></span> 全球师资</p>
</div>
<div class="col-md-3 ">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
更多栏目 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">学员案例</a>
</li>
<li>
<a href="#">免费体验</a>
</li>
<li>
<a href="#">英语胶囊</a>
</li>
<li>
<a href="#">精彩动态</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
参考代码2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>美联英语在线VIP-真人在线英语学习-美联英语免费在线学习网站 - 美联英语在线VIP</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/myCSS.css"/>
</head>
<body>
</div>
<!--导航-->
<nav class="container">
<ul class="myNav ">
<li class="active">
<a class="intercept" href="#" >
<i class="glyphicon glyphicon-home"></i> 首页
</a>
</li>
<li>
<a class="intercept" href="#">
<i class="glyphicon glyphicon-gift"></i> 通用英语
</a>
</li>
<li>
<a class="intercept" href="#" >
<i class="glyphicon glyphicon-pencil"></i> 海外考试
</a>
</li>
<li class=" hidden-sm">
<a class="intercept" href="#">
<i class="glyphicon glyphicon-globe"></i>青少英语
</a>
</li>
<li class=" hidden-sm">
<a class="intercept" href="#">
<i class="glyphicon glyphicon-bishop"></i> 行业英语
</a>
</li>
<li class=" hidden-sm">
<a class="intercept" href="#" >
<i class="glyphicon glyphicon-shopping-cart"></i> 在线购买
</a>
</li>
<li class=" hidden-md hidden-sm">
<a class="intercept" href="#">
<i class="glyphicon glyphicon-user"></i> 全球师资
</a>
</li>
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 更多栏目
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<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>
</nav>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
myCSS.css
li{
list-style: none;
float: left;
padding: 0 30px;
}
.myNav{
height: 50px;
line-height: 50px;
background: #000033;
}
.myNav a{
color: #f0f5f6;
}
超全面的测试IT技术课程,0元立即加入学习!有需要的朋友戳:
腾讯课堂测试技术学习地址
欢迎转载,但未经作者同意请保留此段声明,并在文章页面明显位置给出原文链接。