图片展示 - 优化图片体验与网站性能 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>图片展示</title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
<pre><code>    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    h1 {
        text-align: center;
        margin-bottom: 30px;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    .col {
        flex: 1;
        padding: 0 10px;
        margin-bottom: 20px;
    }

    .col img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
        transition: opacity 0.3s ease;
    }

    .col img:hover {
        opacity: 0.8;
    }

    .product-info {
        display: flex;
        align-items: center;
        margin-top: 50px;
    }

    .product-info img {
        width: 30%;
        height: auto;
        margin-right: 50px;
        border-radius: 5px;
    }

    .product-info p {
        font-size: 18px;
        line-height: 1.5;
        color: #333;
    }

    /* 响应式布局 */
    @media (max-width: 768px) {
        .row {
            flex-direction: column;
        }

        .col {
            flex: none;
            width: 100%;
        }
    }
&lt;/style&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/lightbox.min.css&quot;&gt;
&lt;script src=&quot;js/lightbox.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function() {
        // 启用lightbox插件
        lightbox.option({
            'resizeDuration': 200,
            'wrapAround': true
        });
    });
&lt;/script&gt;
</code></pre>
</head>
<body>
    <div class="container">
        <h1>图片展示</h1>
        <div class="row">
            <div class="col">
                <a href="img/1.png" data-lightbox="group1"><img src="img/1.png" alt="图片1"></a>
            </div>
            <div class="col">
                <a href="img/2.png" data-lightbox="group1"><img src="img/2.png" alt="图片2"></a>
            </div>
            <div class="col">
                <a href="img/3.png" data-lightbox="group1"><img src="img/3.png" alt="图片3"></a>
            </div>
            <div class="col">
                <a href="img/4.png" data-lightbox="group1"><img src="img/4.png" alt="图片4"></a>
            </div>
            <div class="col">
                <a href="img/5.png" data-lightbox="group1"><img src="img/5.png" alt="图片5"></a>
            </div>
            <div class="col">
                <a href="img/6.png" data-lightbox="group1"><img src="img/6.png" alt="图片6"></a>
            </div>
        </div>
        <div class="product-info">
            <img src="img/2.png" alt="产品图片">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, massa ut ultricies euismod, turpis nulla mattis metus, ac posuere enim nunc vel urna. Nulla facilisi. Sed ut massa nec erat faucibus facilisis. Donec euismod augue vitae enim vulputate, eget aliquam arcu bibendum. Nam commodo, mi vel bibendum bibendum, erat quam luctus enim, vel ullamcorper purus felis vitae urna. Morbi sed tincidunt nulla. Integer id magna ac est commodo luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin venenatis arcu ut ante bibendum, vel sollicitudin turpis scelerisque. Sed lobortis, mauris vel volutpat hendrerit, elit elit rutrum lacus, id tincidunt erat ipsum quis sem. Sed efficitur, enim quis sagittis iaculis, justo nunc bibendum tortor, vel bibendum metus enim et sapien. Suspendisse potenti. Etiam malesuada, mi eget vulputate cursus, ipsum dui sagittis metus, vel elementum justo elit vel lacus.</p>
        </div>
    </div>
</body>
</html>