网站开发：产品图片布局

最新推荐文章于 2022-03-02 17:17:36 发布

原创最新推荐文章于 2022-03-02 17:17:36 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

网站设计同时被 2 个专栏收录

1 篇文章

订阅专栏

JQuery

1 篇文章

订阅专栏

需求描述

在选项卡列表中，以图文的形式展示产品。

内容设定

添加图片到页面

<div class="pic-list">
    <ul class="clearfloat">
        <li><img src="image/products/1.png" alt=""></li>
        <li><img src="image/products/2.png" alt=""></li>
        <li><img src="image/products/3.png" alt=""></li>
        <li><img src="image/products/4.png" alt=""></li>
        <li><img src="image/products/5.png" alt=""></li>
    </ul>
</div>

添加样式

.pic-list li {
    list-style: none;
    float: left;
    width: 18%;
    height: 200px;
    overflow: hidden;
    margin-right: 3px;
}

.pic-list li img {
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: 2px solid #ffb31c;
}

.pic-list li img:hover {
    background-color: #7A5FE8;
}