前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）

（三）我的工具页面布局

如图：

首先将其分为二部分；

第一部分是上方整体红色方框区域；

• 包含若干个独立按钮，按钮分为图片和下方文字两部分；

第二部分是下方蓝色方框区域；

• 包含左方的编辑按钮和右方的四个快捷按钮区域；
• 左方是图标和文字，图标分为按下和非按下状态；
• 右方是左边的文字和右侧的按钮，按钮又分为图标和文字。按钮在无图标时有占位图标。

先上模板：

[javascript]  view plain  copy

 

1. //我的工具，和之前的div.toolbox-all平级  
2. div.toolbox-my.displayNONE  
3.     //上方区域  
4.     div.toolbox-content  
5.         //独立按钮  
6.         div.tool-my  
7.             div.img  
8.             div.text    小清新日历  
9.     //下方区域  
10.     div.toolbox-foot  
11.         //编辑按钮  
12.         div.edit  
13.             div.img  
14.             div.text    编辑  
15.         //右方区域  
16.         div.shortcut  
17.             //左边的描述文字  
18.             div.description  
19.                 div.text    主界面快捷入口：  
20.             //右边四个按钮  
21.             div.tool-foot  
22.                 div.img  
23.                 div.text    系统急救箱  
24.             div.tool-foot.placeholder  
25.                 div.placeholder-img  
26.                 div.text    拖拽到此  
27.             div.tool-foot.placeholder  
28.                 div.placeholder-img  
29.                 div.text    拖拽到此  
30.             div.tool-foot.placeholder  
31.                 div.placeholder-img  
32.                 div.text    拖拽到此  

然后是CSS的样式：（会涉及图片，后补，图标图片除外）

[css]  view plain  copy

 

