一款不错的应用展示css样式

网页前端
339 0

一款不错的应用展示css样式

火狐截图_2021-07-06T06-23-09.032Z.png

css样式

.product span {
    font-size: 16px;
    float: left;
    width: 264.9px;
    height: 67px;
    box-sizing: border-box;
    margin: 5px;
    border: 1px solid #f3f3f3;
    position: relative;
    background-color: white;
    overflow: hidden;
    display: block;
}
.product img {
    width: 45px;
    height: 45px;
    border: 1px solid #f5f5f5;
    margin: 10px;
    float: left;
    border-radius: 5px;
    transition: all .2s ease;
}

.product em.pro-title {
    width: 250px !important;
    line-height: 25px;
    height: 25px;
    margin-top: 10px;
}
.product em {
    display: block;
}

.product em.slogan {
    font-size: 12px;
    color: #999;
    width: 185px;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product em {
    display: block;
}

html代码

<div class="product">
    <a href="p67.html" target="_blank">
         <span>
            <img src="http://img.prohui.com/wiki/logo/20180330/20180330153616705.jpg?imageView2/1/w/150/h/150" alt="京东">
            <em class="pro-title">
              京东                                        </em>
            <em class="slogan">综合类购物平台</em>
         </span>
     </a>
    <a href="p67.html" target="_blank">
         <span>
            <img src="http://img.prohui.com/wiki/logo/20180330/20180330153616705.jpg?imageView2/1/w/150/h/150" alt="京东">
            <em class="pro-title">
              京东                                        </em>
            <em class="slogan">综合类购物平台</em>
         </span>
     </a>    <a href="p67.html" target="_blank">
         <span>
            <img src="http://img.prohui.com/wiki/logo/20180330/20180330153616705.jpg?imageView2/1/w/150/h/150" alt="京东">
            <em class="pro-title">
              京东                                        </em>
            <em class="slogan">综合类购物平台</em>
         </span>
     </a>    <a href="p67.html" target="_blank">
         <span>
            <img src="http://img.prohui.com/wiki/logo/20180330/20180330153616705.jpg?imageView2/1/w/150/h/150" alt="京东">
            <em class="pro-title">
              京东                                        </em>
            <em class="slogan">综合类购物平台</em>
         </span>
     </a>
</div>

最后更新 2021-07-06
评论 ( 0 )
OωO
隐私评论