（三）我的工具页面布局
如图：
首先将其分为二部分；
第一部分是上方整体红色方框区域；
包含若干个独立按钮，按钮分为图片和下方文字两部分；
第二部分是下方蓝色方框区域；
包含左方的编辑按钮和右方的四个快捷按钮区域；
左方是图标和文字，图标分为按下和非按下状态；
右方是左边的文字和右侧的按钮，按钮又分为图标和文字。按钮在无图标时有占位图标。
先上模板：
//我的工具，和之前的div.toolbox-all平级
div.toolbox-my.displaynone
//上方区域
div.toolbox-content
//独立按钮
div.tool-my
div.img
div.text 小清新日历
//下方区域
div.toolbox-foot
//编辑按钮
div.edit
div.text 编辑
//右方区域
div.shortcut
//左边的描述文字
div.description
div.text 主界面快捷入口：
//右边四个按钮
div.tool-foot
div.img
div.text 系统急救箱
div.tool-foot.placeholder
div.placeholder-img
div.text 拖拽到此
然后是css的样式：（会涉及图片，后补，图标图片除外）
.back .contentbox .toolbox-my {
background-color: white;
padding: 30px 40px 90px 40px;
position: relative;
}
.back .contentbox .toolbox-my .toolbox-content {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.back .contentbox .toolbox-my .toolbox-content .tool-my {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.back .contentbox .toolbox-my .toolbox-content .tool-my:hover {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #dadada;
.back .contentbox .toolbox-my .toolbox-content .tool-my .img {
position: absolute;
top: 18px;
left: 23px;
right: 23px;
bottom: 28px;
background-image: url("../img/toolsimg.png");
background-position: 0 0;
.back .contentbox .toolbox-my .toolbox-content .tool-my .text {
bottom: 9px;
text-align: center;
line-height: 12px;
height: 12px;
font-size: 12px;
color: #7c7c7c;
.back .contentbox .toolbox-my .toolbox-foot {
left: 0;
right: 0;
bottom: 0;
height: 95px;
border-top: 1px solid rgb(218, 218, 218);
.back .contentbox .toolbox-my .toolbox-foot .edit {
width: 32px;
height: 52px;
top: 22px;
left: 30px;
.back .contentbox .toolbox-my .toolbox-foot .edit .img {
height: 32px;
background-image: url(../img/toolbox.png);
background-position: -120px 0;
.back .contentbox .toolbox-my .toolbox-foot .edit .img:hover {
background-position: -120px -50px;
.back .contentbox .toolbox-my .toolbox-foot .edit .text {
height: 20px;
line-height: 20px;
vertical-align: bottom;
color: rgb(0, 138, 225);
cursor: default;
.back .contentbox .toolbox-my .toolbox-foot .shortcut {
right: 13px;
top: 9px;
bottom: 15px;
width: 450px;
justify-content: flex-end;
align-items: flex-end;
.back .contentbox .toolbox-my .toolbox-foot .shortcut .description {
width: 98px;
height: 22px;
.back .contentbox .toolbox-my .toolbox-foot .shortcut .description .text {
line-height: 22px;
font-size: 11px;
vertical-align: top;
.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot {
width: 76px;
height: 70px;
.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot:hover {
.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot .img {
top: 13px;
left: 21px;
right: 21px;
height: 34px;
background-size: 615px 615px;
/*
这个用于计算位置，和实际位置需要乘以61.5%
background-position: 0 0;
*/
.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot .text {
bottom: 3px;
.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot.placeholder:hover {
.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot.placeholder .placeholder-img {
border: 1px dotted #7c7c7c;
然后对之前的一些css和html修改：
首先，删除掉
div.bigtool
span.img(style='background-image: url(../img/bigimg03.png)')
注意，以上共三个，最后的图片链接不同，修改为：
span.img
我们将加载一个大图片，然后实际生成的时候，设置background-position属性，来设置其加载哪个图片
修改以下同名样式为：
.back .contentbox .toolbox-all .firstrow .bigtool .img {
background-image: url("../img/bigimg.png");
background-position: 0 0;;
然后修改该样式：
.back .contentbox .commanrow .normaltool .img {
width: 60px;
height: 60px;
于是，我们需要三个图片：
toolbox.png 放零碎的图标，
bigimg.png 放大图标，图标尺寸为300x160
toolsimg.png 放普通图标，尺寸为52x52
我自己已经切好了（话说切图好无聊），下载链接为：
<a target="_blank" href="http://jianwangsan.cn/img/toolbox.png">http://jianwangsan.cn/img/toolbox.png</a>
<a target="_blank" href="http://jianwangsan.cn/img/bigimg.png">http://jianwangsan.cn/img/bigimg.png</a>
<a target="_blank" href="http://jianwangsan.cn/img/toolsimg.png">http://jianwangsan.cn/img/toolsimg.png</a>
放在img文件夹之内食用
目前效果应该如下：
图片之所以重复，是因为使用的是默认第一个位置的图片，在实际生成的时候，会进行修改。
demo链接：
<a target="_blank" href="http://jianwangsan.cn/toolbox">http://jianwangsan.cn/toolbox</a>
这个页面做完，主要部分的页面就做完啦~~当然，这只是模板，具体生成内容，会在第四部分通过js来读取json而生成，读取json生成的好处，在于日后无论添加、删除或者修改图标，甚至逻辑，都很容易。