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

DEMO：

http://jianwangsan.cn/toolbox

（二）全部工具里面的按钮和样式

我将他拆成五部分：

第一部分是上面的大按钮那一排；

第二部分是小按钮；

第三部分是一条颜色很淡的线，他只在app有多行的情况下，在行间有；

第四部分是标题；

第五部分是右边的滚动条；

①为了方便模块化开发，我先制作模板，然后实际编写代码的时候，根据样式已经设置好的模板，来添加内容，这样方便调试和制作

②大按钮：

先分为整体和具体每个按钮；

每个按钮分为背景图、遮罩层（下半部分的灰色阴影），文字title，文字说明，还有移动上去可能显示的添加按钮，共计五部分。

html：

[javascript]  view plain  copy

 

1. div.contentbox  
2.     //下面这个是全部工具里页面最顶级的，目前共有两个，通过displayNONE这个类是否存在，来决定显示哪个  
3.     div.toolbox-all  
4.         //这个是最上面的大图标那一行  
5.         div.firstRow  
6.             //以下是单个按钮  
7.             div.BigTool  
8.                 //背景图  
9.                 span.img(style='background-image: url(../img/bigImg01.png)')  
10.                 //阴影遮罩  
11.                 span.mask  
12.                 //文字  
13.                 div.text  
14.                     div.title   微信清理  
15.                     div.description     定期清理微信，节省手机空间  
16.                 //添加按钮  
17.                 div.addButton   添　加  
18.             div.BigTool  
19.                 span.img(style='background-image: url(../img/bigImg02.png)')  
20.                 span.mask  
21.                 div.text  
22.                     div.title   雷电OS  
23.                     div.description     雷电OS Editor 旧机变新机  
24.                 div.addButton   添　加  
25.             div.BigTool  
26.                 span.img(style='background-image: url(../img/bigImg03.png)')  
27.                 span.mask  
28.                 div.text  
29.                     div.title   手机相册扩容  
30.                     div.description     无损处理照片，腾出50%空间  
31.                 div.addButton   添　加  

[css]  view plain  copy

 

1. .back .contentbox > div {  
2.     width: 100%;  
3.     height: 100%;  
4.     box-sizing: border-box;  
5. }  
6.   
7. .back .contentbox .toolbox-all {  
8.     background: white;  
9.     padding: 30px;  
10.     overflow: auto;  
11. }  
12.   
13. .back .contentbox .toolbox-my {  
14.     background: green;  
15. }  
16.   
17. .back .contentbox .toolbox-all .firstRow {  
18.     width: 100%;  
19.     height: 140px;  
20.     display: flex;  
21.     justify-content: space-between;  
22. }  
23.   
24. .back .contentbox .toolbox-all .firstRow .BigTool {  
25.     width: 300px;  
26.     height: 140px;  
27.     position: relative;  
28.     cursor: pointer;  
29. }  
30.   
31. .back .contentbox .toolbox-all .firstRow .BigTool .img {  
32.     display: inline-block;  
33.     position: absolute;  
34.     width: 100%;  
35.     height: 100%;  
36. }  
37.   
38. .back .contentbox .toolbox-all .firstRow .BigTool .mask {  
39.     display: inline-block;  
40.     position: absolute;  
41.     width: 100%;  
42.     height: 100%;  
43.     background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%);  
44. }  
45.   
46. .back .contentbox .toolbox-all .firstRow .BigTool .text {  
47.     position: absolute;  
48.     bottom: 0;  
49.     left: 0;  
50.     right: 0;  
51.     height: 55px;  
52.     padding: 0 10px;  
53. }  
54.   
55. .back .contentbox .toolbox-all .firstRow .BigTool .text .title {  
56.     font-weight: 600;  
57.     font-size: 18px;  
58.     color: white;  
59. }  
60.   
61. .back .contentbox .toolbox-all .firstRow .BigTool .text .description {  
62.     font-size: 14px;  
63.     margin-top: 10px;  
64.     color: rgb(218, 218, 218);  
65. }  
66.   
67. .back .contentbox .toolbox-all .firstRow .BigTool .addButton {  
68.     display: none;  
69.     position: absolute;  
70.     bottom: 10px;  
71.     right: 12px;  
72.     width: 60px;  
73.     height: 22px;  
74.     background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);  
75.     font-size: 12px;  
76.     color: white;  
77.     text-align: center;  
78.     line-height: 20px;  
79.     border: 1px solid rgb(65, 199, 36);  
80.     -webkit-border-radius: 1px;  
81.     -moz-border-radius: 1px;  
82.     border-radius: 1px;  
83. }  
84.   
85. .back .contentbox .toolbox-all .firstRow .BigTool:hover .addButton {  
86.     display: block;  
87. }  

