【 用AI工具0基础快速打造个人网站：从设计到上线全流程（附完整源码）】
·
作为0基础小白，你是否曾因“不懂代码”“不会设计”“不知如何部署”而放弃搭建个人网站？其实，借助AI工具的力量，无需掌握专业技术，3小时内就能从0到1打造出美观、可用的个人网站。本文将拆解需求规划→AI设计→代码生成→部署上线→优化迭代全流程，每个步骤都附具体操作和源码，跟着做就能落地。
一、前期准备：选对工具，0基础也能上手
工欲善其事，必先利其器。0基础搭建网站的核心是“用AI替代复杂操作”，推荐3类必用工具，均为免费或低成本，无需下载安装（网页版即可用）。
| 工具类型 | 推荐工具 | 核心作用 | 优势 |
|---|---|---|---|
| 设计辅助 | Canva（可画）+ MidJourney | 生成网站原型、图标、背景图 | 拖拽式操作，AI生成设计素材，无需设计基础 |
| 代码生成 | ChatGPT 4o / 豆包（代码模式） | 生成HTML/CSS/JS代码，调试bug | 输入自然语言就能出代码，支持解释代码含义 |
| 部署上线 | Vercel / Netlify | 一键部署网站，生成可访问域名 | 无需服务器，免费版足够个人使用，部署速度快 |
工具准备步骤
- 注册上述工具账号：Canva（国内手机号可注册）、ChatGPT（需海外手机号或第三方注册工具）、Vercel（用GitHub账号登录，GitHub注册免费）。
- 明确网站用途：个人简历展示、作品集、博客等（不同用途页面结构不同，本文以“个人简历网站”为例）。
二、第一步：AI辅助需求规划——明确网站“要做什么”
0基础最容易犯的错是“边做边改”，导致效率低下。先让AI帮你梳理需求，确定网站的页面结构和核心功能。
1. 用AI生成需求清单
打开ChatGPT/豆包，输入以下提示词（可直接复制修改）：
我是0基础用户，想搭建一个个人简历网站，目标是让招聘方看到我的经历和技能。请帮我规划：
1. 网站需要包含哪些页面（比如首页、关于我）？
2. 每个页面的核心内容（比如首页要放头像、简介）？
3. 简单的设计风格建议（比如颜色、字体，适合简历的简约风格）？
2. 确定最终需求（以简历网站为例）
根据AI回复，整理出适合0基础的精简结构（避免功能过多导致复杂）：
- 页面数量：3个（首页、关于我、联系我）
- 核心功能：导航栏（跳转页面）、响应式设计（手机/电脑都能看）、联系方式跳转（点击邮箱/电话直接触发）
- 设计风格：简约商务风（主色：深蓝色#165DFF，辅助色：浅灰色#F5F7FA，字体：微软雅黑/Noto Sans SC）
三、第二步：AI辅助设计——生成可视化原型（不用会PS）
设计环节不用写代码，用AI生成素材+拖拽式工具拼原型，10分钟就能出设计稿。
1. 用AI生成设计素材
- 生成头像/背景图：打开MidJourney，输入提示词：“简约商务风格的个人网站背景图，深蓝色和浅灰色配色，无人物，极简线条，适合简历网站”，生成后保存图片。
- 生成图标：打开Canva，搜索“简历图标”（如技能图标、联系方式图标），直接使用AI生成的免费图标，或用Canva的“AI绘图”功能定制。
2. 用Canva制作页面原型
- 打开Canva，搜索“个人网站原型”，选择一个简约模板（推荐“单页简历模板”）。
- 替换模板内容：
- 首页：上传MidJourney生成的背景图，添加自己的头像、姓名、一句话简介（如“前端开发实习生 | 热爱技术与设计”）。
- 关于我页：添加教育经历、技能列表（用Canva图标搭配文字，如“HTML/CSS ✅”“JavaScript ⭐️”）。
- 联系我页：添加邮箱、电话、GitHub链接，用图标标注。
- 调整风格：将模板颜色改为之前确定的“深蓝+浅灰”，字体统一为“微软雅黑”，保存设计稿（后续给AI当参考）。
四、第三步：AI生成网站代码——0代码基础也能看懂
这是核心环节！无需自己写代码，让AI根据设计稿描述生成完整代码，还能让AI解释每段代码的作用。
1. 给AI的“精准提示词”（关键！决定代码质量）
打开ChatGPT/豆包，输入以下提示词（替换括号里的个人信息和设计细节）：
请帮我生成一个个人简历网站的完整HTML/CSS/JS代码，要求如下：
1. 页面结构：3个页面（首页、关于我、联系我），带导航栏（点击可跳转，导航栏在滚动时自动变透明）。
2. 设计风格：简约商务风，主色#165DFF，辅助色#F5F7FA，字体微软雅黑/Noto Sans SC，响应式设计（手机端适配）。
3. 内容细节：
- 首页：顶部Hero区（背景图用深蓝色渐变，添加我的姓名“XXX”、简介“前端开发实习生 | 热爱技术”），下方放3个技能卡片（HTML、CSS、JavaScript，配图标）。
- 关于我页：左侧放头像（圆形），右侧分2栏：教育经历（XX大学 计算机专业 2021-2025）、技能列表（前端：HTML/CSS/JS；工具：Git/VS Code）。
- 联系我页：表单（姓名、邮箱、留言），下方放联系方式（邮箱：xxx@qq.com，电话：138xxxx8888，GitHub链接：https://github.com/xxx）。
4. 技术要求：用HTML5+CSS3+原生JS，引入Bootstrap（简化样式），无需后端，表单暂存本地（提交后提示“留言已收到”）。
5. 输出格式：分页面给出完整代码，每段代码加注释，解释关键部分（如导航栏滚动效果、响应式适配）。
2. 完整源码（AI生成后调整版，可直接复制使用）
以下是3个页面的完整代码，已添加注释，替换括号内的个人信息即可用。
（1）首页代码（index.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 响应式适配：让网站在手机上正常显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XXX的个人网站 - 首页</title>
<!-- 引入Bootstrap：简化样式，不用自己写复杂CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自定义样式：补充Bootstrap未覆盖的部分 */
/* 导航栏样式：默认白色，滚动时变透明 */
.navbar {
transition: background-color 0.3s ease; /* 过渡效果，更流畅 */
background-color: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 轻微阴影，显立体 */
}
.navbar-scrolled {
background-color: rgba(255,255,255,0.9); /* 滚动后透明 */
}
/* Hero区样式：深蓝色渐变背景 */
.hero {
height: 80vh; /* 占屏幕80%高度 */
background: linear-gradient(135deg, #165DFF 0%, #0F48C9 100%);
color: white;
display: flex; /* 垂直居中 */
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
}
/* 技能卡片样式：hover时上浮 */
.skill-card {
transition: transform 0.3s ease;
border: none; /* 去掉默认边框 */
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.skill-card:hover {
transform: translateY(-5px); /* 上浮5px */
}
</style>
</head>
<body>
<!-- 导航栏：跳转3个页面 -->
<nav class="navbar navbar-expand-lg fixed-top" id="navbar">
<div class="container">
<a class="navbar-brand" href="index.html">XXX的个人网站</a>
<!-- 手机端导航：折叠成汉堡菜单 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto"> <!-- 右对齐导航项 -->
<li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">关于我</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">联系我</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero区：首页核心内容 -->
<section class="hero">
<div class="container">
<h1 class="display-4 fw-bold mb-4">XXX</h1>
<p class="lead mb-5">前端开发实习生 | 热爱技术与设计 | 持续学习中</p>
<!-- 按钮：跳转至“关于我”页 -->
<a href="about.html" class="btn btn-light btn-lg">了解我的经历</a>
</div>
</section>
<!-- 技能展示区 -->
<section class="py-10">
<div class="container">
<h2 class="text-center mb-8">我的核心技能</h2>
<div class="row g-4"> <!-- Bootstrap栅格：每行3个卡片，手机端1个 -->
<!-- 技能卡片1：HTML -->
<div class="col-md-4">
<div class="card skill-card h-100">
<div class="card-body text-center">
<h5 class="card-title fs-3 mb-3">HTML5</h5>
<p class="card-text text-muted">熟练使用语义化标签，构建规范的页面结构</p>
</div>
</div>
</div>
<!-- 技能卡片2：CSS -->
<div class="col-md-4">
<div class="card skill-card h-100">
<div class="card-body text-center">
<h5 class="card-title fs-3 mb-3">CSS3</h5>
<p class="card-text text-muted">掌握Flex/Grid布局，实现响应式设计</p>
</div>
</div>
</div>
<!-- 技能卡片3：JavaScript -->
<div class="col-md-4">
<div class="card skill-card h-100">
<div class="card-body text-center">
<h5 class="card-title fs-3 mb-3">JavaScript</h5>
<p class="card-text text-muted">能实现基础交互（如表单验证、页面动画）</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 引入Bootstrap JS：实现导航栏折叠、交互效果 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 导航栏滚动效果：滚动时添加透明类
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) { // 滚动超过50px时
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
</script>
</body>
</html>
（2）关于我页面代码（about.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XXX的个人网站 - 关于我</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 复用导航栏样式 */
.navbar {
transition: background-color 0.3s ease;
background-color: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar-scrolled {
background-color: rgba(255,255,255,0.9);
}
/* 关于我区域样式 */
.about-section {
padding: 120px 0 80px; /* 顶部留导航栏空间 */
background-color: #F5F7FA; /* 浅灰色背景 */
}
/* 头像样式：圆形 */
.avatar {
width: 200px;
height: 200px;
border-radius: 50%; /* 圆形 */
object-fit: cover; /* 避免图片变形 */
border: 5px solid white;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* 经历列表样式 */
.experience-list {
list-style: none;
padding: 0;
}
.experience-list li {
margin-bottom: 15px;
padding-left: 25px;
position: relative;
}
.experience-list li::before {
content: "•"; /* 自定义列表符号 */
color: #165DFF;
font-size: 1.5rem;
position: absolute;
left: 0;
top: -5px;
}
</style>
</head>
<body>
<!-- 导航栏（复用首页代码） -->
<nav class="navbar navbar-expand-lg fixed-top" id="navbar">
<div class="container">
<a class="navbar-brand" href="index.html">XXX的个人网站</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">首页</a></li>
<li class="nav-item"><a class="nav-link active" href="about.html">关于我</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">联系我</a></li>
</ul>
</div>
</div>
</nav>
<!-- 关于我核心内容 -->
<section class="about-section">
<div class="container">
<div class="row align-items-center">
<!-- 左侧：头像 -->
<div class="col-md-4 text-center mb-5 mb-md-0">
<img src="你的头像链接" alt="XXX的头像" class="avatar">
</div>
<!-- 右侧：经历与技能 -->
<div class="col-md-8">
<h2 class="mb-4">关于我</h2>
<p class="text-muted mb-5">我是XXX，目前就读于XX大学计算机科学与技术专业，预计2025年毕业。喜欢前端开发，擅长用简单的代码实现美观的交互效果，希望能成为一名优秀的前端工程师。</p>
<!-- 教育经历 -->
<h4 class="mb-3 text-primary">教育经历</h4>
<ul class="experience-list mb-5">
<li>XX大学 | 计算机科学与技术 | 本科 | 2021.09 - 2025.06</li>
<li>主修课程：Web前端开发、数据结构、计算机网络、JavaScript高级程序设计</li>
</ul>
<!-- 技能列表 -->
<h4 class="mb-3 text-primary">技能栈</h4>
<div class="row g-3">
<div class="col-sm-6">
<h5>前端技术</h5>
<ul class="experience-list">
<li>HTML5/CSS3：语义化标签、Flex/Grid布局、响应式设计</li>
<li>JavaScript：DOM操作、事件处理、基础算法</li>
<li>框架/工具：Bootstrap、Git、VS Code</li>
</ul>
</div>
<div class="col-sm-6">
<h5>软技能</h5>
<ul class="experience-list">
<li>沟通能力：能清晰表达技术方案</li>
<li>学习能力：快速掌握新工具（如AI代码生成工具）</li>
<li>协作能力：参与过2次小组项目开发</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 导航栏滚动效果（复用首页代码）
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
</script>
</body>
</html>
（3）联系我页面代码（contact.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XXX的个人网站 - 联系我</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 复用导航栏样式 */
.navbar {
transition: background-color 0.3s ease;
background-color: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar-scrolled {
background-color: rgba(255,255,255,0.9);
}
/* 联系区样式 */
.contact-section {
padding: 120px 0 80px;
}
/* 表单样式 */
.contact-form {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
/* 联系方式卡片样式 */
.contact-card {
border: none;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
height: 100%;
}
</style>
</head>
<body>
<!-- 导航栏（复用首页代码） -->
<nav class="navbar navbar-expand-lg fixed-top" id="navbar">
<div class="container">
<a class="navbar-brand" href="index.html">XXX的个人网站</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">首页</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">关于我</a></li>
<li class="nav-item"><a class="nav-link active" href="contact.html">联系我</a></li>
</ul>
</div>
</div>
</nav>
<!-- 联系我核心内容 -->
<section class="contact-section">
<div class="container">
<h2 class="text-center mb-10">联系我</h2>
<div class="row g-5">
<!-- 左侧：留言表单 -->
<div class="col-md-7">
<div class="contact-form">
<h4 class="mb-4">给我留言</h4>
<form id="contactForm">
<!-- 姓名输入框 -->
<div class="mb-3">
<label for="name" class="form-label">姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输入你的姓名" required>
</div>
<!-- 邮箱输入框 -->
<div class="mb-3">
<label for="email" class="form-label">邮箱</label>
<input type="email" class="form-control" id="email" placeholder="请输入你的邮箱" required>
</div>
<!-- 留言输入框 -->
<div class="mb-3">
<label for="message" class="form-label">留言内容</label>
<textarea class="form-control" id="message" rows="4" placeholder="请输入你的留言" required></textarea>
</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary btn-lg">提交留言</button>
</form>
</div>
</div>
<!-- 右侧：联系方式 -->
<div class="col-md-5">
<div class="card contact-card">
<div class="card-body p-5">
<h4 class="mb-4">我的联系方式</h4>
<ul class="list-unstyled">
<!-- 邮箱 -->
<li class="mb-4">
<h5 class="text-primary mb-1">邮箱</h5>
<a href="mailto:xxx@qq.com" class="text-muted">xxx@qq.com</a>
</li>
<!-- 电话 -->
<li class="mb-4">
<h5 class="text-primary mb-1">电话</h5>
<a href="tel:138xxxx8888" class="text-muted">138xxxx8888</a>
</li>
<!-- GitHub -->
<li class="mb-4">
<h5 class="text-primary mb-1">GitHub</h5>
<a href="https://github.com/xxx" target="_blank" class="text-muted">github.com/xxx</a>
</li>
<!-- 地址 -->
<li>
<h5 class="text-primary mb-1">地址</h5>
<p class="text-muted">XX省XX市XX区XX路XX号</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 导航栏滚动效果（复用首页代码）
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
// 表单提交效果：本地提示（无后端）
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交（避免刷新页面）
// 显示成功提示
alert('留言已收到！我会尽快回复你~');
// 重置表单
this.reset();
});
</script>
</body>
</html>
五、第四步：代码调整与本地验证——确保网站能正常运行
AI生成的代码可能存在细节问题（如图片链接失效、个人信息未替换），需要简单调整并在本地测试。
1. 代码调整步骤
- 替换个人信息：
- 姓名、简介、教育经历、联系方式（邮箱、电话、GitHub链接）。
- 图片链接：将“你的头像链接”替换为实际图片（推荐用Canva上传头像后，右键“复制图片地址”）。
- 修复可能的bug：
- 如果导航栏不跳转：检查
href属性是否与文件名一致（如href="about.html"对应about.html文件）。 - 如果样式错乱：检查Bootstrap CDN链接是否正确（代码中已提供正确链接，无需修改）。
- 如果导航栏不跳转：检查
2. 本地验证方法（不用服务器）
- 在电脑上新建一个文件夹（如“个人网站”），将3个HTML文件（
index.html、about.html、contact.html）放入文件夹。 - 双击任意HTML文件，会用默认浏览器打开（如Chrome、Edge），查看：
- 页面是否正常显示（无空白、无乱码）。
- 导航栏是否能跳转、滚动时是否变透明。
- 表单提交是否弹出提示。
- 手机端验证：在电脑浏览器中按
F12打开“开发者工具”，点击左上角“手机图标”，切换为手机视图，检查响应式效果。
六、第五步：AI辅助部署上线——一键生成可访问域名
本地测试没问题后，用Vercel部署上线，别人就能通过域名访问你的网站。
1. 准备：创建GitHub仓库（存放代码）
- 打开GitHub（https://github.com/ ），登录账号，点击右上角“+”→“New repository”。
- 填写仓库信息：
- Repository name：输入仓库名（如“my-personal-website”）。
- Description：可选，输入“我的个人网站”。
- 勾选“Public”（免费），点击“Create repository”。
- 上传代码：
- 进入新建的仓库，点击“Add file”→“Upload files”，选择“个人网站”文件夹中的3个HTML文件，点击“Commit changes”。
2. 用Vercel部署（一键上线）
- 打开Vercel（https://vercel.com/ ），用GitHub账号登录（授权Vercel访问GitHub仓库）。
- 点击“New Project”→“Import from GitHub”，选择刚才创建的仓库（如“my-personal-website”）。
- 部署设置：
- Framework Preset：选择“Other”（因为是纯HTML/CSS/JS）。
- Build and Output Settings：无需修改，保持默认。
- 点击“Deploy”，等待1-2分钟，部署完成后会生成一个免费域名（如
my-personal-website.vercel.app）。 - 访问网站：点击生成的域名，就能在手机、电脑上访问你的个人网站了！
七、第六步：后期优化——用AI提升网站质量
网站上线后，可借助AI进一步优化功能和体验，0基础也能操作。
1. 功能扩展（AI生成代码）
- 增加博客功能：让AI生成“博客列表页”“博客详情页”代码，提示词：“给我的个人网站添加博客功能，包含博客列表页（显示标题、日期、摘要）和博客详情页（显示完整内容），代码风格与现有页面一致”。
- 增加访客统计：让AI生成“百度统计”嵌入代码，提示词：“帮我生成百度统计的嵌入代码，添加到个人网站的每个页面，用于统计访客数量”。
2. SEO优化（让网站更容易被搜索到）
- 让AI生成SEO标签：输入提示词“帮我的个人网站生成SEO优化的meta标签，包含关键词（如‘XXX 前端开发实习生 个人简历’）、描述（100字内），添加到每个HTML文件的head标签中”。
- 示例meta标签（添加到
<head>中）：
<!-- SEO优化标签 -->
<meta name="keywords" content="XXX, 前端开发实习生, 个人简历, Web开发">
<meta name="description" content="XXX的个人网站，展示前端开发实习生的教育经历、技能栈和联系方式，寻求前端相关实习机会。">
<meta name="author" content="XXX">
3. 性能优化（让网站加载更快）
- 图片压缩：用Canva打开图片，点击“下载”→选择“压缩图片”，重新替换图片链接。
- 延迟加载：让AI生成图片延迟加载代码，提示词：“帮我的个人网站添加图片延迟加载功能，优化页面加载速度，代码适配现有页面”。
八、常见问题FAQ（0基础必看）
-
部署后网站空白？
检查GitHub仓库中的文件名是否正确（如index.html不能错为Index.html，区分大小写），重新部署一次。 -
想修改域名？
在Vercel中进入项目，点击“Settings”→“Domains”，输入自定义域名（需先购买域名，如阿里云、腾讯云购买），或使用Vercel提供的免费域名（修改后缀）。 -
AI生成的代码看不懂？
复制不懂的代码片段，问ChatGPT/豆包：“解释这段代码的作用，用0基础能听懂的语言”，AI会逐行解释。
总结：0基础搭建网站的核心逻辑
借助AI工具，0基础搭建个人网站的核心是“用AI替代专业技能”——AI帮你规划需求、生成设计、写代码、甚至调试bug，你只需做“选择题”（选模板、改信息）和“验证题”（本地测试、部署）。
按照本文流程，3小时内就能拥有一个属于自己的个人网站，无论是求职、展示作品还是分享博客，都能让你在互联网上拥有专属名片。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
17
0- 0
已为社区贡献3条内容
所有评论(0)