一开始我就是好奇，网上老有人说"七宗罪HTML版本"，可搜来搜去全是零碎信息，干脆自己动手整理个大全。打开笔记本先列了个清单，把能找到的版本都记下来，结果发现主要分三大类。
基础文字版
第一个版本最简单，直接打开记事本就开始敲代码。用ul标签列了傲慢、嫉妒、暴怒等七个条目，每个罪宗后面加个p标签写说明。
- 三分钟搞定，复制粘贴就能用
- 浏览器从IE6到最新版都能打开
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 丑得没法看，白底黑字像说明书
- 手机上看排版全乱套
CSS美化版
不服气，打开VSCode重新搞。给每个罪宗加了div盒子，调了渐变色背景，鼠标移上去还有翻转效果。嫉妒用绿色，贪婪用金色，色欲用粉红色...
这回进步在于：
- 终于像个人样了，发朋友圈有人点赞
- 响应式设计自动适配手机
没想到栽跟头了：
- 调色方案改了二十几遍才顺眼
- 老板说要打印出来，结果背景色全变灰
动态交互版
折腾JavaScript版。点击罪宗图标会弹出动画解说，加了进度条显示罪恶值，还弄了个"忏悔按钮"。
炫是真炫：
- 同事看到直呼高级
- 每个罪宗能单独展开详情
半夜改代码改到哭：
- 苹果手机滑动卡成PPT
- 老电脑打开要加载十几秒
- 代码多到我自己都看不懂
搞完这三个版本瘫在椅子上，发现根本没有所谓"完美版本"。要快速传播选文字版，要展示效果用CSS版，想装X才用JS版。早知道一开始就不该信什么"大全"，自己试过才知道坑有多深！
