diff --git a/shangpin.html b/shangpin.html
new file mode 100644
index 0000000..495b7bf
--- /dev/null
+++ b/shangpin.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <title>校园二手交易平台 - 商品详情</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="bg-gray-100 text-gray-800">
+<div class="flex min-h-screen">
+    <!-- 左侧标题栏 -->
+    <aside class="bg-blue-600 text-white w-1/4 p-6 min-h-full">
+        <div class="flex flex-col items-center">
+            <h1 class="text-2xl font-bold mb-6">校园二手交易</h1>
+            <nav class="flex flex-col space-y-4">
+                <a href="index.html" class="hover:underline">主页</a>
+                <a href="profile.html" class="hover:underline">个人信息</a>
+                <a href="product.html" class="hover:underline">商品预览</a>
+            </nav>
+        </div>
+    </aside>
+
+    <!-- 内容 -->
+    <main class="w-3/4 p-8">
+        <section id="product-detail" class="p-4 bg-white rounded shadow-lg h-full">
+            <h2 class="text-3xl font-bold mb-4">商品详情</h2>
+            <div class="flex flex-col md:flex-row">
+                <!-- 商品图片 -->
+                <div class="md:w-1/2 mb-6 md:mb-0 md:mr-6">
+                    <div class="h-64 md:h-96 bg-gray-300 rounded"></div>
+                </div>
+
+                <!-- 商品信息 -->
+                <div class="md:w-1/2">
+                    <h3 class="text-2xl font-semibold mb-2">商品名称</h3>
+                    <p class="text-lg text-gray-700 mb-4">价格：<span class="text-red-600 font-bold">¥200</span></p>
+                    <p class="text-gray-700 mb-6">商品描述：这是一款质量良好的二手商品，适合学生使用，物美价廉，欢迎咨询购买。</p>
+
+                    <!-- 联系和购买按钮 -->
+                    <div class="flex space-x-4">
+                        <button class="bg-blue-600 text-white px-5 py-2 rounded">联系卖家</button>
+                        <button class="bg-green-500 text-white px-5 py-2 rounded">立即购买</button>
+                    </div>
+                </div>
+            </div>
+
+            <!--额外信息或推荐其他商品 -->
+            <div class="mt-8">
+                <h4 class="text-xl font-semibold mb-4">推荐商品</h4>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-white p-4 rounded shadow">
+                        <div class="h-40 bg-gray-200 rounded mb-4"></div>
+                        <h5 class="text-lg font-semibold">推荐商品1</h5>
+                        <p>价格：¥100</p>
+                        <a href="#" class="text-blue-600 hover:underline">查看详情</a>
+                    </div>
+
+                    <div class="bg-white p-4 rounded shadow">
+                        <div class="h-40 bg-gray-200 rounded mb-4"></div>
+                        <h5 class="text-lg font-semibold">推荐商品2</h5>
+                        <p>价格：¥150</p>
+                        <a href="#" class="text-blue-600 hover:underline">查看详情</a>
+                    </div>
+
+                    <div class="bg-white p-4 rounded shadow">
+                        <div class="h-40 bg-gray-200 rounded mb-4"></div>
+                        <h5 class="text-lg font-semibold">推荐商品3</h5>
+                        <p>价格：¥120</p>
+                        <a href="#" class="text-blue-600 hover:underline">查看详情</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+</div>
+
+<!-- 页脚 -->
+<footer class="bg-gray-800 p-4 text-white text-center">
+    ©2023 校园二手交易平台. 保留所有权利.
+</footer>
+</body>
+
+</html>
\ No newline at end of file
