当前位置：首页 > CSS

css制作店铺

2026-02-27 08:36:18CSS

使用CSS制作店铺页面

创建一个店铺页面需要结合HTML和CSS来实现布局、样式和交互效果。以下是关键步骤和代码示例：

基础HTML结构

店铺页面通常包含导航栏、商品展示区、页脚等部分。HTML结构示例：

<!DOCTYPE html>
<html>
<head>
    <title>CSS店铺示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="shop-header">
        <h1>我的店铺</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">商品</a></li>
            </ul>
        </nav>
    </header>

    <main class="product-grid">
        <div class="product-card">
            <img src="product1.jpg" alt="商品1">
            <h3>商品名称</h3>
            <p>价格: $20</p>
            <button>加入购物车</button>
        </div>
        <!-- 更多商品卡片 -->
    </main>

    <footer class="shop-footer">
        <p>© 2023 我的店铺</p>
    </footer>
</body>
</html>

核心CSS样式

导航栏样式

.shop-header {
    background-color: #333;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-header nav ul {
    display: flex;
    list-style: none;
    gap: 1rem;
}

.shop-header a {
    color: white;
    text-decoration: none;
}

商品网格布局

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.product-card button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

页脚样式

.shop-footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

响应式设计

通过媒体查询确保在不同设备上正常显示：

@media (max-width: 600px) {
    .shop-header {
        flex-direction: column;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }
}

进阶效果

添加购物车交互或加载动画：

/* 购物车图标动画 */
.cart-icon {
    transition: transform 0.2s;
}

.cart-icon:hover {
    transform: scale(1.1);
}

/* 加载动画 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

通过以上CSS结构和样式，可以构建一个现代、响应式的店铺页面。实际开发中可根据需求调整颜色、间距和交互细节。

css制作店铺