（三）我的工具頁面布局
如圖：
首先将其分為二部分；
第一部分是上方整體紅色方框區域；
包含若幹個獨立按鈕，按鈕分為圖檔和下方文字兩部分；
第二部分是下方藍色方框區域；
包含左方的編輯按鈕和右方的四個快捷按鈕區域；
左方是圖示和文字，圖示分為按下和非按下狀态；
右方是左邊的文字和右側的按鈕，按鈕又分為圖示和文字。按鈕在無圖示時有占位圖示。
先上模闆：
//我的工具，和之前的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生成的好處，在于日後無論添加、删除或者修改圖示，甚至邏輯，都很容易。