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

水深无声 2022-09-25 08:17 59阅读 0赞

上一篇链接：

http://blog.csdn.net/qq20004604/article/details/52216203

DEMO：

http://jianwangsan.cn/toolbox

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

我将他拆成五部分：

![20160816235917963][]

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

第二部分是小按钮；

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

第四部分是标题；

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

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

②大按钮：

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

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

html：

div.contentbox
        //下面这个是全部工具里页面最顶级的，目前共有两个，通过displayNONE这个类是否存在，来决定显示哪个
        div.toolbox-all
            //这个是最上面的大图标那一行
            div.firstRow
                //以下是单个按钮
                div.BigTool
                    //背景图
                    span.img(style='background-image: url(../img/bigImg01.png)')
                    //阴影遮罩
                    span.mask
                    //文字
                    div.text
                        div.title   微信清理
                        div.description     定期清理微信，节省手机空间
                    //添加按钮
                    div.addButton   添　加
                div.BigTool
                    span.img(style='background-image: url(../img/bigImg02.png)')
                    span.mask
                    div.text
                        div.title   雷电OS
                        div.description     雷电OS Editor 旧机变新机
                    div.addButton   添　加
                div.BigTool
                    span.img(style='background-image: url(../img/bigImg03.png)')
                    span.mask
                    div.text
                        div.title   手机相册扩容
                        div.description     无损处理照片，腾出50%空间
                    div.addButton   添　加

CSS