③小按钮：

分为左边的图片，右边的文字（title和description），添加按钮

所有小按钮放在同一个commonRow类里面，这个commonRow是弹性布局。

commonRow和上面的firstRow是平级的

HTML：

[javascript]  view plain  copy

 

1. div.commanRow  
2.     div.normalTool  
3.         div.img  
4.         div.text  
5.             div.title   手游模拟器  
6.             div.description     电脑玩手游，挂机辅助神器  
7.         div.addButton   添　加  
8.     div.normalTool  
9.         div.img  
10.         div.text  
11.             div.title   手游模拟器  
12.             div.description     电脑玩手游，挂机辅助神器  
13.         div.addButton   添　加  
14.     div.normalTool  
15.         div.img  
16.         div.text  
17.             div.title   手游模拟器  
18.             div.description     电脑玩手游，挂机辅助神器  
19.         div.addButton   添　加  
20.     div.normalTool  
21.         div.img  
22.         div.text  
23.             div.title   手游模拟器  
24.             div.description     电脑玩手游，挂机辅助神器  
25.         div.addButton   添　加  

[css]  view plain  copy

 

1. .back .contentbox .commanRow {  
2.     width: 100%;  
3.     display: flex;  
4.     justify-content: space-between;  
5.     margin-top: 10px;  
6.     flex-flow: wrap;  
7. }  
8.   
9. .back .contentbox .commanRow .normalTool {  
10.     width: 300px;  
11.     height: 70px;  
12.     position: relative;  
13.     cursor: pointer;  
14.     padding: 5px;  
15.     -webkit-box-sizing: border-box;  
16.     -moz-box-sizing: border-box;  
17.     box-sizing: border-box;  
18. }  
19.   
20. .back .contentbox .commanRow .normalTool:hover {  
21.     outline: 1px solid #dadada;  
22. }  
23.   
24. .back .contentbox .commanRow .normalTool .img {  
25.     position: relative;  
26.     display: inline-block;  
27.     width: 60px;  
28.     height: 60px;  
29.     background-color: blue;  
30. }  
31.   
32. .back .contentbox .commanRow .normalTool .text {  
33.     position: absolute;  
34.     left: 75px;  
35.     right: 5px;  
36.     top: 5px;  
37.     bottom: 5px;  
38. }  
39.   
40. .back .contentbox .commanRow .normalTool .text .title {  
41.     line-height: 35px;  
42.     font-size: 16px;  
43. }  
44.   
45. .back .contentbox .commanRow .normalTool .text .description {  
46.     line-height: 25px;  
47.     font-size: 12px;  
48.     color: #aaa;  
49. }  
50.   
51. .back .contentbox .commanRow .normalTool .addButton {  
52.     display: none;  
53.     position: absolute;  
54.     top: 10px;  
55.     right: 15px;  
56.     width: 60px;  
57.     height: 22px;  
58.     background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);  
59.     font-size: 12px;  
60.     color: white;  
61.     text-align: center;  
62.     line-height: 20px;  
63.     border: 1px solid rgb(65, 199, 36);  
64.     -webkit-border-radius: 1px;  
65.     -moz-border-radius: 1px;  
66.     border-radius: 1px;  
67. }  
68.   
69. .back .contentbox .commanRow .normalTool:hover .addButton {  
70.     display: block;  
71. }  

