网页游戏开发教学：小猪存钱罐（3）罐子界面代码优化详解

原创首发声明：本系列文章仅在今日头条平台持续更新不再其他任何平台发布，如需转载请注明出处。

01. 小猪存钱罐前端样式优化详解：

上篇文章最后我们优化了代码，但是文章中并没有给出详细的讲解，是因为昨天时间不够了，今天我们继续讲解优化的部分。前端代码的style写的多了页面很乱代码冗长可读性大大降低，我们需要进一步进行优化，做到高内聚。

首先我们要根据我们的前期原型图设计，知晓我们要编写多少个类，并且给这些类命名。

· 普通钱罐外框 —— .pig_box_p

· 飞猪钱罐外框 —— .pig_box_f

· 没有钱罐外框 —— .pig_box_w

· 钱罐图片外框 —— .pig_img

· 钱罐图片央视 —— .pig_img img(选择了类下标签)

· 钱罐标题普通 —— .pig_text_p

· 钱罐标题飞猪 —— .pig_text_f

· 钱罐标题无罐 —— .pig_text_w

· 存入按钮 —— .pig_textbutton_save

· 取出按钮 —— .pig_textbutton_ take

· 购买普通罐子 —— .pig_textbutton_ small

· 购买飞猪罐子 —— .pig_textbutton_ fly

· 进度条底层背景 —— .pig_progress

· 进度条 —— .pig_progress div(选择了类下标签)

· 文字比例 —— .pig_progress p(选择了类下标签)

我们的钱罐样式基本分为3个种类：无罐、普通、飞猪

无罐主体为灰色，普通主体为蓝色，飞猪主体为红色

其他样式基本一致，我们只是做出基本的形态，优化部分会放到很后面了，先以粗糙界面实现功能为主。

<style type="text/css">
.pig_box_p{ /*普通钱罐外框*/
padding: 5px;
margin: 5px;
border: 1px dotted rgba(50,50,250,0.90);
border-radius: 5px;
text-align:center;
}
.pig_box_f{ /*飞猪钱罐外框*/
padding: 5px;
margin: 5px;
border: 1px dotted rgba(220,40,40,0.90);
border-radius: 5px;
text-align:center;
}
.pig_box_w{ /*没有钱罐外框*/
padding: 5px;
margin: 5px;
border: 1px dotted rgba(220,220,220,0.90);
border-radius: 5px;
text-align:center;
}
.pig_img{ /*钱罐图片外框*/
background-color: rgba(220,220,220,1.00);
padding: 5px;
text-align:center;
height: 90px;
display:flex;
align-items:center;
justify-content:center;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60);
}
.pig_img img{ /*钱罐图片样式*/
width: 80px;
height: 80px;
display:flex;
border-radius: 5px;
}
.pig_text_p{ /*钱罐标题普通*/
background-color: rgba(220,220,220,1.00);
padding: 5px;
text-align: center;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60);
text-shadow: 1px 1px 2px rgba(50,50,250,0.80);
line-height: 20px;
}
.pig_text_f{ /*钱罐标题飞猪*/
background-color: rgba(220,220,220,1.00);
padding: 5px;
text-align: center;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60);
text-shadow: 1px 1px 2px rgba(220,40,40,0.80);
line-height: 20px;
}
.pig_text_w{ /*钱罐标题无罐*/
background-color: rgba(220,220,220,1.00);
padding: 5px;
text-align: center;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60);
text-shadow: 1px 1px 2px rgba(220,220,220,0.80);
line-height: 20px;
color: rgba(160,160,160,0.80)
}
.pig_textbutton_save{ /*存入按钮*/
background-color:#4B4 !important;
border-radius: 5px !important;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60) !important;
}
.pig_textbutton_take{ /*取出按钮*/
background-color:#909 !important;
border-radius: 5px !important;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60) !important;
}
.pig_textbutton_small{ /*购买普通罐子*/
background-color:#F80 !important;
border-radius: 5px !important;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60) !important;
}
.pig_textbutton_fly{ /*购买飞猪罐子*/
background-color:#F40 !important;
border-radius: 5px !important;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60) !important;
}
.pig_progress{ /*进度条底层背景*/
border-radius: 5px !important;
height: 30px !important;
box-shadow: 1px 1px 1px rgba(50,50,50,0.60);
}
.pig_progress div{ /*进度条*/
border-radius: 5px;
height: 30px;
}
.pig_progress p{ /*文字比例*/
line-height: 30px;
position: absolute;
width: 100%;
text-align: center;
}
</style>

根据我们优化的样式，我们可以相互配合得到风格统一样式区分的存钱罐界面了。教程讲到这里我们的存钱罐前端部分基本就定形了。

附加：细心的读者可能已经发现了，这张图和原型图比起来多了一个结构，罐子数量进度条。

这部分是经过一段时间考虑后新增加的界面。对比一下加入如下代码即可！

<span class="layui-inline">罐子</span>
<div class="layui-inline">
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
</div>
<span class="layui-inline">0 / <b>2</b></span>

下期预告：储钱罐MYSQL数据库结构。

• 本文章某部分如需要详解，请给我们留言。
• 我们欢迎您 关注 转发 收藏本文章。如果复制转载请注明出处。
• ↓点击了解更多可以试玩小游戏