基于HTML5的移动Web应用——Bootstrap 样式案例：制作页面导航

最新推荐文章于 2023-02-14 09:07:10 发布

sem00000

最新推荐文章于 2023-02-14 09:07:10 发布

阅读量1.9k

点赞数 2

分类专栏：移动WEB开发前端文章标签： bootstrap css3 html

本文链接：https://blog.csdn.net/sem00000/article/details/105964734

版权

前端同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

移动WEB开发

14 篇文章 0 订阅

订阅专栏

需求说明

使用无序列表布局导航结构
使用小图标组件为导航项设置相应图片
使用下拉菜单设置导航项的二级菜单

运行效果
在这里插入图片描述

参考代码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>&nbsp;&nbsp;&nbsp;首页</p>
				</div>
				<div class="col-md-3">
					<p class="text-center"><span class="glyphicon glyphicon-gift"></span>&nbsp;&nbsp;&nbsp;通用英语</p>
				</div>
				<div class="col-md-3">
					<p class="text-center"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;&nbsp;海外考试</p>
				</div>
				<div class="col-md-3">
					<p class="text-center"><span class="glyphicon glyphicon-globe"></span>&nbsp;&nbsp;&nbsp;青少英语</p>
				</div>
			</div>
			<div class="col-md-6">
				<div class="col-md-3">
					<p class="text-center"><span class="glyphicon glyphicon-bishop"></span>&nbsp;&nbsp;&nbsp;行业英语</p>
				</div>
				<div class="col-md-3">
					<p class="text-center"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;&nbsp;&nbsp;在线购买</p>
				</div>
				<div class="col-md-3">
					<p class="text-center"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;全球师资</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元立即加入学习！有需要的朋友戳：

腾讯课堂测试技术学习地址

欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。

sem00000

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
基于HTML5的移动Web应用——Bootstrap 样式案例：制作页面导航

需求说明使用无序列表布局导航结构使用小图标组件为导航项设置相应图片使用下拉菜单设置导航项的二级菜单运行效果参考代码1<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="styles...
复制链接

扫一扫

专栏目录