④一条颜色很淡的线，分为两种情况，顶层的，和间层的。

直接插入一个div，利用

border: 1px dotted rgb(209, 209, 209);

属性来设置，

html：

div.dotted

在顶层的时候，和firstRow平级，在间层的时候，和.normalTool平级

css：

[javascript]  view plain  copy

 

1. .back .contentbox .dotted {  
2.     border: 1px dotted rgb(209, 209, 209);  
3.     margin-top: 10px;  
4.     width: 100%;  
5.     margin-bottom: 10px;  
6. }  

⑤标题：

两部分，左边的绿色竖线，右边的文字，简单暴力

html

[javascript]  view plain  copy

 

1. div.titleRow  
2.     span.titleRow-left  
3.     span.titleRow-text  电脑安全  

CSS：

[css]  view plain  copy

 

1. .back .contentbox .titleRow {  
2.     width: 100%;  
3.     height: 20px;  
4.     margin-top: 25px;  
5. }  
6.   
7. .back .contentbox .titleRow .titleRow-left {  
8.     display: inline-block;  
9.     width: 2px;  
10.     height: 100%;  
11.     background-color: rgb(42, 191, 29);  
12. }  
13.   
14. .back .contentbox .titleRow .titleRow-text {  
15.     height: 100%;  
16.     display: inline-block;  
17.     line-height: 20px;  
18.     margin-left: 10px;  
19.     vertical-align: top;  
20.     font-size: 18px;  
21.     color: #000;  
22. }  

⑥滚动条

分为四部分：滚动条整体、滚动条背景、滚动条、两端的按钮

不需要html代码；

CSS代码限制为当前页面生效：

[css]  view plain  copy

 

1. /* 有这行才有效，滚动条的宽度 */  
2. .back .contentbox ::-webkit-scrollbar {  
3.     width: 12px;  
4. }  
5.   
6. /* 滚动条的背景 */  
7. .back .contentbox ::-webkit-scrollbar-track {  
8.     background-color: rgb(242, 242, 242);  
9. }  
10.   
11. /*滚动条*/  
12. .back .contentbox ::-webkit-scrollbar-thumb {  
13.     -webkit-border-radius: 5px;  
14.     border-radius: 5px;  
15.     background: rgb(218, 218, 218);  
16. }  
17.   
18. .back .contentbox ::-webkit-scrollbar-button {  
19.     width: 12px;  
20. }  

总结：

目前情况是小按钮没有背景图，暂时不做，只起到占位效果，背景图等做按钮类时，再根据实际需要设置和添加。

后附目前为止的代码：

HTML：（jade格式）

[javascript]  view plain  copy

 

