今天跟大家唠唠我这几天搞的“夏日狂欢”游戏官网，整个过程说起来真是又刺激又有趣，简直是一场夏日代码狂欢！
一开始接到这个活儿，有点懵。游戏官网嘛之前也做过一些，但这回甲方爸爸的要求是：要足够吸睛，要足够好玩，要让玩家一眼就想点进去！得了，这不就是让我放飞自我吗？
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
我做的第一件事就是疯狂找灵感。上各种游戏网站溜达，看别人家的官网是怎么做的，配色、布局、动画效果，统统研究了个遍。还特意去看了几个国外的游戏官网，学习一下人家那种酷炫的风格。
就开始着手设计。我先用Photoshop草草地画了个大概的页面布局图，把重要的模块都安排比如：游戏介绍、特色玩法、最新活动、下载链接等等。然后就开始定主色调，夏日嘛肯定要清新活泼一点，选了亮黄色和浅蓝色作为主色调，看起来就很清爽。
然后就开始了漫长的coding环节。我用的是HTML、CSS和JavaScript这老三样。HTML负责搭骨架，CSS负责美化，JavaScript负责让页面动起来。
HTML部分：
我把整个页面分成了几个大的section，每个section对应一个模块。
用了大量的div来做容器，方便CSS布局。
图片素材都用img标签放进去，并且加了alt属性，方便SEO。
所有的链接都用a标签，并且设置了target=”_blank”，在新窗口打开。
CSS部分：
用了大量的Flexbox和Grid布局，让页面在不同尺寸的屏幕上都能自适应。
用CSS3的动画效果，给页面增加了一些动感，比如：鼠标悬停的时候，按钮会发光；图片会缓缓移动等等。
字体方面，选了一款比较活泼的字体，跟整体的风格比较搭。
JavaScript部分：
我用JavaScript实现了一些简单的交互效果，比如：点击导航栏的链接，页面会平滑滚动到对应的section；表单提交的时候，会弹出提示框等等。
还用了一个简单的轮播图插件，展示游戏的宣传图片。
在做的过程中，遇到了不少坑。
图片加载速度慢：因为图片素材比较大，导致页面加载速度很慢。后来我用了图片压缩工具，把图片大小压缩了一半，速度才快了起来。CSS兼容性问题：有些CSS3的属性在不同的浏览器上显示效果不一样。后来我用了autoprefixer，自动给CSS属性加上了各种浏览器前缀，才解决了这个问题。JavaScript代码报错：JavaScript代码写多了，难免会有一些bug。后来我用了Chrome的开发者工具，一点一点地debug，才把bug都找了出来。
经过几天没日没夜的奋战，终于把这个“夏日狂欢”游戏官网给搞定了。看着自己的作品，心里还是挺有成就感的。
我想说的是，做网站就像是盖房子，HTML是地基，CSS是装修，JavaScript是家具。只有把这三样都做才能盖出一栋漂亮的房子。希望我的这回分享，能给大家带来一些帮助。下次再跟大家分享其他的实践记录！
