<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式导航</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/navbar.css">
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">产品</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">产品1</a></li>
<li><a class="dropdown-item" href="#">产品2</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">下载资料</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">服务</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">售前咨询</a></li>
<li><a class="dropdown-item" href="#">技术支持</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
<form class="d-flex search-form">
<input class="form-control" type="search" placeholder="搜索...">
<button class="btn" type="submit">🔍</button>
</form>
<div class="language-selector ms-3">
<select class="form-select">
<option>中文</option>
<option>English</option>
</select>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/navbar.js"></script>
</body>
</html>
<div > 11111111</div>
<div > 22222222</div>
<p > 11111111</p>
<p > 22222222</p>
<h1 > 11111111</h1>
<h1 > 22222222</h1>
<span > 11111111</span>
<span > 22222222</span>
<span > 11111</span><span > 22222222</span>
<ul>
<li>1111111111111 </li>
<li>1111111111111 </li>
</ul><!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="mySlides">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="mySlides">
<img src="image2.jpg" alt="Image 2">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>
</body>
</html>回到js基础常用的几个应用组件
第一个是弹出窗
第二个是轮播图
第三是放大镜
第四个是导航下拉
第五个图表
第六是编辑器 <body onload="makemap()" onkeydown="control(event)" >
<span>按方向键控制蛇行走的方向（长按加速），按空格键暂停/开始</span><br/>
得分：<input value="0" readonly type="text" id="score">
2013年的项目，我的第一个程序项目 非常有纪念意义的。
里面用到了知识点，定时器settimeout，随机rand 检测距离的方法 Math.sqrt 和基本的html css样式 js创建元素 js数组追加和读取
--计划增加自动寻找食物的功能 根据食物方位计算下一步的方向，明确有线开始方向比如先左右后上下 如果方向被自己身体挡住了就需要调整如果四个方向都有问题那就要考虑终结了。
--从教学角度看第一步是画出框 先展示终极目标，然后第一步就是画一个类似的框。然后就是放一个方块，
接着放方块移动，多个方块，让多个方块移动，调整移动的方向，放置随机食物，检测食物距离，距离合适就吃掉食物
增加额外的条件是吃到自己就停止 不能反向行走。这样就完成了。 非常重要的教学题材，深度结合了多个技能点
</body>