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

寻梦xunm| 757| 收集

3年前

超过1234天温馨提示

本文最后更新于2021年07月06日，已超过1234天没有更新，若内容或图片失效，请留言反馈。

一款不错的应用展示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>

应用 css 样式代码

0 赞 or 打赏

喜欢就打赏一点