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

5个月前 网页前端 122°C

这篇文章最后更新于07-06 14:27前,您需要注意相关的内容是否还可用,如有疑问请联系作者!

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

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>
版权说明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。
本文链接:https://huue.cc/index.php/archives/860.html
最后编辑: 21年07月06日