纯html +css +js 开发一个时尚女装购物商城前端静态网站模板

今天继续来分享使用前端基础技术html +css +js 开发一个商城，来练习我学到的前端知识。

今天分享的是一个时尚女装购物商城。这个静态网站我主要做了以下那些功能：

首页： 展示时尚女装的主打款式，突出流行趋势和热门商品，吸引用户浏览与购买。

新品上市： 展示新上市的女装，帮助用户轻松找到最新款式，提升购物的时尚感。

女装秒杀： 专为时尚潮人设计的秒杀活动专区，用户可以参与限时抢购，增加用户的参与感和活跃度。

穿搭灵感： 提供各种穿搭推荐，帮助用户了解如何将不同款式的衣物搭配在一起，提升购物体验。

购物车： 便于用户查看已选择的商品，并进行结算操作，支持商品数量调整和删除。

个人中心： 提供用户信息管理、订单查看、收藏夹等功能，确保用户的购物体验更加便捷。

使用的技术：

HTML、 CSS、JavaScript

接下来给大家看以下页面效果：

我觉得做的还是很漂亮的。有兴趣的小伙伴可以去看一下，我把这个项目已经部署了一个演示站：

wwwoop.com/home/Index/...

代码内容也是比较多的，在文章中就分享一部分源代码：

首页的html 源代码如下：

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>女生时尚服装网</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="nav-container">
                <div class="logo">女生时尚服装网</div>
                <ul class="nav-links">
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="new-arrivals.html">新品上市</a></li>
        
                    <li><a href="flash-sale.html">女装秒杀</a></li>
                    <li><a href="inspiration.html">穿搭灵感</a></li>
                    <li><a href="cart.html">购物车</a></li>
                    <li><a href="profile.html">个人中心</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <main>
        <!-- 轮播图部分 -->
        <section class="slider">
            <div class="slider-container">
                <div class="slide active">
                    <img src="./images/轮播1.jpeg" alt="轮播图1">
                </div>
                <div class="slide">
                    <img src="./images/轮播2.jpeg" alt="轮播图2">
                </div>
                <div class="slide">
                    <img src="./images/轮播3.jpeg" alt="轮播图3">
                </div>
                <button class="slider-btn prev">&lt;</button>
                <button class="slider-btn next">&gt;</button>
                <div class="slider-indicators">
                    <div class="indicator active"></div>
                    <div class="indicator"></div>
                    <div class="indicator"></div>
                </div>
            </div>
        </section>

        <!-- 热门分类 -->
        <section class="categories">
            <h2>热门分类</h2>
            <div class="category-grid">
                <div class="category-item">
                    <img src="./images/1.jpeg" alt="连衣裙">
                    <h3>连衣裙</h3>
                </div>
                <div class="category-item">
                    <img src="./images/2.jpeg" alt="上衣">
                    <h3>上衣</h3>
                </div>
                <div class="category-item">
                    <img src="./images/3.jpeg" alt="套装">
                    <h3>套装</h3>
                </div>
                <div class="category-item">
                    <img src="./images/4.jpeg" alt="热销单品">
                    <h3>热销单品</h3>
                </div>
            </div>
        </section>

        <!-- 新品推荐 -->
        <section class="new-products">
            <h2>新品推荐</h2>
            <div class="product-grid">
                <div class="product-card">
                    <img src="./images/4.jpeg" alt="新品1">
                    <h3>时尚连衣裙</h3>
                    <p class="price">¥299</p>
                </div>
                <div class="product-card">
                    <img src="./images/5.jpeg" alt="新品2">
                    <h3>休闲套装</h3>
                    <p class="price">¥399</p>
                </div>
                <div class="product-card">
                    <img src="./images/6.jpeg" alt="新品3">
                    <h3>夏季新款</h3>
                    <p class="price">¥199</p>
                </div>
                <div class="product-card">
                    <img src="./images/2.jpeg" alt="新品1">
                    <h3>时尚连衣裙</h3>
                    <p class="price">¥299</p>
                </div>
                <div class="product-card">
                    <img src="./images/5.jpeg" alt="新品2">
                    <h3>休闲套装</h3>
                    <p class="price">¥399</p>
                </div>
                <div class="product-card">
                    <img src="./images/1.jpeg" alt="新品3">
                    <h3>夏季新款</h3>
                    <p class="price">¥199</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>女生时尚服装网，您的时尚购物专家</p>
            </div>
            <div class="footer-section">
                <h3>客户服务</h3>
                <ul>
                    <li>购物指南</li>
                    <li>配送方式</li>
                    <li>售后服务</li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <ul>
                    <li>客服电话：400-123-4567</li>
                    <li>营业时间：9:00-22:00</li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 女生时尚服装网 版权所有</p>
        </div>
    </footer>

    <script src="./js/index.js"></script>
</body>
</html>