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>