diff --git a/search-result.html b/search-result.html
new file mode 100644
index 0000000..30af505
--- /dev/null
+++ b/search-result.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Game Navigation</title>
+  <style>
+    /* CSS 样式 */
+    *{
+      margin: 0px;
+      padding: 0px;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f4f4f4;
+      position: relative;
+      width: 100%;
+      height: 100vh;
+    }
+    .header {
+        align-items: center;
+        background-color: #fff;
+        border-bottom: 1px solid #ececf1;
+        display: flex;
+        height: 60px;
+        justify-content: space-between;
+        overflow: auto;
+        padding: 0 0px;
+        top: 0;
+        width: 100%;
+        z-index: 100;
+    }
+    .header h1 {
+      margin: 0;
+    }
+    .user-settings {
+      align-items: center;
+      position: absolute;
+      right: 20px;
+      top: 18px;
+      display: inline-block;
+      height: 50px;
+    }
+    .user-settings img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        margin-right: 10px;
+    }
+    .container {
+      width: 100%;
+      margin: 0 auto;
+      padding-bottom: 10px;
+      background-color: #fff;
+      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
+      margin-top: 0px;
+    }
+
+    h1 {
+      text-align: left;
+      display: inline-block;
+    }
+
+    .root{
+        width: 200px;
+        background-color:white;
+        position: absolute;
+        top: 27px;
+        right: 37px;
+        display:none;
+    }
+
+    a{
+        text-decoration: none;
+    }
+    .user-message div{
+        color: #202123;
+        font-weight: 700;
+        margin-top: 10px;
+    }
+    .separator{
+        width: 100%;
+        height: 1px;
+        margin: 5px 0px;
+        background-color: #ececf1;
+    }
+    .option1:hover{
+        background-color: #b9eebc;
+    }
+    .option2:hover{
+        background-color: #b9eebc;
+    }
+    .email-message{
+        margin-top: 10px;
+        margin-left: 10px;
+        margin-bottom: 5px;
+    }
+    .user-type{
+        padding: 5px 10px;
+    }
+    .option1{
+        padding: 5px 10px;
+    }
+    .option2 {
+        padding: 5px 10px;
+    }
+    a:visited{
+        color:black;
+        font-size: 14px;
+        font-family:  "ColfaxAl", "Helvetica", sans-serif;;
+
+    }
+    #toggle:checked  ~  .root{
+        display: block;
+    }
+    #toggle{
+        display: none;
+    }
+    label {
+  cursor: pointer;
+        }
+    #id-search{
+    width: 280px;
+    height: 30px;
+    }
+    #id-search::placeholder{
+        font-size: 16px;
+    }
+    form{
+        text-align: center;
+        margin-bottom: 40px;
+    }
+    #search{
+      width: 50px;
+      height: 35px;
+      color: white;
+      background-color: black;
+      cursor: pointer;
+    }
+    #search:hover{
+        background-color: rgb(61, 59, 59);
+    }
+    .game{
+      border-top: rgba(0, 0, 0, 0.3) 1px solid;
+      margin-top: 4px;
+
+    }
+    .game div{
+      display: inline-block;
+      width: 20%;
+      margin-left: 4%;
+      position: relative;
+      border-bottom:none ;
+    }
+    .game div img{
+      width: 100%;
+      background-color: blue;
+      height: 200px;
+    }
+    .game div div{
+      background-color:white;
+      width: 100%;
+      height: 80px;
+      margin-left: 0px;
+      display: inline-block;
+      background-color: white;
+      margin-top: -0px;
+    }
+    .hot-game{
+      border-top: none;
+      border-bottom:none ;
+    }
+  footer {
+    background-color: white;
+    width: 100%;
+    color: black;
+    padding: 20px;
+    text-align: center;
+    margin-top: 60px;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
+    position:absolute;
+    bottom: -10px;
+  }
+  
+  footer nav ul li {
+    margin-right: 10px;
+  }
+  
+  footer nav ul li a {
+    color: black;
+    text-decoration: none;
+  }
+  nav ul {
+    list-style-type: none;
+  }
+  
+  nav ul li {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  
+  li a:hover{
+      color: greenyellow;
+
+  }
+  .ui-button{
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+  }
+  .ui-button button{
+      width: 54px;
+      height: 23px;
+  }
+  button{
+      margin-left: 10px;
+      border: rgba(0, 0, 0, 0.1) 1px solid;
+      border-radius: 5px;
+  }
+  .button-num{
+      width: 38px;
+      height: 23px;
+  }
+  button:hover{
+      background-color: #e4e4e4f8;
+  }
+
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>游戏导航</h1>
+    <div class="user-settings">
+        <input type="checkbox"  id ="toggle">
+        <label for="toggle"><img src="登录头像.png" alt="User Avatar" class="user-avatar"></label>
+        
+        <div class="root">
+        <div class="user-message">
+            <div class="email-message">1234567@qq.com</div>
+        </div>
+        <div class="separator"></div>
+        <div class="user-type"><div class="user">user</div> </div>
+        <div class="separator"></div>
+        <div class="option1"><div><a href="" >编辑用户信息</a></div></div>
+        <div class="option2"> <div><a href="">登出</a></div></div>
+        </div>
+    </div>
+  </div>
+  
+  <div class="container">
+  <h2>游戏搜索</h2>
+  <form action="">
+    <input type="text" id="id-search" placeholder="请输入你想搜索的游戏">
+    <button type="submit" id="search">搜索</button>
+  </form>
+  <div class="game new-game">
+    <h2>搜索结果</h2>
+    <div class="game">
+      <img src="" alt="">
+      <div class="descrip">游戏1描述</div>
+    </div>
+    <div class="game">
+      <img src="" alt="">
+      <div>游戏2描述</div>
+    </div>
+    <div class="game">
+      <img src="" alt="">
+      <div class="descrip">游戏3描述</div>
+    </div>
+    <div class="game">
+      <img src="" alt="">
+      <div class="descrip">游戏4描述</div>
+    </div>
+    <div class="game">
+        <img src="" alt="">
+        <div class="descrip">游戏1描述</div>
+    </div>
+    <div class="game">
+        <img src="" alt="">
+        <div>游戏2描述</div>
+    </div>
+    <div class="game">
+        <img src="" alt="">
+        <div class="descrip">游戏3描述</div>
+    </div>
+
+    <div class="game">
+        <img src="" alt="">
+        <div class="descrip">游戏4描述</div>
+    </div>
+    </div>
+    <div class="ui-button">
+        <button>上一页</button>
+        <button class="button-num">1</button>
+        <button class="button-num">2</button>
+        <button class="button-num">3</button>
+        <button class="button-num">4</button>
+        <button class="button-num">5</button>
+        <button class="button-num">6</button>
+        <button>下一页</button>
+    </div>
+  </div>
+  </div>
+
+  <footer>
+    <p>&copy; 2023 游戏导航网站. 版权所有.</p>
+    <nav>
+      <ul>
+        <li><a href="index.html">首页</a></li>
+        <li><a href="games.html">游戏</a></li>
+        <li><a href="about.html">关于</a></li>
+        <li><a href="contact.html">联系</a></li>
+      </ul>
+    </nav>
+  </footer>
+  </div>
+</body>
+</html>
+
