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

简介:

DEMO:

http://jianwangsan.cn/toolbox


(二)全部工具里面的按钮和样式

我将他拆成五部分:



 

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

第二部分是小按钮;

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

第四部分是标题;

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

 

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

 

②大按钮:

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

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

 

html

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  1. .back .contentbox > div {  
  2.     width100%;  
  3.     height100%;  
  4.     box-sizing: border-box;  
  5. }  
  6.   
  7. .back .contentbox .toolbox-all {  
  8.     backgroundwhite;  
  9.     padding30px;  
  10.     overflowauto;  
  11. }  
  12.   
  13. .back .contentbox .toolbox-my {  
  14.     backgroundgreen;  
  15. }  
  16.   
  17. .back .contentbox .toolbox-all .firstRow {  
  18.     width100%;  
  19.     height140px;  
  20.     display: flex;  
  21.     justify-content: space-between;  
  22. }  
  23.   
  24. .back .contentbox .toolbox-all .firstRow .BigTool {  
  25.     width300px;  
  26.     height140px;  
  27.     positionrelative;  
  28.     cursorpointer;  
  29. }  
  30.   
  31. .back .contentbox .toolbox-all .firstRow .BigTool .img {  
  32.     display: inline-block;  
  33.     positionabsolute;  
  34.     width100%;  
  35.     height100%;  
  36. }  
  37.   
  38. .back .contentbox .toolbox-all .firstRow .BigTool .mask {  
  39.     display: inline-block;  
  40.     positionabsolute;  
  41.     width100%;  
  42.     height100%;  
  43.     background-image: linear-gradient(rgba(00000%, rgba(000040%, rgba(0000.560%, rgba(0000.8100%);  
  44. }  
  45.   
  46. .back .contentbox .toolbox-all .firstRow .BigTool .text {  
  47.     positionabsolute;  
  48.     bottom: 0;  
  49.     left: 0;  
  50.     right: 0;  
  51.     height55px;  
  52.     padding0 10px;  
  53. }  
  54.   
  55. .back .contentbox .toolbox-all .firstRow .BigTool .text .title {  
  56.     font-weight600;  
  57.     font-size18px;  
  58.     colorwhite;  
  59. }  
  60.   
  61. .back .contentbox .toolbox-all .firstRow .BigTool .text .description {  
  62.     font-size14px;  
  63.     margin-top10px;  
  64.     colorrgb(218218218);  
  65. }  
  66.   
  67. .back .contentbox .toolbox-all .firstRow .BigTool .addButton {  
  68.     displaynone;  
  69.     positionabsolute;  
  70.     bottom: 10px;  
  71.     right: 12px;  
  72.     width60px;  
  73.     height22px;  
  74.     background-image: linear-gradient(rgb(98227250%rgb(6820827100%);  
  75.     font-size12px;  
  76.     colorwhite;  
  77.     text-aligncenter;  
  78.     line-height20px;  
  79.     border1px solid rgb(6519936);  
  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.     displayblock;  
  87. }  


 

③小按钮:

分为左边的图片,右边的文字(titledescription),添加按钮

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

commonRow和上面的firstRow是平级的

 

HTML

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  1. .back .contentbox .commanRow {  
  2.     width100%;  
  3.     display: flex;  
  4.     justify-content: space-between;  
  5.     margin-top10px;  
  6.     flex-flow: wrap;  
  7. }  
  8.   
  9. .back .contentbox .commanRow .normalTool {  
  10.     width300px;  
  11.     height70px;  
  12.     positionrelative;  
  13.     cursorpointer;  
  14.     padding5px;  
  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.     outline1px solid #dadada;  
  22. }  
  23.   
  24. .back .contentbox .commanRow .normalTool .img {  
  25.     positionrelative;  
  26.     display: inline-block;  
  27.     width60px;  
  28.     height60px;  
  29.     background-colorblue;  
  30. }  
  31.   
  32. .back .contentbox .commanRow .normalTool .text {  
  33.     positionabsolute;  
  34.     left: 75px;  
  35.     right: 5px;  
  36.     top: 5px;  
  37.     bottom: 5px;  
  38. }  
  39.   
  40. .back .contentbox .commanRow .normalTool .text .title {  
  41.     line-height35px;  
  42.     font-size16px;  
  43. }  
  44.   
  45. .back .contentbox .commanRow .normalTool .text .description {  
  46.     line-height25px;  
  47.     font-size12px;  
  48.     color#aaa;  
  49. }  
  50.   
  51. .back .contentbox .commanRow .normalTool .addButton {  
  52.     displaynone;  
  53.     positionabsolute;  
  54.     top: 10px;  
  55.     right: 15px;  
  56.     width60px;  
  57.     height22px;  
  58.     background-image: linear-gradient(rgb(98227250%rgb(6820827100%);  
  59.     font-size12px;  
  60.     colorwhite;  
  61.     text-aligncenter;  
  62.     line-height20px;  
  63.     border1px solid rgb(6519936);  
  64.     -webkit-border-radius: 1px;  
  65.     -moz-border-radius: 1px;  
  66.     border-radius: 1px;  
  67. }  
  68.   
  69. .back .contentbox .commanRow .normalTool:hover .addButton {  
  70.     displayblock;  
  71. }  

 

 

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

直接插入一个div,利用

border1px dotted rgb(209209209);

属性来设置,

 

html

div.dotted

 

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

 

css

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  1. div.titleRow  
  2.     span.titleRow-left  
  3.     span.titleRow-text  电脑安全  

 

CSS

[css]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. .back .contentbox .titleRow {  
  2.     width100%;  
  3.     height20px;  
  4.     margin-top25px;  
  5. }  
  6.   
  7. .back .contentbox .titleRow .titleRow-left {  
  8.     display: inline-block;  
  9.     width2px;  
  10.     height100%;  
  11.     background-colorrgb(4219129);  
  12. }  
  13.   
  14. .back .contentbox .titleRow .titleRow-text {  
  15.     height100%;  
  16.     display: inline-block;  
  17.     line-height20px;  
  18.     margin-left10px;  
  19.     vertical-aligntop;  
  20.     font-size18px;  
  21.     color#000;  
  22. }  

 

⑥滚动条

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

不需要html代码;

 

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

[css]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. /* 有这行才有效,滚动条的宽度 */  
  2. .back .contentbox ::-webkit-scrollbar {  
  3.     width12px;  
  4. }  
  5.   
  6. /* 滚动条的背景 */  
  7. .back .contentbox ::-webkit-scrollbar-track {  
  8.     background-colorrgb(242242242);  
  9. }  
  10.   
  11. /*滚动条*/  
  12. .back .contentbox ::-webkit-scrollbar-thumb {  
  13.     -webkit-border-radius: 5px;  
  14.     border-radius: 5px;  
  15.     backgroundrgb(218218218);  
  16. }  
  17.   
  18. .back .contentbox ::-webkit-scrollbar-button {  
  19.     width12px;  
  20. }  

 

总结:

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

 

 

后附目前为止的代码:

HTML:(jade格式)

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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
  在CODE上查看代码片 派生到我的代码片
  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代码:

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

目录
相关文章
|
19天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
8 1
.自定义认证前端页面
|
23天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
38 3
|
6天前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
29 8
|
9天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
14天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
14天前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
|
20天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
21天前
|
前端开发 JavaScript API
前端开发的秘密武器:这些工具让你轻松应对各种复杂动画效果!
【10月更文挑战第30天】前端开发中,动画效果为页面增添了无限生机。CSS3的@keyframes规则和JavaScript动画库如GSAP、Anime.js等,使开发者能轻松实现从简单到复杂的动画效果。掌握动画原理和设计原则,结合工具和库,可以创造出既美观又实用的动画,提升用户体验。
46 4
|
19天前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
27 2
|
24天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
24 3
下一篇
无影云桌面