大伙儿今天得空,给大家唠唠我最近瞎捣鼓的一个小玩意儿——一个叫“七宗罪”主题的HTML游戏官网。也不是啥正经游戏,就是拿HTML练练手,搭个官网的架子,自娱自乐呗。
一切的开始:脑子一热
事情是这样的,最近也不知道咋回事,老在网上瞅见“七宗罪”这几个字儿。什么电影、小说、还有人讨论游戏。我寻思着,这概念挺带感,傲慢、嫉妒、暴食、懒惰、贪婪、淫欲、愤怒,听着就挺有故事性。作为一个爱折腾代码的,我就想,干脆自己动手搞个相关的网页玩玩,不用太复杂,就用最基础的HTML,搭个所谓的“官网”框架,看看能整成啥样。
动手前的规划:先画个道道
说干就干,我先没急着敲代码。我先琢磨了一下这个“官网”得有啥。既然叫“七宗罪”,那肯定得把这七个“罪”给列出来当主要内容。然后得有个像样的首页,介绍一下这是个我还想,每个“罪”是不是可以有个单独的说明区域,以后万一真想给每个“罪”配个小互动或者小故事,也好往里填东西。
我初步的规划是这样的:
小编温馨提醒:本站只提供游戏介绍,下载游戏推荐89游戏,89游戏提供真人恋爱/绅士游戏/3A单机游戏大全,点我立即前往》》》绅士游戏下载专区
- 一个主页面(就叫它 `*` ,老规矩了)。
- 主页面上,先来个醒目点的标题,告诉别人这是“七宗罪”相关的。
- 然后,列出七宗罪的条目,让它们看起来像个导航似的,但初期就是一堆文字。
- 每个“罪”的条目下面,我打算先放点占位符性质的描述,以后再慢慢想具体内容。
重点是,我就想用最简单的HTML标签来实现,什么 `
` 写段落,`
` 做小标题,`` `- ` 搞个列表,这些就够了。太花哨的功能,暂时不考虑,先把骨架搭起来。
实践过程:码代码的那些事儿
规划得差不多了,我就打开了我的文本编辑器,新建了一个 `*` 文件。先是噼里啪把HTML的基本结构给敲上去了,什么 ``、`
`、`` 这些,算是热身运动。
在 `
` 里面,我加了个 ``,写上“七宗罪 - 官方概念网站”,这样浏览器标签页上看着也像那么回事儿。然后,为了让中文显示正常,`charset=UTF-8` 这个 `meta` 标签也少不了。
接着就是 `` 里的正戏了:
我先用个 `
` 写了个大体的网站名,比如“七宗罪:欲望深渊”(瞎起的,感觉酷就行)。
然后,我琢磨着怎么展示这七宗罪。一开始我想的是每个罪做一个单独的HTML页面,但后来一想,就为了个名头,搞那么多文件也麻烦,干脆先全放一个页面里,用 `
` 标签把每个罪名作为小标题列出来,这样也清楚。
我的结构大概是这样:
一个总的说明区域,用 `
` 标签写了几句开场白,大致就是说“欢迎来到七宗罪的世界,这里将揭示人性的阴暗面”之类的,烘托下气氛。
然后就是重头戏,七宗罪的展示:
傲慢 (Pride)
这里是一些关于傲慢的描述文字,暂时先随便写点,以后再填充具体游戏概念。
嫉妒 (Envy)
嫉妒的描述,同样先占个坑。
- ...依此类推,把七个罪名和对应的描述区域都用 `
` 和 `
` 标签给整了出来。
为了让页面不那么素净,我还稍微加了点内联样式。比如给 `` 加个深色的背景,文字用浅色,这样看起来神秘一点。给 `
` 标签也稍微调了调颜色和字体大小。没用外部CSS文件,图省事,直接在标签里写 `style="..."` 或者在 `` 里加个 `
实践过程:码代码的那些事儿
规划得差不多了,我就打开了我的文本编辑器,新建了一个 `*` 文件。先是噼里啪把HTML的基本结构给敲上去了,什么 ``、`
`、`` 这些,算是热身运动。在 `
` 里面,我加了个 `接着就是 `` 里的正戏了:
我先用个 `
` 写了个大体的网站名,比如“七宗罪:欲望深渊”(瞎起的,感觉酷就行)。
然后,我琢磨着怎么展示这七宗罪。一开始我想的是每个罪做一个单独的HTML页面,但后来一想,就为了个名头,搞那么多文件也麻烦,干脆先全放一个页面里,用 `
` 标签把每个罪名作为小标题列出来,这样也清楚。
我的结构大概是这样:
一个总的说明区域,用 `
` 标签写了几句开场白,大致就是说“欢迎来到七宗罪的世界,这里将揭示人性的阴暗面”之类的,烘托下气氛。
然后就是重头戏,七宗罪的展示:
傲慢 (Pride)
这里是一些关于傲慢的描述文字,暂时先随便写点,以后再填充具体游戏概念。
嫉妒 (Envy)
嫉妒的描述,同样先占个坑。
- ...依此类推,把七个罪名和对应的描述区域都用 `
` 和 `
` 标签给整了出来。
为了让页面不那么素净,我还稍微加了点内联样式。比如给 `` 加个深色的背景,文字用浅色,这样看起来神秘一点。给 `