.back .contentbox > div {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    
    .back .contentbox .toolbox-all {
        background: white;
        padding: 30px;
        overflow: auto;
    }
    
    .back .contentbox .toolbox-my {
        background: green;
    }
    
    .back .contentbox .toolbox-all .firstRow {
        width: 100%;
        height: 140px;
        display: flex;
        justify-content: space-between;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool {
        width: 300px;
        height: 140px;
        position: relative;
        cursor: pointer;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .img {
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .mask {
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
        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%);
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 55px;
        padding: 0 10px;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .text .title {
        font-weight: 600;
        font-size: 18px;
        color: white;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .text .description {
        font-size: 14px;
        margin-top: 10px;
        color: rgb(218, 218, 218);
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .addButton {
        display: none;
        position: absolute;
        bottom: 10px;
        right: 12px;
        width: 60px;
        height: 22px;
        background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);
        font-size: 12px;
        color: white;
        text-align: center;
        line-height: 20px;
        border: 1px solid rgb(65, 199, 36);
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool:hover .addButton {
        display: block;
    }

③小按钮：

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

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

commonRow和上面的firstRow是平级的

HTML：

div.commanRow
        div.normalTool
            div.img
            div.text
                div.title   手游模拟器
                div.description     电脑玩手游，挂机辅助神器
            div.addButton   添　加
        div.normalTool
            div.img
            div.text
                div.title   手游模拟器
                div.description     电脑玩手游，挂机辅助神器
            div.addButton   添　加
        div.normalTool
            div.img
            div.text
                div.title   手游模拟器
                div.description     电脑玩手游，挂机辅助神器
            div.addButton   添　加
        div.normalTool
            div.img
            div.text
                div.title   手游模拟器
                div.description     电脑玩手游，挂机辅助神器
            div.addButton   添　加

CSS

.back .contentbox .commanRow {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        flex-flow: wrap;
    }
    
    .back .contentbox .commanRow .normalTool {
        width: 300px;
        height: 70px;
        position: relative;
        cursor: pointer;
        padding: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .back .contentbox .commanRow .normalTool:hover {
        outline: 1px solid #dadada;
    }
    
    .back .contentbox .commanRow .normalTool .img {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 60px;
        background-color: blue;
    }
    
    .back .contentbox .commanRow .normalTool .text {
        position: absolute;
        left: 75px;
        right: 5px;
        top: 5px;
        bottom: 5px;
    }
    
    .back .contentbox .commanRow .normalTool .text .title {
        line-height: 35px;
        font-size: 16px;
    }
    
    .back .contentbox .commanRow .normalTool .text .description {
        line-height: 25px;
        font-size: 12px;
        color: #aaa;
    }
    
    .back .contentbox .commanRow .normalTool .addButton {
        display: none;
        position: absolute;
        top: 10px;
        right: 15px;
        width: 60px;
        height: 22px;
        background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);
        font-size: 12px;
        color: white;
        text-align: center;
        line-height: 20px;
        border: 1px solid rgb(65, 199, 36);
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
    }
    
    .back .contentbox .commanRow .normalTool:hover .addButton {
        display: block;
    }

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

直接插入一个div，利用

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

属性来设置，

html：

**div**.*dotted*

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

css：

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

⑤标题：

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

html

div.titleRow
        span.titleRow-left
        span.titleRow-text  电脑安全

CSS：

.back .contentbox .titleRow {
        width: 100%;
        height: 20px;
        margin-top: 25px;
    }
    
    .back .contentbox .titleRow .titleRow-left {
        display: inline-block;
        width: 2px;
        height: 100%;
        background-color: rgb(42, 191, 29);
    }
    
    .back .contentbox .titleRow .titleRow-text {
        height: 100%;
        display: inline-block;
        line-height: 20px;
        margin-left: 10px;
        vertical-align: top;
        font-size: 18px;
        color: #000;
    }

⑥滚动条

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

不需要html代码；

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

/* 有这行才有效，滚动条的宽度 */
    .back .contentbox ::-webkit-scrollbar {
        width: 12px;
    }
    
    /* 滚动条的背景 */
    .back .contentbox ::-webkit-scrollbar-track {
        background-color: rgb(242, 242, 242);
    }
    
    /*滚动条*/
    .back .contentbox ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: rgb(218, 218, 218);
    }
    
    .back .contentbox ::-webkit-scrollbar-button {
        width: 12px;
    }

总结：

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

后附目前为止的代码：

HTML：（jade格式）

extends layout
    block content
        link(rel='stylesheet', href='./stylesheets/toolboxes.css')
        script(type="text/javascript",src='javascripts/toolboxes.js')
        div 博客地址：
            a(href='http://blog.csdn.net/qq20004604?viewmode=list' target='_blank') http://blog.csdn.net/qq20004604?viewmode=list
            br
            br
        div.back
            div.tooltop
                div.tooltop-img
                div.toolTab
                    div.tool#alltool
                        span.img.alltool.select
                        span.text    全部工具
                        div.hover
                    div.tool#mytool
                        span.img.mytool
                        span.text    我的工具
            div.contentbox
                //下面这个是全部工具里页面最顶级的，目前共有两个，通过displayNONE这个类是否存在，来决定显示哪个
                div.toolbox-all
                    //这个是最上面的大图标那一行
                    div.firstRow
                        //以下是单个按钮
                        div.BigTool
                            //背景图
                            span.img(style='background-image: url(../img/bigImg01.png)')
                            //阴影遮罩
                            span.mask
                            //文字
                            div.text
                                div.title   微信清理
                                div.description     定期清理微信，节省手机空间
                            //添加按钮
                            div.addButton   添　加
                        div.BigTool
                            span.img(style='background-image: url(../img/bigImg02.png)')
                            span.mask
                            div.text
                                div.title   雷电OS
                                div.description     雷电OS Editor 旧机变新机
                            div.addButton   添　加
                        div.BigTool
                            span.img(style='background-image: url(../img/bigImg03.png)')
                            span.mask
                            div.text
                                div.title   手机相册扩容
                                div.description     无损处理照片，腾出50%空间
                            div.addButton   添　加
                    //横线那一行，如果是多行app，应考虑使用另外一个
                    div.dotted
                    div.commanRow
                        div.normalTool
                            div.img
                            div.text
                                div.title   手游模拟器
                                div.description     电脑玩手游，挂机辅助神器
                            div.addButton   添　加
                        div.normalTool
                            div.img
                            div.text
                                div.title   手游模拟器
                                div.description     电脑玩手游，挂机辅助神器
                            div.addButton   添　加
                        div.normalTool
                            div.img
                            div.text
                                div.title   手游模拟器
                                div.description     电脑玩手游，挂机辅助神器
                            div.addButton   添　加
                        div.dotted
                        div.normalTool
                            div.img
                            div.text
                                div.title   手游模拟器
                                div.description     电脑玩手游，挂机辅助神器
                            div.addButton   添　加
                    div.titleRow
                        span.titleRow-left
                        span.titleRow-text  电脑安全
                    div.commanRow
                        div.normalTool
                            div.img
                            div.text
                                div.title   手游模拟器
                                div.description     电脑玩手游，挂机辅助神器
                            div.addButton   添　加
                div.toolbox-my.displayNONE

CSS代码：

a[href='/toolbox'] {
        color: #555;
        text-decoration: none;
        background-color: #e5e5e5;
        -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
        -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    }
    
    .back {
        height: 600px;
        width: 100%;
        position: relative;
        -webkit-box-shadow: 0px 0px 2px #555;
        -moz-box-shadow: 0px 0px 2px #555;
        box-shadow: 0px 0px 2px #555;
        min-width: 1000px;
    }
    
    .back * {
        border: 0;
        padding: 0;
        margin: 0;
    }
    
    .back .tooltop {
        height: 120px;
        width: 100%;
        background-color: white;
        position: relative;
    }
    
    .back .tooltop-img {
        height: 100%;
        width: 100%;
        background-image: url(../img/toolboxBackground.png);
        background-size: cover;
    }
    
    .back .toolTab {
        position: absolute;
        left: 0;
        bottom: 10px;
        height: 35px;
        width: 100%;
    }
    
    .back .toolTab .tool {
        margin-left: 20px;
        width: 140px;
        height: 100%;
        line-height: 30px;
        color: white;
        font-size: 22px;
        font-weight: 900;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        cursor: default;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .back .toolTab .tool .img {
        height: 27px;
        width: 27px;
        background-repeat: no-repeat;
        display: inline-block;
        vertical-align: middle;
        background-image: url(../img/toolbox.png);
    }
    
    .back .toolTab .tool .img.alltool {
        background-position: 0 0;
    }
    
    .back .toolTab .tool .img.alltool.select {
        background-position: 0 -50px;
    }
    
    .back .toolTab .tool .img.mytool {
        background-position: -40px 0;
    }
    
    .back .toolTab .tool .img.mytool.select {
        background-position: -40px -50px;
    }
    
    .back .toolTab .tool .text {
    }
    
    .back .toolTab .hover {
        height: 2px;
        width: 125px;
        background-color: white;
        position: absolute;
        bottom: -2px;
        left: 0;
    }
    
    .back .contentbox {
        position: absolute;
        top: 120px;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
    }
    
    .back .contentbox > div {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    
    .back .contentbox .toolbox-all {
        background: white;
        padding: 30px;
        overflow: auto;
    }
    
    .back .contentbox .toolbox-my {
        background: green;
    }
    
    .back .contentbox .toolbox-all .firstRow {
        width: 100%;
        height: 140px;
        display: flex;
        justify-content: space-between;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool {
        width: 300px;
        height: 140px;
        position: relative;
        cursor: pointer;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .img {
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .mask {
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
        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%);
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 55px;
        padding: 0 10px;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .text .title {
        font-weight: 600;
        font-size: 18px;
        color: white;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .text .description {
        font-size: 14px;
        margin-top: 10px;
        color: rgb(218, 218, 218);
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool .addButton {
        display: none;
        position: absolute;
        bottom: 10px;
        right: 12px;
        width: 60px;
        height: 22px;
        background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);
        font-size: 12px;
        color: white;
        text-align: center;
        line-height: 20px;
        border: 1px solid rgb(65, 199, 36);
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
    }
    
    .back .contentbox .toolbox-all .firstRow .BigTool:hover .addButton {
        display: block;
    }
    
    .back .contentbox .dotted {
        border: 1px dotted rgb(209, 209, 209);
        margin-top: 10px;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .back .contentbox .commanRow {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        flex-flow: wrap;
    }
    
    .back .contentbox .commanRow .normalTool {
        width: 300px;
        height: 70px;
        position: relative;
        cursor: pointer;
        padding: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .back .contentbox .commanRow .normalTool:hover {
        outline: 1px solid #dadada;
    }
    
    .back .contentbox .commanRow .normalTool .img {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 60px;
        background-color: blue;
    }
    
    .back .contentbox .commanRow .normalTool .text {
        position: absolute;
        left: 75px;
        right: 5px;
        top: 5px;
        bottom: 5px;
    }
    
    .back .contentbox .commanRow .normalTool .text .title {
        line-height: 35px;
        font-size: 16px;
    }
    
    .back .contentbox .commanRow .normalTool .text .description {
        line-height: 25px;
        font-size: 12px;
        color: #aaa;
    }
    
    .back .contentbox .commanRow .normalTool .addButton {
        display: none;
        position: absolute;
        top: 10px;
        right: 15px;
        width: 60px;
        height: 22px;
        background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);
        font-size: 12px;
        color: white;
        text-align: center;
        line-height: 20px;
        border: 1px solid rgb(65, 199, 36);
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
    }
    
    .back .contentbox .commanRow .normalTool:hover .addButton {
        display: block;
    }
    
    .back .contentbox .titleRow {
        width: 100%;
        height: 20px;
        margin-top: 25px;
    }
    
    .back .contentbox .titleRow .titleRow-left {
        display: inline-block;
        width: 2px;
        height: 100%;
        background-color: rgb(42, 191, 29);
    }
    
    .back .contentbox .titleRow .titleRow-text {
        height: 100%;
        display: inline-block;
        line-height: 20px;
        margin-left: 10px;
        vertical-align: top;
        font-size: 18px;
        color: #000;
    }
    
    /* 有这行才有效，滚动条的宽度 */
    .back .contentbox ::-webkit-scrollbar {
        width: 12px;
    }
    
    /* 滚动条的背景 */
    .back .contentbox ::-webkit-scrollbar-track {
        background-color: rgb(242, 242, 242);
    }
    
    /*滚动条*/
    .back .contentbox ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: rgb(218, 218, 218);
    }
    
    .back .contentbox ::-webkit-scrollbar-button {
        width: 12px;
    }

JS代码：

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

[20160816235917963]: /images/20220718/8018c838541d4181b2138d3a39b0b366.png