做响应式网站底部toolbar的设计

      很多时候为了方便在手机端浏览网站，我们设计网站的时候要尽可能的以最简便的方式呈现完整的内容。toolbar工具

栏就是其中一个比较简单的方式，在终端浏览的时候toolbar会以比较小的空间呈现出必要的一些信息。大部分都会是公

司的联系方式。

    toolbar设计的网页中的代码如下：

   

   

       

           

               

                   
                   
               

               

                   
• 
                         
  
                             

                                class="text">Telphone
                         

  
                     

                   
• 
                         
  
                             

                               href="http://www.zhengchang.com.br/contact/contact.html" class="text">E-mail

                         

  
                     

                   
• 
                         
  
                             

                              mapa
                         

  
                     

                   
• 
                         
  
                             

                             contact
                         

  
                     

                   
• 
                         
  
                             

                             message
                         

  
                     

               

           

       

   

toolbar的样式代码如下，其中颜色和高度可以根据不同网站的风格自行改变，toolbar.css代码如下：

  #box_footerBody {
width: 100%;
height: 45px;
position:fixed;
bottom: 0px;
left: 0px;
/*z-index: 99999;原生浏览器高清无效*/
text-align: center;
background:transparent none;
border-top: none;
visibility:hidden;
-webkit-transition:bottom;
-webkit-transition-timing-function:ease-out;
-webkit-transition-duration:100ms;
}


.Toolbar_show01-d1_c1{
width: 100%;
max-width: 640px;
height: 45px;
margin: 0 auto;
}
.Toolbar_show01-d1_c1 > div{
height: 45px;
max-width:640px;
margin:0 auto;
}
/* footerToolStyle1 */
.Toolbar_show01-d1_c1 .footerWrap {
width: 100%;
overflow: hidden;
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
border-top:1px solid rgba(255,255,255,0.2);
height:44px;
    margin:0px auto;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#239AAB), to(#239AAB));
background: -moz-linear-gradient(#239AAB, #239AAB);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e2e', endColorstr='#d57722');
}
.Toolbar_show01-d1_c1 .footerWrap li {
text-align: center;
height:44px;
overflow:hidden;
border-right: 1px solid rgba(255,255,255,0.2);
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.Toolbar_show01-d1_c1 .footerWrap a,
.Toolbar_show01-d1_c1 .footerWrap div {
height: 44px;
display: block;
text-align: center;
vertical-align: middle;
color: #fff;
text-decoration: none;
}
.Toolbar_show01-d1_c1 .footerWrap li:nth-last-child(1) {
border-right:none;
}
.Toolbar_show01-d1_c1 .icon .numIcon {
width:18px;
height: 19px;
line-height: 19px;
font-size: 10px;
text-align:center;
display:block;
color: #fff;
background:url(../img/common.png) no-repeat -156px -223px;
background-size:400px;
-moz-background-size:400px;
position:absolute;
top:-2px;
right:-6px;
}
.Toolbar_show01-d1_c1 .icon .more99 {
font-size:9px;
-webkit-text-size-adjust:none;
}
.Toolbar_show01-d1_c1 .footerToolStyle3 .numIcon {
top:5px;
right:-5px;
}
.Toolbar_show01-d1_c1 .text {
height: 16px;
line-height: 16px;
font-size: 10px;
color: #fff;
text-decoration: none;
text-align: center;
display:block;
overflow:hidden;
}
.Toolbar_show01-d1_c1 .footerWrap .touch {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#239AAB), to(#239AAB));
background: -moz-linear-gradient(#239AAB, #239AAB);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ad6320', endColorstr='#975418');
}




.Toolbar_show01-d1_c1 .whiteIcon span.icon,
.Toolbar_show01-d1_c1 .grayIcon span.icon,.Toolbar_show01-d1_c1 .grayIcon a.icon{
width:30px;
height:20px;
display: block;
background: url(../img/common.png) no-repeat;
background-size:400px;
-moz-background-size:400px;


margin: 4px auto 0 auto;
position:relative;
}
.Toolbar_show01-d1_c1 .whiteIcon a:active,.Toolbar_show01-d1_c1 .whiteIcon a:visited{background:transparent;outline:none;border:0px;}
.Toolbar_show01-d1_c1 .whiteIcon a.email {
background-position:0px -110px;
}
.Toolbar_show01-d1_c1 .whiteIcon a.message {
background-position: -30px -110px;
}
.Toolbar_show01-d1_c1 .whiteIcon a.share {
background-position: -60px -110px;
}
.Toolbar_show01-d1_c1 .whiteIcon span.more {
background-position: -150px -110px;
}
.Toolbar_show01-d1_c1 .whiteIcon a.tel {
background-position: -90px -110px;
}
.Toolbar_show01-d1_c1 .whiteIcon a.map {
background-position: -120px -110px;
}
.Toolbar_show01-d1_c1 .whiteIcon span.cart {
background-position: -212px -110px;
}
.Toolbar_show01-d1_c1 .whiteIcon span.member {
background-position: -240px -110px;
}
.Toolbar_show01-d1_c1 .whiteIcon span.home {
background-position:-180px -110px;
}




/* footerToolStyle2 */
.Toolbar_show01-d1_c1 .footerToolStyle2 .controlBar {
width:100%;
max-width:640px;
height: 16px;
padding-top:14px;
border: none;
position:absolute;
z-index:9999;
top:-29px;
}
.Toolbar_show01-d1_c1 .footerToolStyle2 .controlBar .anchor {
display: block;
width: 100px;
height: 13px;
background: #239AAB;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin:0 auto;
}
.Toolbar_show01-d1_c1 .footerToolStyle2 .controlBar .controlBottom {
display: block;
height: 3px;
overflow:hidden;
background: #239AAB;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.Toolbar_show01-d1_c1 .footerToolStyle2 .controlBar .icon {
display: block;
width: 14px;
height: 8px;
margin: 0 auto;
overflow:hidden;
position:relative;
top:3px;
}
.Toolbar_show01-d1_c1 .footerToolStyle2 .controlBar .icon em{
display:block;
width:20px;
height:20px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position:relative;
border-right:1px solid rgba(255,255,255,0.8);
border-bottom:1px solid rgba(255,255,255,0.8);
top:-18px;
left:-4px;
}
.Toolbar_show01-d1_c1 .footerToolStyle2 .controlBar.close .icon em{
border-top:1px solid rgba(255,255,255,0.8);
border-left:1px solid rgba(255,255,255,0.8);
top:5px;
}
.Toolbar_show01-d1_c1 .footerToolStyle2 .controlBar.touch .anchor,
.Toolbar_show01-d1_c1 .footerToolStyle2 .controlBar.touch .controlBottom{
opacity:0.8;
}
@media (max-width:640px)
{
    #box_footerBody { visibility:visible;}
    }

另外还需要引入2个js文件：我这里这2个js文件名为jquery-11.js和jquery1.js在资源中。