页面介绍

仿照的手机商城页面包含首页商品详情页,购物车登录等。

技术介绍

html5 + css + jquery + bootstrap
可做为大作业实训等。
网页的详情页和购物车使用cookie,请确保你的浏览器支持或者授予了相关权限

特色

购物车功能秒杀功能轮播图,滚动展示等。

页面展示

首页
首页

商品详情
商品详情页

购物车
购物车

注册页面
注册页面

登录页面
登录页面

秒杀滚动展示
秒杀滚动展示

代码展示

 <!-- 秒杀部分 -->
    <div class="menu ms">
        <h4>限时秒杀</h4>
        <h5>大牌聚惠,品质甄选</h5>
        <div class="box">
            <p>本场秒杀倒计时</p>
            <div id="d"></div>
            <!-- 剩余的天数 -->
            <div id="h"></div>
            <!-- 剩余的小时 -->
            <div id="m"></div>
            <!-- 剩余的分钟 -->
            <div id="s"></div>
            <!-- 剩余的秒数 -->
        </div>
        <div style="clear: both;"></div>

        <!-- 缩略图开始 -->
        <div id="slt">
            <div class="new-item">
                <div class="thumbnail">
                    <img src="" alt="">
                    <div class="caption">
                        <h3></h3>
                        <p>
                            <span class="price"></span> <del></del>
                        </p>
                        <p>
                            <a href="javascript:;" class="btn btn-danger">加入购物车</a>
                            <button class="btn btn-default" data-toggle="tooltip" title="">详情</button>
                        </p>
                    </div>
                </div>
            </div>
            <div class="new-item">
                <div class="thumbnail">
                    <img src="" alt="">
                    <div class="caption">
                        <h3></h3>
                        <p>
                            <span class="price"></span> <del></del>
                        </p>
                        <p>
                            <a href="javascript:;" class="btn btn-danger">加入购物车</a>
                            <button class="btn btn-default" data-toggle="tooltip" title="">详情</button>
                        </p>
                    </div>
                </div>
            </div>
            <div class="new-item">
                <div class="thumbnail">
                    <img src="" alt="">
                    <div class="caption">
                        <h3></h3>
                        <p>
                            <span class="price"></span> <del></del>
                        </p>
                        <p>
                            <a href="javascript:;" class="btn btn-danger">加入购物</a>
                            <button class="btn btn-default" data-toggle="tooltip" title="">详情</button>
                        </p>
                    </div>
                </div>
            </div>
            <div class="new-item">
                <div class="thumbnail">
                    <img src="" alt="">
                    <div class="caption">
                        <h3></h3>
                        <p>
                            <span class="price"></span> <del></del>
                        </p>
                        <p>
                            <a href="javascript:;" class="btn btn-danger">加入购物</a>
                            <button class="btn btn-default" data-toggle="tooltip" title="">详情</button>
                        </p>
                    </div>
                </div>
            </div>
            <div class="new-item">
                <div class="thumbnail">
                    <img src="" alt="">
                    <div class="caption">
                        <h3></h3>
                        <p>
                            <span class="price"></span> <del></del>
                        </p>
                        <p>
                            <a href="javascript:;" class="btn btn-danger">加入购物</a>
                            <button class="btn btn-default" data-toggle="tooltip" title="">详情</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 缩略图结束 -->
    </div>

    <!-- 清除浮动 -->
    <div style="clear: both;"></div>

    <hr>

    <!-- 滚动图 -->
    <div class="menu">
        <h4>猜你喜欢</h4>
        <h5>大牌聚惠,品质甄选</h5>
        <div id="colee_left">
            <table cellpadding="1" cellspacing="0" border="0">
                <tr>
                    <td id="colee_left1" valign="top" align="center">
                        <table cellpadding="2" cellspacing="0" border="0">
                            <tr align="center">
                                <td>
                                    <a href='javascript:;'><img src="images/gd1.jpg"></a>
                                </td>
                                <td>
                                    <a href='javascript:;'><img src="images/gd2.jpg"></a>
                                </td>
                                <td>
                                    <a href='javascript:;'><img src="images/dg3.jpg"></a>
                                </td>
                                <td>
                                    <a href='javascript:;'><img src="images/dg4.jpg"></a>
                                </td>
                                <td>
                                    <a href='javascript:;'><img src="images/dg5.jpg"></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td id="colee_left2" valign="top"></td>
                </tr>
            </table>
        </div>
    </div>

联系作者

私信作者或者如下方式
E-mail:437867002@qq.com
V:634836927

原文地址:https://blog.csdn.net/weixin_46028827/article/details/132346441

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_38748.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注