图片展示 - 优化样式和操作，更具审美与人性化 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>图片展示</title>
    <meta charset="utf-8">
    <style>
        /* 优化样式 */
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
<pre><code>    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

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

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

    .col {
        flex: 1;
        padding: 0 10px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .col:hover {
        transform: translateY(-5px);
    }

    .col img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
    }

    .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;
    }
&lt;/style&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css&quot;&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/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() {
        // 图片hover效果
        $('.col img').hover(function() {
            $(this).css('opacity', '0.8');
        }, function() {
            $(this).css('opacity', '1');
        });

        // 启用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=""></a>
            </div>
            <div class="col">
                <a href="img/2.png" data-lightbox="group1"><img src="img/2.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/3.png" data-lightbox="group1"><img src="img/3.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/4.png" data-lightbox="group1"><img src="img/4.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/5.png" data-lightbox="group1"><img src="img/5.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/6.png" data-lightbox="group1"><img src="img/6.png" alt=""></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>