最近魔塔少女这游戏太戳我了，琢磨了几天，决定整个官网过把瘾。说干就干，先打开电脑，对着浏览器一顿乱戳，想看看其他独立游戏官网啥样儿，结果看了一圈脑子更乱了，风格五花八门的。
一、脑子一热先动手
不管三七二十一，我直接打开了那个写代码的软件。新建文件夹？好家伙，名字就叫魔塔少女_官网。新建文件，手指头敲了个，这就算是开头了。我寻思着，得先整点能看见的东西？抄起键盘就开始敲，<!DOCTYPE html> 先怼上去，再把 <html>、<head>、<body> 这些基本框架堆起来。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
二、瞎搞布局与撞墙
我想着官网嘛总得有个大大的头图？在<body>里面咣当建了个<header>，捣鼓半天想放张酷炫的游戏主视觉图。上传图片，写路径，结果浏览器一片空白！拍了下脑门才反应过来，图片没放对地方。折腾半天，路径搞对了，图是出来了，可位置丑得跟被打了一拳似的。又手忙脚乱去搞CSS文件。
新建，开始瞎写：
- 让整个页面背景色深点，background-color: #1a1a2e; 敲上。
- 头部图？得width: 100%撑开！
- 下面想放点文字介绍？塞几个<div>盒子，然后margin: auto;居中？
写完刷新一看，得，文字都挤成一团，盒子大小没控制
三、硬着头皮磨细节
最难熬的部分来了。我想做个导航栏，就那种横着排一排的按钮。在<header>底下又整了个<nav>标签。里面敲了几个<a href="#">首页</a>这样的链接标签。CSS里写了display: flex;想让它们排排站，加了个justify-content: space-around;想搞点间隔。结果？按钮都挤在最左边，像个委屈巴巴的小学生队伍。
咬着牙调了半天，才发现有个<div>没设置宽度，盒子宽度不够，当然伸展不开！加了width设置后，总算勉强排列开了。又给按钮加了点padding让它们胖点，hover时加了点颜色变化，有点那意思了。
四、塞点能看的玩意儿
布局有点人样了，总得有内容？在主体区域开始鼓捣：
- 抄起<h1>标签写上大大的《魔塔少女》游戏名。
- 下面<section>分区块，介绍游戏特色，简单粗暴打几个小标题<h2>，再加点口水话描述。
- 角色展示咋整？又弄个区域，整几个<div class="dzx605c-a8b0-0835-3e32 character">，每个里面放个角色图的<img>加一小段文字<p>。
图片大小参差不齐，简直逼死强迫症。只能一张一张用width: 180px; height: 250px;手动约束尺寸，累得够呛。然后发现一堆小盒子歪歪扭扭，查了下 CSS，原来是display: inline-block; 忘记设置了。
五、手机看又崩了！
电脑上看着挺美了，嘚瑟地用手机打开网页一看，我滴妈！布局全炸了，头像叠罗汉，文字都挤成豆芽菜。这才想起来响应式这个鬼东西还没弄。翻出教程，赶紧加了一堆：
- @media screen and (max-width: 768px) { ... }
- 把导航栏改成flex-direction: column;竖着排。
- 角色展示？改成flex-wrap: wrap;让盒子自动换行。
- 调字体font-size，小屏幕时给文字缩点水。
反复用手机刷新、调试，眼都花了。
六、凑合着算是完工
鼓捣了几个晚上，脖子都僵了。把剩下几个页面（“关于”、“下载”——虽然下载链接还没想好放哪）框架复制了修改，加了个<footer>底部版权信息。浏览器上翻来覆去点了无数遍，感觉没啥大问题（那些小破细节选择性忽略了！），终于把整个文件夹打包收工了。
这回真是体会到建个小网站跟打仗似的，查资料的时间比写代码还多。特别是调手机适应那会儿，都想砸键盘了。不过看到那个能跑起来的简陋官网，还是挺得劲儿的。下次试试加点动效？算了，今天先歇了。
