没有那么多新的游戏爱好者利用HTML 5和CSS 3技术的力量。一些比较流行的游戏标题，如最终幻想和王国之心有一群忠实的追随者。一个庞大的粉丝群将伴随论坛和其他在线留言板-但这并不总是最成功的CMS解决方案。

合肥建网站在本教程中，我想演示如何使用一些更新的CSS 3技巧构建一个简单的复古Pokemon Fansite布局。为了保持模板的简单性，我没有包含任何额外的jQuery效果。尽管不可否认，在主页上存在着这样一个下拉菜单或滑动面板系统的空间。此外，我还包括了一些雪碧资源从第二代游戏中撕下来。

HTML 5文档类型和CSS字体

我们首先可以查看页面标题和内部元标记。我使用HTML 5文档类型设置了网页，并配置了视口元标记值移动用户将体验类似的布局风格，或甚至可以选择移植到移动特定的设计。

头代码中有几个标记，其中包括两个单独的样式表。第一个被命名为styles.css其中包括所有基本页面默认值。在下面，我有一个外部引用，用于定制GoogleWeb字体样式表包括两个字体系列“Acme”和“Gorditas”。这是一个简单的方法，使用开放CSS字体来构建您自己独特的设计。

请注意，我还包括一些外部库，只有在浏览器版本小于InternetExplorer 9的情况下，在IE中发现了无数错误，它们没有正确地呈现一些新的HTML 5元素。这段代码对于真正的向后兼容性来说是一个很好的解决方案。

外部页面结构

在body元素中，我用ID“包装”将所有内容包装在div容器中。这一点很重要，因为我们希望为较小的浏览器和更大的监视器分辨率支持特定的有限宽度。然后包装内的所有东西都会出现流体，直到某个断点。

顶层部分使用的是标题和NAVHTML 5元素。这使得CSS目标更加容易，因为我们不需要标记ID或类。另外，h1标签中的徽标使用的是自定义导入字体，稍后我将对此进行更详细的解释。

没有导航链接到任何地方，因为我没有构建任何内部页面。大部分核心主体内容由段落标记和标头元素组成。当你提出自己的想法时，就有可能建立起如此多的其他变体，包括2或3列布局。

最后一段代码是在整个正文内容部分之后找到的。我使用HTML 5页脚标签封装版权署名和其他重要的网站链接。使用这种doctype，很容易按照标准规则创建一个系统的网站示意图。

用CSS 3设计

默认样式表中有大量示例引用更新的CSS 3属性。首先，我想指出一些基本的重置，这是我从一开始就包含的。

通常的做法是从所有浏览器系统中删除所有默认的边距和填充。我在Body元素上重新应用了一些填充，我们使用的是一个定制的平铺背景图像。您可能会注意到::selection目标用于覆盖高亮效果。当您在页面上选择文本时，您将得到一个明亮的绿色背景，而不是典型的蓝色高亮。

此外，Header元素使用一个长背景图像充当页面本身的横幅。我已经将世界地图精灵组合成一个长图像，最大宽度设置为920像素。为了添加一些额外的特殊样式，我应用了一个轻微的框阴影和圆形边框效果。

自定义@字体导入

顶部标头标签显示一些非常独特的自定义CSS 3样式。我们可以通过导入显示为同一名称的各种字体类型文件来实现这一点。字体族。在这种情况下我用凯彻姆与原来的口袋妖怪标志相匹配。

在这个模板的根目录中，我创建了一个名为“字体”的子文件夹。我们需要至少包括一个EOT，TTF，WOFF或SVG文件类型。我用了一个很棒的用于转换web字体的联机工具每天都是免费的。在样式表中配置Ketchum字体意味着我可以在文档中的任何地方引用字体家族值。

注意，我也应用了一个气泡阴影效果，从后面的标志文本。就在这两个效果之间，我们可以构建一个真正的动态徽标，它看起来很棒，呈现在浏览器窗口中。这当然不是一种可以在每个网站上工作的技术。但它更方便用户，并提供了一个特殊的演示自定义CSS字体技术。

导航链接

只有两个重要部分涉及导航链接。首先是直接在标题区域下面，我正在使用我们的自定义谷歌字体之一，并再次在页脚下面。

每个锚元素的行为都是一个块，具有不可见的背景设置。当你悬停在链接上时，每种字体都会改变成更深的颜色和更生动的绿色。动态字体选择和黑色文本阴影使这个导航菜单真的弹出。这是超级容易定制您自己的下拉菜单或次级链接相应。

以类似的设计方式，页脚链接被分割为浮动在一行中的块级元素。然而，我采用了一种更简单的方法来保持文本在悬停状态下的下划线。页脚区域通常是与站点相关的管理链接的位置。这可能意味着与其他菜单相比，它们不需要太多的关注或华丽的个性化。

标题和雪碧图标

最后一段要查看的代码围绕着不同的内部页面标题。我在H1元素中加入了几个不同的类，这些元素在左侧附加了一个不同的背景图像。

使用这组类，我们可以用基于像素的图标构建一个完整的自定义标题库。默认情况下，我使用Pikachu、Chansey、SnorLax和典型的Pokeball图标设置了四个类。但很明显，你可以选择和你自己最喜欢的阴间精灵混搭在一起。

最后要注意的一点是，我正在使用我们的定制阿克梅所有内容标题的字体。可能很难根据您应用的字体堆栈添加这些单独的图标。这绝对是一个很酷的效果，你不可能在任何地方找到。但是不要过分使用像素精灵，因为过高的风格会让人感到重复，有时会让人分心。

结语

对于初学者到中级的web开发人员来说，这个布局的所有代码都很容易理解.合肥建网站希望本教程能为全球的游戏玩家和热情的网站管理员提供灵感。互联网上有足够的空间供类似的网站使用，专门用于更不受欢迎的游戏标题。请随意下载我的源代码，自己玩模板样式。