html5画界面常用标签整理

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>