1. .back .contentbox .toolbox-my {  
2.     background-color: white;  
3.     padding: 30px 40px 90px 40px;  
4.     position: relative;  
5. }  
6.   
7. .back .contentbox .toolbox-my .toolbox-content {  
8.     width: 100%;  
9.     height: 100%;  
10.     overflow-x: hidden;  
11.     overflow-y: auto;  
12.     display: flex;  
13.     flex-wrap: wrap;  
14. }  
15.   
16. .back .contentbox .toolbox-my .toolbox-content .tool-my {  
17.     width: 100px;  
18.     height: 100px;  
19.     display: inline-block;  
20.     position: relative;  
21.     border: 1px solid transparent;  
22.     -webkit-box-sizing: border-box;  
23.     -moz-box-sizing: border-box;  
24.     box-sizing: border-box;  
25. }  
26.   
27. .back .contentbox .toolbox-my .toolbox-content .tool-my:hover {  
28.     -webkit-border-radius: 2px;  
29.     -moz-border-radius: 2px;  
30.     border-radius: 2px;  
31.     border: 1px solid #DADADA;  
32. }  
33.   
34. .back .contentbox .toolbox-my .toolbox-content .tool-my .img {  
35.     position: absolute;  
36.     top: 18px;  
37.     left: 23px;  
38.     right: 23px;  
39.     bottom: 28px;  
40.     background-image: url("../img/toolsImg.png");  
41.     background-position: 0 0;  
42. }  
43.   
44. .back .contentbox .toolbox-my .toolbox-content .tool-my .text {  
45.     position: absolute;  
46.     bottom: 9px;  
47.     width: 100%;  
48.     text-align: center;  
49.     line-height: 12px;  
50.     height: 12px;  
51.     font-size: 12px;  
52.     color: #7c7c7c;  
53. }  
54.   
55. .back .contentbox .toolbox-my .toolbox-foot {  
56.     position: absolute;  
57.     left: 0;  
58.     right: 0;  
59.     bottom: 0;  
60.     height: 95px;  
61.     -webkit-box-sizing: border-box;  
62.     -moz-box-sizing: border-box;  
63.     box-sizing: border-box;  
64.     border-top: 1px solid rgb(218, 218, 218);  
65. }  
66.   
67. .back .contentbox .toolbox-my .toolbox-foot .edit {  
68.     width: 32px;  
69.     height: 52px;  
70.     position: absolute;  
71.     top: 22px;  
72.     left: 30px;  
73. }  
74.   
75. .back .contentbox .toolbox-my .toolbox-foot .edit .img {  
76.     width: 32px;  
77.     height: 32px;  
78.     background-image: url(../img/toolbox.png);  
79.     background-position: -120px 0;  
80. }  
81.   
82. .back .contentbox .toolbox-my .toolbox-foot .edit .img:hover {  
83.     background-position: -120px -50px;  
84. }  
85.   
86. .back .contentbox .toolbox-my .toolbox-foot .edit .text {  
87.     width: 32px;  
88.     height: 20px;  
89.     line-height: 20px;  
90.     vertical-align: bottom;  
91.     color: rgb(0, 138, 225);  
92.     font-size: 12px;  
93.     text-align: center;  
94.     cursor: default;  
95. }  
96.   
97. .back .contentbox .toolbox-my .toolbox-foot .shortcut {  
98.     position: absolute;  
99.     right: 13px;  
100.     top: 9px;  
101.     bottom: 15px;  
102.     width: 450px;  
103.     display: flex;  
104.     justify-content: flex-end;  
105.     align-items: flex-end;  
106. }  
107.   
108. .back .contentbox .toolbox-my .toolbox-foot .shortcut .description {  
109.     width: 98px;  
110.     height: 22px;  
111. }  
112.   
113. .back .contentbox .toolbox-my .toolbox-foot .shortcut .description .text {  
114.     height: 22px;  
115.     line-height: 22px;  
116.     font-size: 11px;  
117.     color: #7c7c7c;  
118.     vertical-align: top;  
119. }  
120.   
121. .back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot {  
122.     width: 76px;  
123.     height: 70px;  
124.     border: 1px solid transparent;  
125.     -webkit-border-radius: 2px;  
126.     -moz-border-radius: 2px;  
127.     border-radius: 2px;  
128.     -webkit-box-sizing: border-box;  
129.     -moz-box-sizing: border-box;  
130.     box-sizing: border-box;  
131.     position: relative;  
132. }  
133.   
134. .back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot:hover {  
135.     border: 1px solid #dadada;  
136. }  
137.   
138. .back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot .img {  
139.     position: absolute;  
140.     top: 13px;  
141.     left: 21px;  
142.     right: 21px;  
143.     height: 34px;  
144.     -webkit-border-radius: 2px;  
145.     -moz-border-radius: 2px;  
146.     border-radius: 2px;  
147.     -webkit-box-sizing: border-box;  
148.     -moz-box-sizing: border-box;  
149.     box-sizing: border-box;  
150.     border: 1px solid transparent;  
151.     background-image: url("../img/toolsImg.png");  
152.     background-size: 615px 615px;  
153.     /* 
154.         这个用于计算位置，和实际位置需要乘以61.5% 
155.         background-position: 0 0; 
156.     */  
157. }  
158.   
159. .back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot .text {  
160.     position: absolute;  
161.     bottom: 3px;  
162.     width: 100%;  
163.     text-align: center;  
164.     line-height: 12px;  
165.     height: 12px;  
166.     font-size: 12px;  
167.     color: #7c7c7c;  
168. }  
169.   
170. .back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot.placeholder:hover {  
171.     border: 1px solid transparent;  
172. }  
173.   
174. .back .contentbox .toolbox-my .toolbox-foot .shortcut .tool-foot.placeholder .placeholder-img {  
175.     position: absolute;  
176.     top: 13px;  
177.     left: 21px;  
178.     right: 21px;  
179.     height: 34px;  
180.     -webkit-border-radius: 2px;  
181.     -moz-border-radius: 2px;  
182.     border-radius: 2px;  
183.     -webkit-box-sizing: border-box;  
184.     -moz-box-sizing: border-box;  
185.     box-sizing: border-box;  
186.     border: 1px dotted #7c7c7c;  
187. }  

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

首先，删除掉

[javascript]  view plain  copy

 

1. div.BigTool  
2.     span.img(style='background-image: url(../img/bigImg03.png)')  

注意，以上共三个，最后的图片链接不同，修改为：

[javascript]  view plain  copy

 

1. div.BigTool  
2.     span.img  

修改以下同名样式为：

[css]  view plain  copy

 

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

然后修改该样式：

[css]  view plain  copy

 

1. .back .contentbox .commanRow .normalTool .img {  
2.     position: relative;  
3.     display: inline-block;  
4.     width: 60px;  
5.     height: 60px;  
6.     background-image: url("../img/toolsImg.png");  
7.     background-position: 0 0;;  
8. }  

于是，我们需要三个图片：

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生成的好处，在于日后无论添加、删除或者修改图标，甚至逻辑，都很容易。