饿了么html css实现 饿了么day04前端网页-商家信息页面

html界面下面结算部分

3

¥12.88

另需配送费3元

去结算

css这样写让他更好看一点 要注意细节比如右上角的红色数字等

.shopcar{

width: 100%;

height: 14vw;

position: fixed;

left: 0;

bottom: 0;

display: flex;

}

.shopcarleft{

flex:2;

background-color: #505051;

display: flex;

}

.shopcarright{

flex:1;

background-color: #38CA73;

}

.shopcarimg{

width: 16vw;

height: 16vw;

box-sizing: border-box;

border: solid 1.6vw #444;

border-radius: 8vw;

background-color: #3190E8;

font-size: 7vw;

color: #fff;

display: flex;

justify-content: center;

align-items: center;

margin-top: -4vw;

margin-left: 3vw;

position: relative;/*相对定位*/

}

.count{

/* */

width: 5vw;

height: 5vw;

border-radius: 2.5vw;

background-color: red;

color: #fff;

font-size: 3.6vw;

display: flex;

justify-content: center;

align-items: center;

/*让数字在右上角显示 */

position: absolute;/*对于购物车图标绝对定位*/

right: -1.5vw;

top: -1.5vw;

}

.shopcarinfo p:first-child{

font-size: 4.5vw;

color: #FFFFFF;

margin-top: 1vw;

}

.shopcarinfo p:last-child{

font-size: 2.8vw;

color: #AAA;

}

.sendstart{

width: 100%;

height: 100%;

background-color: #38CA73;

color: #FFFFFF;

font-size: 4.5vw;

font-weight: 700;

user-select: none;

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

}

/*.sendstart{

width: 100%;

height: 100%;

background-color: #535356;

color: #FFFFFF;

font-size: 4.5vw;

font-weight: 700;

user-select: none;

display: flex;

justify-content: center;

align-items: center;

}*/

image.png