最近不是挺火那个《夏日狂想曲》嘛看着别人玩得挺嗨，手痒痒也想搞一个自己的官网玩玩，就当练手了。说干就干，直接开搞！
第一步：先找资源！
- 上网搜罗一圈，找找游戏相关的图片、视频、还有一些背景音乐啥的。
- 官网嘛总得有点素材，不能干巴巴的。
- 莉音的图片是真不好找，费了老劲了。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
第二步：搭框架！
我用的是VSCode，贼顺手。先建个文件夹，里面放HTML、CSS、JS三个文件。HTML负责内容，CSS负责美化，JS负责一些小互动。
HTML文件，先把基本的骨架搭起来：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>夏日狂想曲官网</title>
<link rel="stylesheet" href="*">
</head>
<body>
<!-- 这里放内容 -->
<script src="*"></script>
</body>
</html>
第三步：填充内容！
官网肯定得有标题、介绍、角色介绍、游戏截图啥的。我简单分了几个section：
- 首页：放了个大大的游戏标题和宣传图，吸引眼球。
- 游戏介绍：简单介绍了游戏是讲了个啥故事。
- 角色介绍：把几个主要角色（比如莉音）的立绘放上去，简单介绍下。
- 游戏截图：放了几张游戏截图，让大家看看游戏画面。
- 下载地址：这个就先空着，毕竟不是正规渠道。
第四步：美化界面！
CSS登场！主要就是调颜色、改字体、排版啥的。我用了点夏日风格的配色，比如浅蓝色、淡黄色，看着清爽。
- 背景：找了个夏日风景的图片当背景，感觉一下就出来了。
- 字体：换了个比较可爱的字体，符合游戏风格。
- 排版：用Flexbox和Grid把内容排得整整齐齐，看着舒服。
第五步：加点小互动！
JS不能闲着，加了点小动画，比如鼠标悬停在角色头像上的时候，头像会稍微放大一点。还搞了个简单的轮播图，展示游戏截图。
第六步：调试！
完事儿之后，用浏览器打开HTML文件，看看效果。肯定会有各种问题，比如图片显示不出来，排版乱了之类的，一点点改。
第七步：完工！
改到自己满意了，就差不多了。虽然简陋了点，但好歹也是个官网的样子了。以后有空再慢慢完善。
总结
这回做《夏日狂想曲》官网，主要是想练练手，熟悉一下HTML、CSS、JS的用法。虽然做的很粗糙，但是也学到不少东西。以后有机会，再搞点更复杂的！
