大伙儿晚上今天我又来跟大家唠唠我最近捣鼓的一个小玩意儿——给我自个儿（主要是为了好玩儿）整的一个名叫“帅气的我”的游戏官网。别笑，名字虽然中二了点，但过程还是挺有意思的，记录一下，万一以后忘了。
一切的开端：为啥要搞这个？
起因挺简单的，前阵子不是学了点前端的皮毛嘛总想着找点啥东西练练手。刚好我瞎琢磨了一个特“宏大”的游戏概念（纯属脑洞，能不能实现另说），名字就叫“帅气的我”，感觉不做个官网都对不起这名字，哈哈！于是说干就干，咱也体验一把从零开始建网站的感觉。
第一步：规划和构思
我寻思着，一个游戏官网嘛总得有几个核心页面：
- 首页：肯定得酷炫一点，放个大大的游戏Logo（我自己瞎画的），再来点吸引人的宣传语，比如“一笔一划绘江湖，国风武侠等你来战”这种感觉的，虽然我这游戏跟武侠不沾边，但气势得到位！
- 游戏介绍：这里就得吹吹牛了，讲讲我这“帅气的我”游戏有多好玩，核心玩法是有啥特色系统，比如“武林大会显身手，试炼山庄磨意志”（继续瞎掰）。
- 新闻动态：放点更新日志，活动预告啥的，显得咱这游戏还在运营，哈哈。比如“8.9 限时折扣已开启”、“明天 新版本更新”这种。
- 下载页面：虽然游戏八字还没一撇，但下载按钮得先预留着，万一哪天真做出来了？
- 关于我们/联系方式：留个念想，或者整个粉丝群号啥的，比如“粉丝群972291353现在来了以后就是老粉丝”，仪式感要有。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
内容嘛主要就是我自己瞎编的一些文字，再加上网上找的一些可以免费用的图片，稍微P一下，看着像那么回事就行。
第二步：动手搭建，HTML和CSS走起
工具嘛我就用了最基础的HTML和CSS，没上啥复杂的框架，毕竟是练手，想从根本上理解理解。先吭哧吭哧把HTML结构搭起来，什么<header>、<nav>、<main>、<footer>这些，一个个码这个过程还算顺利，就是有点枯燥，像搭积木一样。
然后就是CSS美化了。这块儿可就折腾我了！一开始想着简单点，结果越搞越想让它“帅气”起来。调颜色、选字体、搞布局，为了一个按钮的悬停效果，我能对着屏幕琢磨半天。尤其是那个首页，我想搞个全屏的背景图，上面再压点文字和按钮，结果图片缩放、文字定位，搞得我头都大了。试了好几种方法，又是绝对定位又是flex布局的，总算是给弄得差不多了。
遇到的小麻烦：
- 图片素材：一开始找的图片要么太小，要么风格不搭，后来花了不少时间在一些免费素材站上淘换，总算凑齐了。
- 浏览器兼容：这个还因为我用的都是比较基础的CSS属性，在Chrome和Edge上看着都还行，就没太折腾别的浏览器了，毕竟是个人项目。
- 响应式设计：这个我偷懒了，主要考虑的是PC端显示效果，手机上嘛……就那样，哈哈，以后有空再优化。
第三步：填充内容，让网站“活”起来
框架搭好了，接下来就是往里面塞肉了。我把我之前瞎编的那些游戏介绍、新闻动态啥的，一段一段复制粘贴进去。为了让页面不那么单调，我还特意找了一些分割线、小图标之类的元素加进去。比如新闻列表，我就模仿着那些资讯网站，搞了个日期加标题的样式。
下载页面，我放了几个假的下载按钮，分别对应“安卓版下载”、“iOS版下载”、“PC版下载”，点击之后嘛……当然是啥也没有，弹出一个“敬请期待”的提示框，也算是增加点互动性。
的效果和总结
折腾了大概三四天，断断续续的，总算是把这个“帅气的我游戏官网”给初步搞出来了。虽然跟我脑子里想的“高大上”还有点差距，功能也简单得很，连个后台都没有，纯静态页面，但看着自己一行行代码敲出来的东西，在浏览器里能跑起来，心里还是挺有成就感的。
这回实践最大的收获就是：
- 对HTML和CSS的理解更深了点，以前看书看视频觉得懂了，真上手了才发现各种小细节要注意。
- 解决问题的能力提高了那么一丢丢，遇到bug不再是抓瞎，知道去网上搜搜，或者自己多试试。
- 耐心也磨练出来了，哈哈，有时候调一个样式能调一下午。
这回实践挺值的。虽然只是个小小的静态官网，但从构思到实现，整个过程都走了一遍。以后再做类似的东西，心里就有底多了。行了，今天就先分享到这儿，下次再有啥好玩的实践再来跟大家唠！
