0.顶部一张banner图片横铺
.tl-header{ width: 100%; height: auto; } <section class="tl-header"> <img src="../assets/img/ch_banner.png" alt="" width="100%"> </section>
1.原价划掉效果:
.tl-s{
text-decoration:line-through;
color: #999;
}
<div style="text-align: center;padding-top: 20px;color: #999">原价:<span class="tl-s">1980元</span></div>
2.图片与文字一行对齐:
<div > <img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a> </div>
3.载入一张背景图片,然后在上面写文字等操作
如同下面这个一样
.tl-card{ background: url("../assets/img/c_card1.png") no-repeat center 0; background-size: 100% 100%; width: 295px; height: 153px; margin-top: 22px; position: relative; } <div class="tl-card"> <div style="text-align: center;padding-top: 20px;color: #999">原价:<span class="tl-s">1980元</span></div> <div class="tl-font-14-5-b tl-p-30">抵扣后价格</div> <div class="font-24 tl-p-40">1000元</div> </div>