行內塊練習

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        font-size: 0;

    }
    .t1{
        color:#000;
        font-size: 18px;
    }
    .t2{
        color:#64c333;
        font-size: 14px;
    }
    .main div{
        display: inline-block;
        height: 200px;
        width: 216px;
        padding-left: 20px;
        padding-top: 20px;
        border: 5px solid #ccc;
        border-left:2px solid #ccc;
        border-right:2px solid #ccc;
    }
    img{
        width: 154px;
        margin-left: 60px;
    }
</style>
<body>
    <div class="main">
        <div>
            <p class="t1">抱抱果新首發</p>
            <p class="t2">抱一下就幸福</p>
            <img src="./images/1.jpg" >
        </div>
        <div>
            <p class="t1">天貓冰箱節</p>
            <p class="t2">智由隨風</p>
            <img src="./images/2.jpg" >
        </div>
        <div>
            <p class="t1">西門子全球精選</p>
            <p class="t2">旗艦精品享你所想</p>
            <img src="./images/3.jpg">
        </div>
        <div>
            <p class="t1">進口葡萄酒專場</p>
            <p class="t2">原瓶進口品質保證</p>
            <img src="./images/4.jpg" >
        </div>
        <div>
            <p class="t1">手機專場</p>
            <p class="t2">原裝正品</p>
            <img src="./images/5.jpg" >
        </div>
    </div>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章