样式如下:
代码如下:
<!DOCTYPE html>
<html>
<head><title>餐饮网站header部分</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"><style type="text/css">/*设置body元素字体为Microsoft YaHei*/body { font-family: Microsoft YaHei}.head-top{background: #55ff66;padding: 0.8em 0;}.navbar-brand{padding: 0 0;}/*设置图片logo的大小和位置*/.navbar-brand>img{height: auto;margin-right: 5px;margin-top: 5px;width: 250px;}/*设置整个导航菜单的内边距、背景色和阴影*/.navbar-default{padding: 1.5em 0;background-color: #f2f0f1;box-shadow: 12px -5px 39px -12px;}/*设置导航栏中菜单a链接的样式*/.navbar-default .navbar-nav>li a {top: 10px;padding: 0.5em 3em;text-decoration: none;font-weight: 600;font-size: 1.2em;color:#919191;}/*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/.navbar-default .navbar-nav> li >a:hover,.navbar-default .navbar-nav> li >a:focus {background:#D96B66;color: white;border-radius: 3px;-webkit-border-radius: 3px;}/*设置导航栏右侧a链接(0.00)的颜色*/.navbar-right>a{color:#D96B66;}/*媒体查询:当视口小于970px时,导航菜单字体变小,避免了换行的问题*/@media (max-width: 970px) {.navbar-default .navbar-nav>li a {font-size: 1.1em;}}/*header部分结束*/</style>
</head>
<body>
<!-- header -->
<header><div class="head-top"></div><nav class="navbar navbar-default" ><div class="container-fluid"><div class="container"><div class="navbar-header"><!--<div class="logo">--><a href="#" class="navbar-brand" ><img src="images/logo.png" alt=""></a><!--</div>--><!-- 当进入最小设备时,导航条将隐藏,显示“汉堡按钮”,点击时可以切面显示导航条隐藏的信息* data-target :用于确定需要显示div--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"><span class="sr-only">汉堡按钮</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><!-- 导航链接、表单和其他内容切换 --><div class="collapse navbar-collapse" id="navbar-collapse"><ul class="nav navbar-nav"><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><div class="navbar-right "><a href="#"><h3> <span >¥0.00 <img src="images/bag.png" alt=""/></span></h3></a></div></div></div></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>
</header>
<!-- header -->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>