制作一个餐饮网站的头部

最新推荐文章于 2024-04-13 13:30:08 发布

溪栎

最新推荐文章于 2024-04-13 13:30:08 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/whyshuaige/article/details/108561912

版权

样式如下：
在这里插入图片描述

代码如下：

<!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>

溪栎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作一个餐饮网站的头部

样式如下：代码如下：<!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-wid
复制链接

扫一扫