创建footer标签包含两个盒子,一个显示金额,一个显示支付按钮。
<footer class="pay-order">
<div class="sum">合计:¥<span class="money">123.00</span></div>
<div class="pay"><a href="#">
去支付
</a></div>
</footer>
样式:
*{
box-sizing: border-box;
}
body{
background-color: #f7f7f7;
}
.pay-order{
/*固定到底部*/
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 78px;
background-color:white;
padding: 0 10px;
/*flex布局*/
display: flex;
/*左右布局*/
justify-content: space-between;
/*垂直居中*/
align-items: center;
}
.sum .money{
font-weight: bold;
font-size: 20px;
color: brown;
}
.pay a{
display: block;
width: 80px;
text-align: center;
height: 35px;
line-height: 35px;
background-color: rgb(0, 190, 127);
border-radius: 3px;
color: white;
text-decoration: none;
}
效果: