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

最新推荐文章于 2022-01-22 21:54:31 发布

偌熙魔法袋

最新推荐文章于 2022-01-22 21:54:31 发布

阅读量1k

点赞数

本文链接：https://blog.youkuaiyun.com/u014209572/article/details/22644829

版权

本文介绍了如何设计响应式网站的底部toolbar，提供了一段包含HTML和CSS的代码示例，展示了如何创建一个包含电话、邮件、地图和分享等联系信息的toolbar。此外，还涉及到JavaScript交互功能，当点击toolbar时，它会通过改变底部位置来显示或隐藏更多内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

司的联系方式。

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

<footer id="box_footerBody">
<div name="下方工具条" id="elem-Toolbar_show01-001" class="columnSpace">
<div class="Toolbar_show01-d1_c1" id="Toolbar_show01-001">
<div class="footerToolStyle2 whiteIcon grayIcon">
<div class="controlBar open">
<span class="anchor"><span class="icon"><em></em></span></span><span class="controlBottom">
</span>
</div>
<ul id="footerWrap2hd" class="footerWrap">
<li class="active">
<div id="yptel">
<a href="tel:862164184200" class="icon tel"></a><a href="tel:862164184200"

class="text">Telphone</a>
</div>
</li>
<li class="active">
<div id="email">
<a href="http://www.zhengchang.com.br/contact/contact.html" class="icon email"></a>

</div>
</li>
<li class="active">
<div id="map">
<a href="http://www.zhengchang.com.br/templets/default/map.htm" class="icon map"></a>

<a href="http://www.zhengchang.com.br/templets/default/share.htm" class="text">contact</a>
</div>
</li>
<li class="active">
<div id="message">
<a href="http://www.zhengchang.com.br/contact/contact.html" class="icon message"></a>

<a href="http://www.zhengchang.com.br/contact/contact.html" class="text">message</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
$(".controlBar").click(function () {
if ($(this).attr("class").indexOf("open") > 0) {
$(this).removeClass("open").addClass("close");
$("#box_footerBody").css("bottom", "-45px");
} else {
$(this).removeClass("close").addClass("open");
$("#box_footerBody").css("bottom", "0px");
}
})
</script>

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;}
}