Front-end Gadgets (9.3)--Make a Web page that imitates toolboxes (templates and styles in my tools)

Front-end Gadgets (9.1)--Make a Web page that imitates the  Toolbox (tab button Toggle)

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

Front-end Gadgets (9.2)--Make a Web page that imitates the toolbox (templates in all tools)

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

(iii) Layout of my Tools page

First of all, it is divided into two parts;

The first part is the whole red box area above;

• Contains a number of independent buttons, buttons are divided into pictures and two parts of the text below;

The second part is the blue box area below;

• Contains the Edit button on the left and the four shortcut button area on the right;
• The left is the icon and text, the icon is divided into pressed and non-pressed state;
• To the right is the text on the left and the button on the button, which is divided into icons and text. The button has a placeholder icon when there is no icon.

First on the template:

My tools, and before the Div.toolbox-all lateral div.toolbox-my.displaynone    //Upper area    div.toolbox-content//        Standalone button        Div.tool-my            div.img            div.text    Small refreshing calendar    //Lower area    div.toolbox-foot        //Edit button        div.edit            Div.img            div.text    Edit        //Right area        div.shortcut            //Description text to the left            div.description                div.text    Main interface Quick access:            //Right four buttons            div.tool-foot                div.img                div.text    System First Aid Kit            Div.tool-foot.placeholder                div.placeholder-img                div.text    Drag to this            div.tool-foot.placeholder                div.placeholder-img                div.text    Drag to this            div.tool-foot.placeholder                div.placeholder-img                div.text    Drag and drop to this

The

is then css

. Back Contentbox. toolbox-my {background-color:white;    padding:30px 40px 90px 40px; Position:relative;}.    Back. Contentbox. toolbox-my. toolbox-content {width:100%;    height:100%;    Overflow-x: Hidden;    Overflow-y: auto;    Display:flex; Flex-wrap:wrap;}.    Back. Contentbox. toolbox-my. toolbox-content. tool-my {width:100px;    height:100px;    Display:inline-block;    position:relative;    border:1px solid Transparent;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box; Box-sizing:border-box;}.    Back. Contentbox. toolbox-my. toolbox-content. tool-my:hover {-webkit-border-radius:2px;    -moz-border-radius:2px;    border-radius:2px; border:1px solid #DADADA;}.    Back. Contentbox toolbox-my toolbox-content. Tool-my. img {position:absolute;    top:18px;    left:23px;    right:23px;    bottom:28px; Background-image:url ("..    /img/toolsimg.png "); background-position:0 0;}. Back. Contentbox. toolbox-my. Toolbox-content.Tool-my. text {position:absolute;    bottom:9px;    width:100%;    Text-align:center;    line-height:12px;    height:12px;    font-size:12px; Color: #7c7c7c;}.    Back. Contentbox. toolbox-my. toolbox-foot {position:absolute;    left:0;    right:0;    bottom:0;    height:95px;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    Box-sizing:border-box; BORDER-TOP:1PX solid RGB (218, 218, 218);}.    Back. Contentbox. toolbox-my toolbox-foot. Edit {width:32px;    height:52px;    Position:absolute;    top:22px; left:30px;}.    Back. Contentbox. toolbox-my toolbox-foot. Edit. img {width:32px;    height:32px; Background-image:url (..    /img/toolbox.png); Background-position: -120px 0;}. Back. Contentbox. toolbox-my. Toolbox-foot. Edit Img:hover {background-position: -120px-50px;}.    Back. Contentbox. toolbox-my. Toolbox-foot. Edit. text {width:32px;    height:20px;    line-height:20px;    Vertical-align:bottom; Color:rgb (0, 138, 225);    font-size:12px;    Text-align:center; Cursor:default;}.    Back. Contentbox. toolbox-my. toolbox-foot. Shortcut {position:absolute;    right:13px;    top:9px;    bottom:15px;    width:450px;    Display:flex;    Justify-content:flex-end; Align-items:flex-end;}.    Back. Contentbox toolbox-my toolbox-foot shortcut. Description {width:98px; height:22px;}.    Back. Contentbox toolbox-my toolbox-foot. Shortcut. Description. text {height:22px;    line-height:22px;    font-size:11px;    Color: #7c7c7c; Vertical-align:top;}.    Back. Contentbox toolbox-my toolbox-foot shortcut. tool-foot {width:76px;    height:70px;    border:1px solid Transparent;    -webkit-border-radius:2px;    -moz-border-radius:2px;    border-radius:2px;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    Box-sizing:border-box; Position:relative;}. Back. Contentbox toolbox-my toolbox-foot shortcut. tool-foot:hover {border:1px solid #daDada;}.    Back. Contentbox toolbox-my toolbox-foot shortcut tool-foot. img {position:absolute;    top:13px;    left:21px;    right:21px;    height:34px;    -webkit-border-radius:2px;    -moz-border-radius:2px;    border-radius:2px;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    Box-sizing:border-box;    border:1px solid Transparent; Background-image:url ("..    /img/toolsimg.png ");    background-size:615px 615px;    /* This is used to calculate the position, and the actual position needs to be multiplied by 61.5% background-position:0 0;    */}.back. Contentbox. toolbox-my toolbox-foot shortcut. Tool-foot. text {position:absolute;    bottom:3px;    width:100%;    Text-align:center;    line-height:12px;    height:12px;    font-size:12px; Color: #7c7c7c;}. Back. Contentbox toolbox-my toolbox-foot shortcut. tool-foot.placeholder:hover {border:1px solid transparent;}.   Back. Contentbox toolbox-my toolbox-foot shortcut tool-foot.placeholder. placeholder-img {position:absolute; top:13px;    left:21px;    right:21px;    height:34px;    -webkit-border-radius:2px;    -moz-border-radius:2px;    border-radius:2px;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    Box-sizing:border-box; border:1px dotted #7c7c7c;}

Then some of the previous CSS and HTML Modifications:

First off, remove

Div. Bigtool    span.img (style= ' Background-image:url (... /img/bigimg03.png) ')

Note that a total of three above, the last picture link is different, modified to:

Div. Bigtool    span.img

We will load a large picture and then actually generate the time, set the Background-position property to set it to load which picture

Modify the following style with the same name as:

. Back Contentbox. Toolbox-all. FirstRow. Bigtool. img {    display:inline-block;    Position:absolute;    width:100%;    height:100%;    Background-image:url (".. /img/bigimg.png ");    background-position:0 0;;}

Then modify the style:

. Back Contentbox. Commanrow. Normaltool. img {    position:relative;    Display:inline-block;    width:60px;    height:60px;    Background-image:url (".. /img/toolsimg.png ");    background-position:0 0;;}

So, we need three images:

Toolbox.png to put the fragmented icons,

Bigimg.png enlarge icon, icon size is 300x160

Toolsimg.png normal icon, size is 52x52

The download link is:

Http://jianwangsan.cn/img/toolbox.png

Http://jianwangsan.cn/img/bigImg.png

Http://jianwangsan.cn/img/toolsImg.png

Put in an img folder for consumption

The current effect should be as follows:

The image is duplicated because it is using a picture of the default first position, which is modified when it is actually generated.

Demo Link:

Http://jianwangsan.cn/toolbox

This page finished, the main part of the page is done ~ ~ Of course, this is just a template, the concrete generated content, will be in the fourth part through JS to read JSON generated, read the benefits of JSON generation, in the future no matter add, delete or modify the icon, or even logic, are easy.

Front-end Gadgets (9.3)--Make a Web page that imitates toolboxes (templates and styles in my tools)