一个简易的购物商场网页,网页设计与网站建设作业html+css+js

一个简易的购物商场网页

在这里插入图片描述

目录结构

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="./styles/index.css">
    <link rel="stylesheet" href="./styles/iconfont.css">
</head>

<body>
    <div class="home-wrapper">
        <!-- 顶部 -->
        <div class="header">
            <!-- 名称 -->
            <span class="name"><a href="./index.html">佩奇的购物商场</a></span>
            <!-- 用户信息 -->
            <div class="user-info">
                <div class="user-username">
                    <i class="iconfont icon-yonghu"></i>
                    <span class="username"></span>
                </div>
                <div class="user-car">
                    <i class="iconfont icon-gouwuchefill"></i>
                    <span class="car"><a href="./order.html">购物车</a></span>
                    <span class="number">(<span>0</span>)</span>
                </div>
            </div>
        </div>
        <!-- logo  -->
        <div class="logo">
            <img src="./images/logo.png" alt="logo">
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li>
                    <a href="./index.html">全部</a>
                </li>
                <li>
                    <a href="">项链</a>
                </li>
                <li>
                    <a href="">手链</a>
                </li>
                <li>
                    <a href="">吊坠</a>
                </li>
                <li>
                    <a href="">耳环</a>
                </li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="请输入关键字" autocomplete=“off”>
        </div>
        <!-- 商品内容 -->
        <div class="main-content">
            <div class="content">
                <!-- 商品列表 -->
                <div class="pro-list">
                </div>
                <!-- 分页 -->
                <div class="paging">
                    <ul>
                        <li class="current">
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                        <li>
                            <a href="">4</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <a href="https://hpc.baicaitang.cn/">@hpc小站</a>
        </div>
    </div>
    <script src="./scripts/jquery.min.js"></script>
    <script src="./scripts/index.js"></script>
    <script src="./scripts/common.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./styles/index.css">
    <link rel="stylesheet" href="./styles/iconfont.css">
</head>

<body>
    <div class="login-wrapper">
        <!-- 顶部 -->
        <div class="header">
            <!-- 名称 -->
            <span class="name"><a href="./index.html">佩奇的购物商场</a></span>
            <!-- 用户信息 -->
            <div class="user-info">
                <div class="user-username">
                    <i class="iconfont icon-yonghu"></i>
                    <span class="username"></span>
                </div>
                <div class="user-car">
                    <i class="iconfont icon-gouwuchefill"></i>
                    <span class="car"><a href="./order.html">购物车</a></span>
                    <span class="number">(<span>0</span>)</span>
                </div>
            </div>
        </div>
        <!-- logo  -->
        <div class="logo">
            <img src="./images/logo.png" alt="logo">
        </div>
        <!-- 内容 -->
        <div class="login-content">
            <div class="name">佩奇的购物商场</div>
            <div class="inputs">
                <i class="iconfont icon-yonghu"></i>
                <input type="text" id="username" autocomplete="off">
            </div>
            <div class="inputs">
                <i class="iconfont icon-mima"></i>
                <input type="password" id="password">
            </div>
            <div class="login-btn">立即登录</div>
            <div class="hide" id="msg"></div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <a href="https://hpc.baicaitang.cn/">@hpc小站</a>
    </div>

    <script src="./scripts/jquery.min.js"></script>
    <script src="./scripts/login.js"></script>
    <script src="./scripts/common.js"></script>
</body>

</html>

如果打开没有数据

可vscode进入index.html右键点击open with Live Server即可,如果没有open with Live Server可在扩展中输入live server,点击安装即可
在这里插入图片描述
更多文章源码获取查看

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值