1. extends layout  
2. block content  
3.     link(rel='stylesheet', href='./stylesheets/toolboxes.css')  
4.     script(type="text/javascript",src='javascripts/toolboxes.js')  
5.     div 博客地址：  
6.         a(href='http://blog.csdn.net/qq20004604?viewmode=list' target='_blank') http://blog.csdn.net/qq20004604?viewmode=list  
7.         br  
8.         br  
9.     div.back  
10.         div.tooltop  
11.             div.tooltop-img  
12.             div.toolTab  
13.                 div.tool#alltool  
14.                     span.img.alltool.select  
15.                     span.text    全部工具  
16.                     div.hover  
17.                 div.tool#mytool  
18.                     span.img.mytool  
19.                     span.text    我的工具  
20.         div.contentbox  
21.             //下面这个是全部工具里页面最顶级的，目前共有两个，通过displayNONE这个类是否存在，来决定显示哪个  
22.             div.toolbox-all  
23.                 //这个是最上面的大图标那一行  
24.                 div.firstRow  
25.                     //以下是单个按钮  
26.                     div.BigTool  
27.                         //背景图  
28.                         span.img(style='background-image: url(../img/bigImg01.png)')  
29.                         //阴影遮罩  
30.                         span.mask  
31.                         //文字  
32.                         div.text  
33.                             div.title   微信清理  
34.                             div.description     定期清理微信，节省手机空间  
35.                         //添加按钮  
36.                         div.addButton   添　加  
37.                     div.BigTool  
38.                         span.img(style='background-image: url(../img/bigImg02.png)')  
39.                         span.mask  
40.                         div.text  
41.                             div.title   雷电OS  
42.                             div.description     雷电OS Editor 旧机变新机  
43.                         div.addButton   添　加  
44.                     div.BigTool  
45.                         span.img(style='background-image: url(../img/bigImg03.png)')  
46.                         span.mask  
47.                         div.text  
48.                             div.title   手机相册扩容  
49.                             div.description     无损处理照片，腾出50%空间  
50.                         div.addButton   添　加  
51.                 //横线那一行，如果是多行app，应考虑使用另外一个  
52.                 div.dotted  
53.                 div.commanRow  
54.                     div.normalTool  
55.                         div.img  
56.                         div.text  
57.                             div.title   手游模拟器  
58.                             div.description     电脑玩手游，挂机辅助神器  
59.                         div.addButton   添　加  
60.                     div.normalTool  
61.                         div.img  
62.                         div.text  
63.                             div.title   手游模拟器  
64.                             div.description     电脑玩手游，挂机辅助神器  
65.                         div.addButton   添　加  
66.                     div.normalTool  
67.                         div.img  
68.                         div.text  
69.                             div.title   手游模拟器  
70.                             div.description     电脑玩手游，挂机辅助神器  
71.                         div.addButton   添　加  
72.                     div.dotted  
73.                     div.normalTool  
74.                         div.img  
75.                         div.text  
76.                             div.title   手游模拟器  
77.                             div.description     电脑玩手游，挂机辅助神器  
78.                         div.addButton   添　加  
79.                 div.titleRow  
80.                     span.titleRow-left  
81.                     span.titleRow-text  电脑安全  
82.                 div.commanRow  
83.                     div.normalTool  
84.                         div.img  
85.                         div.text  
86.                             div.title   手游模拟器  
87.                             div.description     电脑玩手游，挂机辅助神器  
88.                         div.addButton   添　加  
89.             div.toolbox-my.displayNONE  

CSS代码：

[javascript]  view plain  copy

 

