一个简易的购物商场网页

网页设计与网站建设作业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，点击安装即可

版权声明 1、本网站名称：HPC小站
2、本站网址：https://hpc.baicaitang.cn/
3、本网站的部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系客服QQ3062015463进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6、本站资源大多存储在云盘，如发现链接失效或站长没有设置，请关注公众号“hpc小站”或者联系客服QQ3062015463，发送你的邮箱、资源编号和订单编号进行获取。
7、解压压缩包如果文章页面和下载页面均未说明请使用默认密码，默认密码是：hpc.baicaitang.cn，或关注公众号发送资源编号和订单号获取，密码会不定时更新。
8、部分资源具有时效性，可能过太久会失效，请购买后尽快获取资源以免失效。

THE END