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

2022-03-11 22:25:19

（三）我的工具页面布局

如图：

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


 

首先将其分为二部分；

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

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

 

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

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

 

 

先上模板：

[javascript] view plain copy  前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）
  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  前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）
  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  前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）
  1. div.BigTool  
  2.     span.img(style='background-image: url(../img/bigImg03.png)')  

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

[javascript] view plain copy  前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）
  1. div.BigTool  
  2.     span.img  
我们将加载一个大图片，然后实际生成的时候，设置background-position属性，来设置其加载哪个图片

修改以下同名样式为：

[css] view plain copy  前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）
  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  前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）
  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文件夹之内食用

 

目前效果应该如下：

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


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


图片之所以重复，是因为使用的是默认第一个位置的图片，在实际生成的时候，会进行修改。

 

demo链接：

http://jianwangsan.cn/toolbox


这个页面做完，主要部分的页面就做完啦~~当然，这只是模板，具体生成内容，会在第四部分通过js来读取json而生成，读取JSON生成的好处，在于日后无论添加、删除或者修改图标，甚至逻辑，都很容易。

上一篇：OpenCV读视频文件和运动物体检测


下一篇：ORACLE大表关联更新提速方法