1. a[href='/toolbox'] {  
2.     color: #555;  
3.     text-decoration: none;  
4.     background-color: #e5e5e5;  
5.     -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);  
6.     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);  
7.     box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);  
8. }  
9.   
10. .back {  
11.     height: 600px;  
12.     width: 100%;  
13.     position: relative;  
14.     -webkit-box-shadow: 0px 0px 2px #555;  
15.     -moz-box-shadow: 0px 0px 2px #555;  
16.     box-shadow: 0px 0px 2px #555;  
17.     min-width: 1000px;  
18. }  
19.   
20. .back * {  
21.     border: 0;  
22.     padding: 0;  
23.     margin: 0;  
24. }  
25.   
26. .back .tooltop {  
27.     height: 120px;  
28.     width: 100%;  
29.     background-color: white;  
30.     position: relative;  
31. }  
32.   
33. .back .tooltop-img {  
34.     height: 100%;  
35.     width: 100%;  
36.     background-image: url(../img/toolboxBackground.png);  
37.     background-size: cover;  
38. }  
39.   
40. .back .toolTab {  
41.     position: absolute;  
42.     left: 0;  
43.     bottom: 10px;  
44.     height: 35px;  
45.     width: 100%;  
46. }  
47.   
48. .back .toolTab .tool {  
49.     margin-left: 20px;  
50.     width: 140px;  
51.     height: 100%;  
52.     line-height: 30px;  
53.     color: white;  
54.     font-size: 22px;  
55.     font-weight: 900;  
56.     -webkit-box-sizing: border-box;  
57.     -moz-box-sizing: border-box;  
58.     box-sizing: border-box;  
59.     display: inline-block;  
60.     cursor: default;  
61.     position: relative;  
62.     -webkit-user-select: none;  
63.     -moz-user-select: none;  
64.     -ms-user-select: none;  
65.     user-select: none;  
66. }  
67.   
68. .back .toolTab .tool .img {  
69.     height: 27px;  
70.     width: 27px;  
71.     background-repeat: no-repeat;  
72.     display: inline-block;  
73.     vertical-align: middle;  
74.     background-image: url(../img/toolbox.png);  
75. }  
76.   
77. .back .toolTab .tool .img.alltool {  
78.     background-position: 0 0;  
79. }  
80.   
81. .back .toolTab .tool .img.alltool.select {  
82.     background-position: 0 -50px;  
83. }  
84.   
85. .back .toolTab .tool .img.mytool {  
86.     background-position: -40px 0;  
87. }  
88.   
89. .back .toolTab .tool .img.mytool.select {  
90.     background-position: -40px -50px;  
91. }  
92.   
93. .back .toolTab .tool .text {  
94. }  
95.   
96. .back .toolTab .hover {  
97.     height: 2px;  
98.     width: 125px;  
99.     background-color: white;  
100.     position: absolute;  
101.     bottom: -2px;  
102.     left: 0;  
103. }  
104.   
105. .back .contentbox {  
106.     position: absolute;  
107.     top: 120px;  
108.     bottom: 0;  
109.     left: 0;  
110.     right: 0;  
111.     background-color: white;  
112. }  
113.   
114. .back .contentbox > div {  
115.     width: 100%;  
116.     height: 100%;  
117.     box-sizing: border-box;  
118. }  
119.   
120. .back .contentbox .toolbox-all {  
121.     background: white;  
122.     padding: 30px;  
123.     overflow: auto;  
124. }  
125.   
126. .back .contentbox .toolbox-my {  
127.     background: green;  
128. }  
129.   
130. .back .contentbox .toolbox-all .firstRow {  
131.     width: 100%;  
132.     height: 140px;  
133.     display: flex;  
134.     justify-content: space-between;  
135. }  
136.   
137. .back .contentbox .toolbox-all .firstRow .BigTool {  
138.     width: 300px;  
139.     height: 140px;  
140.     position: relative;  
141.     cursor: pointer;  
142. }  
143.   
144. .back .contentbox .toolbox-all .firstRow .BigTool .img {  
145.     display: inline-block;  
146.     position: absolute;  
147.     width: 100%;  
148.     height: 100%;  
149. }  
150.   
151. .back .contentbox .toolbox-all .firstRow .BigTool .mask {  
152.     display: inline-block;  
153.     position: absolute;  
154.     width: 100%;  
155.     height: 100%;  
156.     background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%);  
157. }  
158.   
159. .back .contentbox .toolbox-all .firstRow .BigTool .text {  
160.     position: absolute;  
161.     bottom: 0;  
162.     left: 0;  
163.     right: 0;  
164.     height: 55px;  
165.     padding: 0 10px;  
166. }  
167.   
168. .back .contentbox .toolbox-all .firstRow .BigTool .text .title {  
169.     font-weight: 600;  
170.     font-size: 18px;  
171.     color: white;  
172. }  
173.   
174. .back .contentbox .toolbox-all .firstRow .BigTool .text .description {  
175.     font-size: 14px;  
176.     margin-top: 10px;  
177.     color: rgb(218, 218, 218);  
178. }  
179.   
180. .back .contentbox .toolbox-all .firstRow .BigTool .addButton {  
181.     display: none;  
182.     position: absolute;  
183.     bottom: 10px;  
184.     right: 12px;  
185.     width: 60px;  
186.     height: 22px;  
187.     background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);  
188.     font-size: 12px;  
189.     color: white;  
190.     text-align: center;  
191.     line-height: 20px;  
192.     border: 1px solid rgb(65, 199, 36);  
193.     -webkit-border-radius: 1px;  
194.     -moz-border-radius: 1px;  
195.     border-radius: 1px;  
196. }  
197.   
198. .back .contentbox .toolbox-all .firstRow .BigTool:hover .addButton {  
199.     display: block;  
200. }  
201.   
202. .back .contentbox .dotted {  
203.     border: 1px dotted rgb(209, 209, 209);  
204.     margin-top: 10px;  
205.     width: 100%;  
206.     margin-bottom: 10px;  
207. }  
208.   
209. .back .contentbox .commanRow {  
210.     width: 100%;  
211.     display: flex;  
212.     justify-content: space-between;  
213.     margin-top: 10px;  
214.     flex-flow: wrap;  
215. }  
216.   
217. .back .contentbox .commanRow .normalTool {  
218.     width: 300px;  
219.     height: 70px;  
220.     position: relative;  
221.     cursor: pointer;  
222.     padding: 5px;  
223.     -webkit-box-sizing: border-box;  
224.     -moz-box-sizing: border-box;  
225.     box-sizing: border-box;  
226. }  
227.   
228. .back .contentbox .commanRow .normalTool:hover {  
229.     outline: 1px solid #dadada;  
230. }  
231.   
232. .back .contentbox .commanRow .normalTool .img {  
233.     position: relative;  
234.     display: inline-block;  
235.     width: 60px;  
236.     height: 60px;  
237.     background-color: blue;  
238. }  
239.   
240. .back .contentbox .commanRow .normalTool .text {  
241.     position: absolute;  
242.     left: 75px;  
243.     right: 5px;  
244.     top: 5px;  
245.     bottom: 5px;  
246. }  
247.   
248. .back .contentbox .commanRow .normalTool .text .title {  
249.     line-height: 35px;  
250.     font-size: 16px;  
251. }  
252.   
253. .back .contentbox .commanRow .normalTool .text .description {  
254.     line-height: 25px;  
255.     font-size: 12px;  
256.     color: #aaa;  
257. }  
258.   
259. .back .contentbox .commanRow .normalTool .addButton {  
260.     display: none;  
261.     position: absolute;  
262.     top: 10px;  
263.     right: 15px;  
264.     width: 60px;  
265.     height: 22px;  
266.     background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);  
267.     font-size: 12px;  
268.     color: white;  
269.     text-align: center;  
270.     line-height: 20px;  
271.     border: 1px solid rgb(65, 199, 36);  
272.     -webkit-border-radius: 1px;  
273.     -moz-border-radius: 1px;  
274.     border-radius: 1px;  
275. }  
276.   
277. .back .contentbox .commanRow .normalTool:hover .addButton {  
278.     display: block;  
279. }  
280.   
281. .back .contentbox .titleRow {  
282.     width: 100%;  
283.     height: 20px;  
284.     margin-top: 25px;  
285. }  
286.   
287. .back .contentbox .titleRow .titleRow-left {  
288.     display: inline-block;  
289.     width: 2px;  
290.     height: 100%;  
291.     background-color: rgb(42, 191, 29);  
292. }  
293.   
294. .back .contentbox .titleRow .titleRow-text {  
295.     height: 100%;  
296.     display: inline-block;  
297.     line-height: 20px;  
298.     margin-left: 10px;  
299.     vertical-align: top;  
300.     font-size: 18px;  
301.     color: #000;  
302. }  
303.   
304. /* 有这行才有效，滚动条的宽度 */  
305. .back .contentbox ::-webkit-scrollbar {  
306.     width: 12px;  
307. }  
308.   
309. /* 滚动条的背景 */  
310. .back .contentbox ::-webkit-scrollbar-track {  
311.     background-color: rgb(242, 242, 242);  
312. }  
313.   
314. /*滚动条*/  
315. .back .contentbox ::-webkit-scrollbar-thumb {  
316.     -webkit-border-radius: 5px;  
317.     border-radius: 5px;  
318.     background: rgb(218, 218, 218);  
319. }  
320.   
321. .back .contentbox ::-webkit-scrollbar-button {  
322.     width: 12px;  
323. }  

JS代码：

无新增，参照上一篇，略。