<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
<!-- 排版 -->
<!-- 按钮 -->
<!-- 列表 -->
<!-- 导航 -->
<!-- 导航栏 -->
<!-- navbar -->
<!-- bg-light背景灰色 -->
<!-- bg-dark背景颜色黑色 -->
<!-- navber-light字体颜色，黑色 -->
<!-- navbar-dark字体颜色，白色 -->
<!-- navber-expard一行显示 -->
<!-- navber-expard-xl 1200px -->
<!-- navber-expard-lg 992px-->
<!-- navber-expard-md 768px-->
<!-- -expard-sm 567px -->
<nav class="navbar navbar-dark bg-dark navbar-expand ">
<!-- <a class="navbar-brand">小明明天下落不明</a> -->
<!-- <span class="navbar-brand">小红不爱看小红书</span> -->
<a class="navbar-brand">
<img
width="30"
height="30"
src="新建文件夹\1.jpeg"/>
老大
</a>
<!-- 进入手机页面，不让它3显示导航按钮，当点击一个按钮时，才让它显示出来 -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar" >
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link">首页</a>
</li>
<li class="nav-item ">
<a class="nav-link">商品</a>
</li>
<li class="nav-item ">
<a class="nav-link">关于我们</a>
</li>
<li class="nav-item ">
<a class="nav-link">招聘</a>
</li>
<!-- <li class="nav-item ">
<a class="nav-link">注册</a>
</li>
<li class="nav-item ">
<a class="nav-link">登录</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " data-toggle="dropdown">个人中心</a>
<div class="dropdown-menu">
<a class="dropdown-item">账户信息</a>
<a class="dropdown-item">订单列表</a>
<hr/>
<a class="dropdown-item">退出</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>
