html下边导航菜单的制作
html代码
<div id="nav">
<div class="content">
<div class="left"><i class="iconfont icon-gouwuche"></i><span class="price">购物车是空的</span></div>
<div class="right"><a href="">立即下单</a></div>
</div>
</div>
css样式
#nav {
position: fixed;
bottom: 0;
left: 0;
100%;
}
#nav .content {
max- 800px;
100%;
margin: 0 auto;
background-color: #fff;
height: 45px;
position: relative;
}
#nav .content:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
200%;
height: 1px;
border-top: 1px solid #999999;
transform: scale(0.5,0.5);
transform-origin: 0 0;
-webkit-transform: scale(0.5,0.5);
-webkit-transform-origin: 0 0;
box-szing: border-box;
}
#nav .content .left {
height: 45px;
float: left;
70%;
}
#nav .content .left i.iconfont {
position: absolute;
top: -10px;
left: 4%;
display: block;
45px;
height: 45px;
border-radius: 100%;
background-color: #cccccc;
float: left;
text-align: center;
line-height: 45px;
color: #fff;
font-size: 1.6em;
}
#nav .content .left .price {
float: left;
display: block;
line-height: 45px;
margin-left: 80px;
color: #999;
}
#nav .content .right {
30%;
height: 45px;
float: right;
text-align: center;
}
#nav .content .right a {
display: block;
line-height: 50px;
background-color: #FF6600;
color: #fff;
}
#nav #cart-active {
background-color: #04BE02;
}