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

 上一篇链接:

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


DEMO:

http://jianwangsan.cn/toolbox


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

我将他拆成五部分:

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


 

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

第二部分是小按钮;

第三部分是一条颜色很淡的线,他只在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;
}


 

③小按钮:

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

所有小按钮放在同一个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代码:

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

 


你可能感兴趣的:(前端的小玩意,前端的小玩意)