前端的小玩意（9.1）——做一個仿360工具箱的web頁面（Tab按鈕切換）

http://blog.csdn.net/qq20004604/article/details/52216203

前端的小玩意（9.2）——做一個仿360工具箱的web頁面（全部工具里面的模板）

http://blog.csdn.net/qq20004604/article/details/52226223

（三）我的工具頁面布局

如圖：

?

首先將其分為二部分；

第一部分是上方整體紅色方框區域；

• 包含若干個獨立按鈕，按鈕分為圖片和下方文字兩部分；

?

第二部分是下方藍色方框區域；

• 包含左方的編輯按鈕和右方的四個快捷按鈕區域；
• 左方是圖標和文字，圖標分為按下和非按下狀態；
• 右方是左邊的文字和右側的按鈕，按鈕又分為圖標和文字。按鈕在無圖標時有占位圖標。

?

?

先上模板：

//我的工具，和之前的div.toolbox-all平級 div.toolbox-my.displayNONE//上方區域div.toolbox-content//獨立按鈕div.tool-mydiv.imgdiv.text 小清新日歷//下方區域div.toolbox-foot//編輯按鈕div.editdiv.imgdiv.text 編輯//右方區域div.shortcut//左邊的描述文字div.descriptiondiv.text 主界面快捷入口：//右邊四個按鈕div.tool-footdiv.imgdiv.text 系統急救箱div.tool-foot.placeholderdiv.placeholder-imgdiv.text 拖拽到此div.tool-foot.placeholderdiv.placeholder-imgdiv.text 拖拽到此div.tool-foot.placeholderdiv.placeholder-imgdiv.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;position: relative;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 {position: absolute;bottom: 9px;width: 100%;text-align: center;line-height: 12px;height: 12px;font-size: 12px;color: #7c7c7c; }.back .contentbox .toolbox-my .toolbox-foot {position: absolute;left: 0;right: 0;bottom: 0;height: 95px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border-top: 1px solid rgb(218, 218, 218); }.back .contentbox .toolbox-my .toolbox-foot .edit {width: 32px;height: 52px;position: absolute;top: 22px;left: 30px; }.back .contentbox .toolbox-my .toolbox-foot .edit .img {width: 32px;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 {width: 32px;height: 20px;line-height: 20px;vertical-align: bottom;color: rgb(0, 138, 225);font-size: 12px;text-align: center;cursor: default; }.back .contentbox .toolbox-my .toolbox-foot .shortcut {position: absolute;right: 13px;top: 9px;bottom: 15px;width: 450px;display: flex;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 {height: 22px;line-height: 22px;font-size: 11px;color: #7c7c7c;vertical-align: top; }.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot {width: 76px;height: 70px;border: 1px solid transparent;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;position: relative; }.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot:hover {border: 1px solid #dadada; }.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot .img {position: absolute;top: 13px;left: 21px;right: 21px;height: 34px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px solid transparent;background-image: url("../img/toolsImg.png");background-size: 615px 615px;/*這個用于計算位置，和實際位置需要乘以61.5%background-position: 0 0;*/ }.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot .text {position: absolute;bottom: 3px;width: 100%;text-align: center;line-height: 12px;height: 12px;font-size: 12px;color: #7c7c7c; }.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot.placeholder:hover {border: 1px solid transparent; }.back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot.placeholder .placeholder-img {position: absolute;top: 13px;left: 21px;right: 21px;height: 34px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dotted #7c7c7c; }

?

然后對之前的一些css和html修改：

首先，刪除掉

div.BigToolspan.img(style='background-image: url(../img/bigImg03.png)')

注意，以上共三個，最后的圖片鏈接不同，修改為：

div.BigToolspan.img我們將加載一個大圖片，然后實際生成的時候，設置background-position屬性，來設置其加載哪個圖片

修改以下同名樣式為：

.back .contentbox .toolbox-all .firstRow .BigTool .img {display: inline-block;position: absolute;width: 100%;height: 100%;background-image: url("../img/bigImg.png");background-position: 0 0;; }

然后修改該樣式：

.back .contentbox .commanRow .normalTool .img {position: relative;display: inline-block;width: 60px;height: 60px;background-image: url("../img/toolsImg.png");background-position: 0 0;; }

?

于是，我們需要三個圖片：

toolbox.png 放零碎的圖標，

bigImg.png 放大圖標，圖標尺寸為300x160

toolsImg.png 放普通圖標，尺寸為52x52

?

我自己已經切好了（話說切圖好無聊），下載鏈接為：

http://jianwangsan.cn/img/toolbox.png

http://jianwangsan.cn/img/bigImg.png

http://jianwangsan.cn/img/toolsImg.png

?

放在img文件夾之內食用

?

目前效果應該如下：

圖片之所以重復，是因為使用的是默認第一個位置的圖片，在實際生成的時候，會進行修改。

?

demo鏈接：

http://jianwangsan.cn/toolbox

這個頁面做完，主要部分的頁面就做完啦~~當然，這只是模板，具體生成內容，會在第四部分通過js來讀取json而生成，讀取JSON生成的好處，在于日后無論添加、刪除或者修改圖標，甚至邏輯，都很容易。

總結

以上是生活随笔為你收集整理的前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。