## 隧道逃生游戏官网：我的踩坑实录
最近心血来潮，想搞个自己的游戏官网，就拿之前做的“隧道逃生”小游戏练练手。说干就干，先定个小目标，把官网的基本框架搭起来。
得选个趁手的工具。我寻思着，静态网站速度快，维护也简单，就决定用HTML+CSS+JavaScript这老三样了。
打开我的Sublime Text，新建一个*文件。、
、这些基本标签先敲进去，然后就是title，meta这些东西，一点点往里加。小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
一个像样的官网，导航栏是必须的。我打算做个简单的，包含“首页”、“游戏介绍”、“下载”、“联系我们”这几个链接。
看起来有点丑，没关系，CSS来拯救。
第三步：CSS美化
新建一个*文件，开始往里堆代码。把导航栏的样式改一下。
css
nav {
background-color: #333;
color: white;
padding: 10px;
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
nav li {
float: left;
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
nav li a:hover {
background-color: #111;
然后在*里引入这个css文件：
刷新页面，导航栏看起来顺眼多了。
第四步：主体内容填充往body里加点东西。先来个游戏介绍的section：
《隧道逃生》是一款刺激的3D跑酷游戏，挑战你的反应速度！
随便找了张游戏截图放进去，看起来像那么回事了。
第五步：下载链接安排下载这块，我直接放个按钮，链接到游戏的下载地址。
样式啥的，后面再慢慢调。
加个简单的尾部信息，版权声明啥的。
CSS样式老是写错，选择器搞不清楚，各种调试。
图片路径问题，一开始图片显示不出来，搞了好久才发现路径写错了。
响应式布局还没做，手机上看起来惨不忍睹，这个后面再慢慢搞。
这回搭官网，虽然是个很简单的东西，但是也学到不少。HTML的结构、CSS的样式，还有一些基本的网页设计原则。打算继续完善这个官网，把响应式布局搞定，再加点JavaScript的交互效果，让它看起来更炫酷！
就这样，继续努力！
