<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优秀人物人生轨迹整理表</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "微软雅黑", Arial, sans-serif;
}
body {
padding: 20px;
background-color: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: 22px;
}
.desc {
color: #666;
margin-bottom: 15px;
line-height: 1.5;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
vertical-align: top;
}
th {
background-color: #e9ecef;
font-weight: 600;
color: #333;
}
.case-row {
background-color: #f8f9fa;
}
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
min-height: 60px;
font-size: 14px;
color: #333;
}
textarea::placeholder {
color: #999;
font-size: 13px;
}
.serial {
width: 60px;
text-align: center;
}
.name {
width: 120px;
}
.experience {
width: 35%;
}
.choice {
width: 25%;
}
.result {
width: 15%;
}
.trait {
width: 10%;
}
</style>
</head>
<body>
<div class="container">
<h1>优秀人物人生轨迹整理表</h1>
<p class="desc">说明：参考张桂梅案例，选择你敬佩的优秀人物（名人/身边榜样/历史人物等），填写其人生经历、抉择、结果及特质，输入框支持多行编辑。</p>
<table>
<thead>
<tr>
<th class="serial">序号</th>
<th class="name">主人公名称</th>
<th class="experience">有怎样的人生经历</th>
<th class="choice">做出了怎样的人生抉择</th>
<th class="result">是怎样的人生结果</th>
<th class="trait">其它（如人物特质）</th>
</tr>
</thead>
<tbody>
<!-- 案例行 -->
<tr class="case-row">
<td class="serial"><strong>案例</strong></td>
<td class="name">张桂梅</td>
<td class="experience">1972年赴云南参与“三线建设”；1995年丈夫病故后到华坪民族中学教书，患严重子宫肌瘤获捐助救治；2001年任华坪儿童之家福利院院长；2008年创办全国第一所公办免费女子高中，13年家访行程达11万公里，曾摔断肋骨、晕倒在路上。</td>
<td class="choice">响应号召赴滇建设；病愈后投身教育与公益；目睹女孩辍学后决定创办免费女高；面对办学困境坚持不放弃，以家访筑牢教育防线。</td>
<td class="result">创办的免费女高帮助大山女孩走出贫困恶性循环，成为“燃灯校长”，用教育改变无数女孩命运，践行共产党员初心。</td>
<td class="trait">坚韧不拔、信念坚定、无私奉献、心怀大爱、责任担当</td>
</tr>
<!-- 第1行 -->
<tr>
<td class="serial">1</td>
<td class="name"><textarea placeholder="请输入人物姓名（如：袁隆平）"></textarea></td>
<td class="experience"><textarea placeholder="简述关键人生经历，如时间+事件，用分号分隔"></textarea></td>
<td class="choice"><textarea placeholder="列举2-3个核心人生抉择，用分号分隔"></textarea></td>
<td class="result"><textarea placeholder="说明抉择带来的最终成果/影响"></textarea></td>
<td class="trait"><textarea placeholder="提炼3-5个特质，用顿号分隔"></textarea></td>
</tr>
<!-- 第2行 -->
<tr>
<td class="serial">2</td>
<td class="name"><textarea placeholder="请输入人物姓名"></textarea></td>
<td class="experience"><textarea placeholder="简述关键人生经历，如时间+事件，用分号分隔"></textarea></td>
<td class="choice"><textarea placeholder="列举2-3个核心人生抉择，用分号分隔"></textarea></td>
<td class="result"><textarea placeholder="说明抉择带来的最终成果/影响"></textarea></td>
<td class="trait"><textarea placeholder="提炼3-5个特质，用顿号分隔"></textarea></td>
</tr>
<!-- 第3行 -->
<tr>
<td class="serial">3</td>
<td class="name"><textarea placeholder="请输入人物姓名"></textarea></td>
<td class="experience"><textarea placeholder="简述关键人生经历，如时间+事件，用分号分隔"></textarea></td>
<td class="choice"><textarea placeholder="列举2-3个核心人生抉择，用分号分隔"></textarea></td>
<td class="result"><textarea placeholder="说明抉择带来的最终成果/影响"></textarea></td>
<td class="trait"><textarea placeholder="提炼3-5个特质，用顿号分隔"></textarea></td>
</tr>
<!-- 第4行 -->
<tr>
<td class="serial">4</td>
<td class="name"><textarea placeholder="请输入人物姓名"></textarea></td>
<td class="experience"><textarea placeholder="简述关键人生经历，如时间+事件，用分号分隔"></textarea></td>
<td class="choice"><textarea placeholder="列举2-3个核心人生抉择，用分号分隔"></textarea></td>
<td class="result"><textarea placeholder="说明抉择带来的最终成果/影响"></textarea></td>
<td class="trait"><textarea placeholder="提炼3-5个特质，用顿号分隔"></textarea></td>
</tr>
<!-- 第5行 -->
<tr>
<td class="serial">5</td>
<td class="name"><textarea placeholder="请输入人物姓名"></textarea></td>
<td class="experience"><textarea placeholder="简述关键人生经历，如时间+事件，用分号分隔"></textarea></td>
<td class="choice"><textarea placeholder="列举2-3个核心人生抉择，用分号分隔"></textarea></td>
<td class="result"><textarea placeholder="说明抉择带来的最终成果/影响"></textarea></td>
<td class="trait"><textarea placeholder="提炼3-5个特质，用顿号分隔"></textarea></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
index.html
style.css
index.js
index.html