HTML+CSS 实现产品小米产品展示效果

效果

 完整代码

HTML:

<div class="top-nav">
        <div class="nav">
            <div class="nav-item active" data-index="0">全网热卖</div>
            <div class="nav-item" data-index="1">小米影像</div>
            <div class="nav-item" data-index="2">百度百科</div>
            <div class="nav-item" data-index="3">视频专区</div>
            <div class="nav-item" data-index="4">品牌图片</div>
        </div>
        <input type="text" class="search-box" placeholder="搜索商品">
    </div>
    
    <div class="content-carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" id="hot-sales">
                <div class="product-grid">
                    <!-- 热卖产品将通过JavaScript动态生成 -->
                </div>
            </div>
            <div class="carousel-item" id="xiaomi-image">
                <h2>小米影像</h2>
                <p>这里展示小米的影像技术和产品。</p>
                <img src="/api/placeholder/600/400" alt="小米影像技术展示">
            </div>
            <div class="carousel-item" id="baidu-baike">
                <h2>百度百科</h2>
                <p>这里可以放置小米相关的百度百科内容。</p>
                <div>小米是一家专注于智能硬件和电子产品研发的公司，成立于2010年...</div>
            </div>
            <div class="carousel-item" id="video-section">
                <h2>视频专区</h2>
                <p>这里可以展示小米产品的视频介绍。</p>
                <div style="background-color: #ddd; width: 640px; height: 360px; margin: 20px auto; display: flex; justify-content: center; align-items: center;">
                    视频播放器占位符
                </div>
            </div>
            <div class="carousel-item" id="brand-images">
                <h2>品牌图片</h2>
                <p>这里展示小米的品牌形象和产品图片。</p>
                <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
                    <img src="/api/placeholder/200/200" alt="小米Logo">
                    <img src="/api/placeholder/200/200" alt="小米产品展示1">
                    <img src="/api/placeholder/200/200" alt="小米产品展示2">
                </div>
            </div>
        </div>
    </div>

css

<style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .top-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .nav {
            display: flex;
        }
        .nav-item {
            padding: 10px 15px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }
        .nav-item.active {
            border-bottom-color: #ff6700;
            color: #ff6700;
        }
        .search-box {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .content-carousel {
            position: relative;
            overflow: hidden;
        }
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .carousel-item {
            min-width: 100%;
            display: none;
        }
        .carousel-item.active {
            display: block;
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        .product-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-5px) scale(1.03);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .product-card img {
            max-width: 100%;
            height: 150px;
            object-fit: contain;
            transition: transform 0.3s ease;
        }
        .product-card:hover img {
            transform: scale(1.05);
        }
        .product-name {
            margin: 10px 0;
            font-weight: bold;
        }
        .product-price {
            color: #ff6700;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .buy-button {
            background-color: #ff6700;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .buy-button:hover {
            background-color: #ff8533;
        }
    </style>

 Javascript :

<script>
        // 产品数据
        const products = [
            { name: "Xiaomi MIX Fold 4", price: 8999, image: "./img/1.png" },
            { name: "Xiaomi MIX Flip", price: 5999, image: "./img/1.png" },
            { name: "Xiaomi Watch S4 Sport", price: 1999, image: "./img/1.png" },
            { name: "小米手环9", price: 249, image: "./img/1.png" },
            { name: "Xiaomi Buds 5", price: 699, image: "./img/1.png" },
            { name: "小米创业思考", price: 86, image: "./img/1.png" },
            { name: "Civi 4 Pro 迪士尼限定版", price: 3299, image: "./img/1.png" },
            { name: "Xiaomi 14 Ultra", price: 6499, image: "./img/1.png" },
            { name: "Xiaomi Pad 6S Pro 12.4", price: 3299, image: "./img/1.png" },
            { name: "Redmi Turbo 3", price: 1999, image: "./img/1.png" },
        ];

        // 生成产品卡片
        function generateProductCards() {
            const productGrid = document.querySelector('#hot-sales .product-grid');
            productGrid.innerHTML = products.map(product => `
                <div class="product-card">
                    <img src="${product.image}" alt="${product.name}">
                    <div class="product-name">${product.name}</div>
                    <div class="product-price">¥${product.price}</div>
                    <button class="buy-button">立即购买</button>
                </div>
            `).join('');
        }

        // 初始化页面
        generateProductCards();

        // 导航和轮播功能
        const navItems = document.querySelectorAll('.nav-item');
        const carouselItems = document.querySelectorAll('.carousel-item');
        const carousel = document.querySelector('.carousel-inner');

        function showSlide(index) {
            navItems.forEach((item, i) => {
                item.classList.toggle('active', i === index);
            });
            carouselItems.forEach((item, i) => {
                if (i === index) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        navItems.forEach((item, index) => {
            item.addEventListener('click', () => {
                showSlide(index);
            });
        });

        // 搜索功能（简单实现）
        const searchBox = document.querySelector('.search-box');
        searchBox.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            const productCards = document.querySelectorAll('.product-card');
            productCards.forEach(card => {
                const productName = card.querySelector('.product-name').textContent.toLowerCase();
                card.style.display = productName.includes(searchTerm) ? 'block' : 'none';
            });
        });
    </script>