前端的小玩意（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

[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

[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代码：

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

时间： 2024-10-28 06:18:30

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

前端的小玩意（9.4）——做一个仿360工具箱的web页面（自动生成所有图标，对图标添加响应逻辑）

DEMO网址: http://jianwangsan.cn/toolbox (四)制作JSON,自动将图标填充进所有工具 首先是JSON,因为工具很多,所以JSON内容很长. 具体而言,JSON是一个数组中的对象(只有这一个对象),他有两个属性:BigImg和CommonImg. 这两个属性都是数组类型: BigImg里面,他用于存放最上面的三个大图标: CommonImg里面,存放其他工具图标. BigImg单个数组元素的结构如下: [javascript] view plain copy  

前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）

需求: ①写一个web版的360工具箱,示意图如下:   ②无左上返回按钮,右上按钮有皮肤切换,下拉框(但无点击逻辑):   ③按钮点击有事件,但事件是console.log(按钮名):   ④可以在全部工具和我等工具自由切换:   ⑤可以点击左下角的编辑,然后根据实际表现设置:   ⑥可以在全部工具里面,点击按钮,然后添加到我的工具这边来:   ⑦效果尽量与原图相同,只使用jquery库:   效果网址: http://jianwangsan.cn/toolbox         (一)tab

前端的小玩意（9.5）——做一个仿360工具箱的web页面（完结篇，可以跑起来的工具箱）

DEMO网址: http://jianwangsan.cn/toolbox (五)添加.点击和移动的逻辑 我反思了一下,在(四)中我写的并不好,事实上,无论是大按钮,还是被添加到我的工具,或者是添加到常用工具栏,他都是一个按钮,因此,应该共享状态,即他们属于同一个tool实例,并能互相影响.   需求分析: 在重写Tool类之前,需要明确分析按钮的逻辑. 在全部工具页面: ①当按钮未被添加时,鼠标移动上去会有添加按钮显示: ②当按钮未被添加时,鼠标无论点击按钮本身还是点击添加按钮,都执行添加逻辑

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

(三)我的工具页面布局 如图:   首先将其分为二部分: 第一部分是上方整体红色方框区域: 包含若干个独立按钮,按钮分为图片和下方文字两部分:   第二部分是下方蓝色方框区域: 包含左方的编辑按钮和右方的四个快捷按钮区域: 左方是图标和文字,图标分为按下和非按下状态: 右方是左边的文字和右侧的按钮,按钮又分为图标和文字.按钮在无图标时有占位图标.     先上模板: [javascript] view plain copy   //我的工具,和之前的div.toolbox-all平级   div

java-Java做一个类似FileZilla的文件上传下载工具

问题描述 Java做一个类似FileZilla的文件上传下载工具 如题,想用java做这么一个工具,现在遇到几个问题: 1.怎么像图片中那样展示一个目录下面的文件,点击..可以返回上级目录,这个怎么做? 2.图片中的窗口很像windows的文件目录窗口,是不是调用了什么api?这些难道都是自己画的? 解决方案 java swing 做啊. 解决方案二: 你需要学习javax.swing这个包下面的类. JTree和JFileChooser可能对你做这个界面有帮助 javax.swing | 最常

java网络编程-打算做一个学习辅助工具箱，求大神给点设计思路，打算用JAVA做

问题描述 打算做一个学习辅助工具箱,求大神给点设计思路,打算用JAVA做 学习辅助工具箱里包括多功能计算器,还有数字逻辑实验模拟器,矩阵算法等等小工具.求大神给点设计的详细思路跟解决方案. 解决方案 你说的这些功能都可以google到. 特别地,你可以用 site:download.csdn.net + 你需要的程序 + java,限定只在csdn下载频道查找. 多学习些google的搜索技巧,你的效率会大大提高. 解决方案二: 一个功能一个功能的实现,最后拼凑起来

asp net 管理系统-求一个简单的asp的web页面管理系统，只要求实现增删改查就行

问题描述 求一个简单的asp的web页面管理系统,只要求实现增删改查就行 求大神发一个初学者的管理给我,顺带讲解讲解,实在做不出来....................qq:732796124

js-真心求教一个问题，关于编写web的外挂工具app或者桌面程序，具体请进，真心谢谢了

问题描述 真心求教一个问题,关于编写web的外挂工具app或者桌面程序,具体请进,真心谢谢了 我编写的过程中遇到一些疑惑不知道如何解决,所以特来真心求教,万望解惑,如果有描述不对或者很low,请谅解. 一个最具体的例子:像前两年12306抢票只能用网页来抢,没有app或者桌面程序,很多朋友都根据12306网站编写了外挂app或者桌面程序,避免老得打开个浏览器. 目前我也想做类似的事情,根据某个http的Web网站写个外挂app或者程序,作为一个程序员,我大致也知道大致的流程是:拼接url->发起

现在要做一个仿微信朋友圈的评论功能的需求,不知道该怎么去实现,求个大神知道一下

问题描述 现在在做一个android应用,要实现成类似于微信朋友圈的评论功能,功能需求是这样的:1:点击评论弹出输入框和软键盘,并把当前点击的item定位到输入框的上面,使输入框的顶部和当前item的底部挨着,但不能盖住这个item的内容2:点击发送之后把输入框中的信息动态的添加到当前item的最下端来个大神知道一下 解决方案