diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1ed2c54
--- /dev/null
+++ b/index.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>书城</title>
+		<link rel="stylesheet" href="css/stylesheets.css" />
+		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+		<style>
+			/* body{
+				background-color: #e5e5e5;
+			} */
+			.top{
+				z-index: 999;
+				border-style: solid;
+				border-width: 1px;
+				border-color: #555;
+				height: 80px;
+				width: 100%;
+				position: fixed;
+				top: 0;
+				left: 0;
+				background-color: #1AA093;
+				text-align: center;
+			}
+			p{
+				font-size: 25px;
+				color: #e5e5e5;
+			}
+			.home{
+				width: 100%;
+				height: 600px;
+				position: relative;
+			}
+			.homePic{
+				height: 100%;
+				width: 50%;
+				position: absolute;
+				left: 25%;
+				background-size: contain;
+				background-repeat: no-repeat;
+				background-image: url("img/autochange/005.jpg");
+			}
+			.change{
+				display: block;
+				position: absolute;
+				width: 130px;
+				height: 70px;
+				background-color: #fff;
+			}
+			#left{
+				left: 25%;
+				background-image: url("/img/ltfc.png");
+				background-size: contain;
+			}
+			#right{
+				right:33%;
+				background-image: url("/img/rftc.png");
+				background-size: contain;
+			}
+			.changeBox{
+				width: 100%;
+				height: 150px;
+				position: absolute;
+				top: 600px;
+			}
+			.notice{
+				width: 24%;
+				position: absolute;
+				left: 0;
+				height: 600px;
+			}
+			.mainBody{
+				height: 700px;
+			}
+	</style>
+	</head>
+	<body>
+		<div class="top">
+			<nav class="topText"><p>Arknights</p></nav>
+			<nav class="log"><a href="Login.html"><p >登录</p></a></nav>
+			<nav class="sign"><a href="#"><p>注册</p></a></nav>	
+		</div>
+		<div class="seach">
+			<nav class="logo"></nav>
+			<ul class = "searchNav">
+				<li><a href=""><p>首页</p></a></li>
+				<li><a href="recommend.html"><p>书籍列表</p></a></li>
+				<li><a href="cart.html"><p>购物车</p></a></li>
+				<li><a href="toSum.html"><p>结算</p></a></li>
+			</ul>
+			<nav class = "find">
+				<input type="text" name="seach" class = "my-input">
+				<button onclick="" class = "findbooks"><p>查找</p></button>
+			</nav>
+		</div>
+		<div class = "mainBody">
+			<div class = "home">
+				<div class = "homePic">
+			</div>
+			<div class="changeBox">
+				<button class = "change" id="left" onclick="leftmove()"></button>
+				<button class = "change" id="right" onclick="rightmove()"></button>
+			</div>
+			<hr>
+			<h1>关于Arknights</h1>
+			<div class="notice">
+				<p>
+					欢迎来到我们的网上书店！
+				</p>
+				<p>
+					我们的网上书店是一个高质量、更快捷、更方便的购书平台。您不仅可以在这里购买图书，还可以找到音碟、影碟等丰富的资源。以下是我们网上书店的特点：
+				</p>
+				<p>
+					丰富的图书资源：我们提供各类图书，涵盖文学、科技、艺术、历史等多个领域。您可以轻松搜索并找到您感兴趣的书籍。
+				</p>
+				<p>	
+					便捷的购物体验：通过我们的购物车功能，您可以一次性添加多本书籍，然后一键结算。省时省力！
+				</p>
+				<p>
+					丰富的图书资源：我们提供各类图书，涵盖文学、科技、艺术、历史等多个领域。您可以轻松搜索并找到您感兴趣的书籍。
+				</p>
+				<br>
+			</div>
+		</div>
+		<!-- <footer>
+			<p>版权所有，侵权必究</p>
+		</footer> -->
+	</body>
+	<script>
+
+		let x=0;
+		let nums = [1,2,3,4,5];
+		let link = ["details/002.html","details/007.html","details/011.html","details/012.html","details/001.html"];
+		onload = function autochange(){
+			setInterval(rightmove,2000);
+		}
+		//轮播图
+		function rightmove(){
+			let home = document.querySelector('.homePic');
+			x++;
+			if(x>4) x=0;
+			home.style.backgroundImage = "url(\"img/autochange/00"+nums[x]+".jpg\")";
+			console.log(x);
+			home.onclick = function(){
+				window.location.href = link[x];
+			}
+			//console.log("<img src=\"img/00"+x+".png\" >");
+		}
+		function leftmove(){
+			let home = document.querySelector('.homePic');
+			x--;
+			if(x<0) x=4;
+			home.style.backgroundImage = "url(\"img/autochange/00"+nums[x]+".jpg\")";
+			//console.log(x);
+		}
+
+	</script>
+</html>
\ No newline at end of file
