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>