简单图片列表

简单图片列表

<style>
   
    article{
        width: 250px;
        height: 366px;
        background-color:white;
        border: 1px solid #ccc;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    i{
        font-style: normal;
        text-indent: 1em;
    }
    span{
        text-decoration: none;
    }
    
    article:hover{
        border-color: red;
    }
    .icon-qian {
        color:red;
        font-weight: 700;
        /* height: 20px;
        width: 20px; */
        font-size: 16px;
        text-align: 16px;
    }
    .icon-tian-mao{
        font-size: 30px;
        text-align: 30px;
    }
    div{
       display:inline-block
    }
    div.text{
        text-decoration: none;
        font-size: 12px;
        text-indent: 1em;
    } 
    a{
        text-decoration: none;
    }
   
    .n2:hover{
        text-decoration:underline;
    }
    span{
        font-size: 12px;
        color: #ccc;
    }
    
</style>

       <i class="iconfont icon-qian">48.00 </i> <br> 
            
       <div class="n2"><a href="">薄荷健康高钙儿童鱼松虾米拌饭海味干货</div><br>
        <span><pre>薄荷健康旗舰店             132付款</pre></span>
        <i class="iconfont icon-tianmao"></i> 
            <div>           
                <select style="margin-left: 9em;">
                    <option>如实描述：4.9</option>
                    <option selected>卖家服务：4.9</option>
                    <option >发货速度:5.0</option>
                </select>  
            </div>                                                                        
   </div>   
</article>
<article >
    <div>
        <div class="top">
            <img src="./4.png" width="250px" height="250px">           
        </div>
        <div class="text">
             <i class="iconfont icon-qian">29.90 </i> <br> 
            
             <div class="n2"><a href="">儿童零食宝宝健康食品营养不上火高钙饼</div><br>
             <span><pre>那伽力                    563付款</pre></span>
           
              <div>           
                <select style="margin-left: 9em;">
                    <option>如实描述：4.9</option>
                    <option selected>卖家服务：4.9</option>
                    <option >发货速度:5.0</option>
                </select>  
              </div>                                        
       
                      
    </div>
</article>
<article >
    <div>
        <div class="top">
            <img src="./5.png" width="250px" height="250px">           
        </div>
        <div class="text">
             <i class="iconfont icon-qian">29.90 </i> <br> 
            
             <div class="n2"><a href="">进口曲奇饼干</div><br>
             <span><pre>张雅婷                    9999+付款</pre></span>
           
              <div>           
                <select style="margin-left: 9em;">
                    <option>如实描述：4.9</option>
                    <option selected>卖家服务：4.9</option>
                    <option >发货速度:5.0</option>
                </select>  
              </div>                                                                 
    </div>
</article>