购物商城网站模板

编程语言 2018-10-22 22:11:10 阅读次数: 0 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逆水行舟不进则退</title>
    <style>
        .pg-header {
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }

        .pg-hover-blue:hover {
            background-color: cornflowerblue;
        }

        .pg-logo {
            font-weight: bold;
            font-size: larger;
            color: red;
        }

        .pg-buy {
            height: 40px;
            width: 80px;
            font-size: larger;
            font-weight: bold;
            color: red;
        }

        .pg-search {
            height: 25px;
            width: 300px;
        }

        .pg-menu {
            height: 45px;
        }

        .pg-menu-left {
            width: 330px;
            line-height: 45px;
            font-weight: 500;
            font-size: large;
        }

        .pg-menu-right {
            width: 600px;
            line-height: 45px;
            font-weight: 500;
            font-size: large;
        }

        .pg-item {
            display: inline-block;
            width: 95px;
        }

        .pg-content-left {
            float: left;
            width: 25%;
            border-right: 1px solid red;
        }

        .pg-content-right {
            float: left;
            width: 74.85%;
        }

        .pg-left-font {
            font-size: medium;
            color: blue;
            padding-left: 15px;
        }

        .pg-img {
            padding-left: 45px;
            padding-top: 25px;
            padding-right: 20px;
        }

        .pg-content-img {
            height: 300px;
            width: 250px;
            float: left;
            border: 1px solid red;
            margin-left: 40px;
            margin-bottom: 20px;
        }

        .pg-content-img-img {
            height: 265px;
            width: 248px;
            padding-left: 1px;
            padding-top: 1px;
        }
        /*设置图片的大小*/
        .pg-picture {
            width: 290px;
            height: 190px;
        }
        /*设置整个按钮区域的宽度和相对区域*/
        .button {
            width: 150px;
            height: 18px;
            position: absolute; /*绝对定位相对于banner div*/
            bottom: 5px;
            right: 5px;
        }
        /*设置点击数字的时候就换一个背景颜色*/
        .one {
            background-color: #ff9966;
        }
        /*将数字按钮变为圆的指针漂浮*/
        .button ul li {
            background-color: #000000; /*黑色*/
            color: #ffffff;
            list-style-type: none;
            width: 18px;
            height: 18px;
            float: left;
            border-radius: 9px; /*变成圆的*/
            text-align: center;
            line-height: 18px;
            cursor: pointer; /*鼠标移动变手指状态*/
            margin-left: 5px;
        }
        /*设置一下所有图片的相对位置，都在一个位置*/
        .picture .pg-picture {
            display: block; /*默认有图片不显示*/
            position: absolute; /*绝对定位.对应的是.pic这个div*/
            top: 0;
            left: 0;
        }
    </style>
</head>
<body style="margin: 0;">
<div class=" pg-header">
    <div style="width: 1280px;margin: 0 auto">
        <div class="pg-hover-blue" style="float: left">
            <a href="https://blog.csdn.net/qq_41901915">收藏本站</a>
        </div>
        <div style="float: right">
            <a class="pg-hover-blue" style="display: inline-block;width: 60px;text-align: center"
               href="http://localhost:63342/untitled/denglu1.html?_ijt=84o8rl901a3c78m5h8ldn9sge0">登录</a>
            <a class="pg-hover-blue" style="display: inline-block;width: 60px;text-align: center"
               href="https://blog.csdn.net/qq_41901915">注册</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>
<div>
    <div style="width: 880px;margin: 0 auto;height: 75px;line-height: 75px">
        <div style="float: left">
            <a class="pg-logo pg-hover-blue" href="https://blog.csdn.net/qq_41901915">逆水行舟不进则退</a>
        </div>
        <div style="float: left;padding-left: 160px">
            <input type="text" class="pg-search">
            <a href="https://blog.csdn.net/qq_41901915" class="pg-logo pg-hover-blue">搜索</a>
        </div>
        <div class="pg-buy" style="float: right;">
            购物车
        </div>
        <div style="clear: both"></div>
    </div>
</div>
<div class="pg-menu" style="background-color: red">
    <div style="width: 1100px;margin: 0 auto">
        <!--为什么这个地方再大的话就不行了，就窜行了，很奇怪-->
        <div class="pg-menu-left" style="float: left">
            <a href="https://blog.csdn.net/qq_41901915">全部商品分类</a>
        </div>
        <div class="pg-menu-right" style="float: left">
            <a class="pg-item" href="https://blog.csdn.net/qq_41901915">首页</a>
            <a class="pg-item" href="https://blog.csdn.net/qq_41901915">国产鸭</a>
            <a class="pg-item" href="https://blog.csdn.net/qq_41901915">进口鸭</a>
            <a class="pg-item" href="https://blog.csdn.net/qq_41901915">彩色鸭</a>
            <a class="pg-item" href="https://blog.csdn.net/qq_41901915">动态鸭</a>
            <a class="pg-item" href="http://localhost:63342/untitled/diaochawenjuan.html?">调查问卷</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>
<div class="pg-content">
    <div class="pg-content-left">
        <p style="text-align: center;font-size: large;font-weight: 500">国产鸭</p>
        <div style="text-align: center">
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">烤鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炖鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炒鸭</a>
        </div>
        <p style="text-align: center;font-size: large;font-weight: 500">进口鸭</p>
        <div style="text-align: center">
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">烤鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炖鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炒鸭</a>
        </div>
        <p style="text-align: center;font-size: large;font-weight: 500">彩色鸭</p>
        <div style="text-align: center">
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">烤鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炖鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炒鸭</a>
        </div>
        <p style="text-align: center;font-size: large;font-weight: 500">动态鸭</p>
        <div style="text-align: center">
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">烤鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炖鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炒鸭</a>
        </div>
        <p style="text-align: center;font-size: large;font-weight: 500">彩色动态鸭</p>
        <div style="text-align: center">
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">烤鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炖鸭</a>
            <a class="pg-left-font" href="https://blog.csdn.net/qq_41901915">炒鸭</a>
        </div>
        <p style="height: 20px"></p>
        <div id="banner" style="width: 300px;height: 200px;margin: 0 auto;position: relative">
            <div class="picture">
                <a>
                    <img src="2.jpg" class="pg-picture">
                </a>
                <a style="display: none">
                    <img src="3.jpg" class="pg-picture">
                </a>
                <a style="display: none">
                    <img src="4.jpg" class="pg-picture">
                </a>
                <a style="display: none">
                    <img src="5.jpg" class="pg-picture">
                </a>
            </div>
            <div class="button">
                <ul>
                    <li class="one">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="pg-content-right">
        <div>
            <p style="padding-left: 55px">颜色：</p>
            <a style="padding-left: 110px">黄色</a>
            <a style="padding-left: 20px">白色</a>
            <a style="padding-left: 20px">绿色</a>
            <a style="padding-left: 20px">蓝色</a>
            <p style="padding-left: 55px">地区：</p>
            <a style="padding-left: 110px">吉林</a>
            <a style="padding-left: 20px">沈阳</a>
            <a style="padding-left: 20px">黑龙江</a>
            <a style="padding-left: 20px">内蒙古</a>
            <p style="padding-left: 55px">规格：</p>
            <a style="padding-left: 110px">小的</a>
            <a style="padding-left: 20px">大的</a>
            <a style="padding-left: 20px">老大了</a>
            <a style="padding-left: 20px">超级大</a>
            <p style="border-bottom: 1px solid red;height: 20px"></p>
        </div>
        <!--最外边的大框-->
        <div>
            <!--据最外边的框有些距离-->
            <div class="pg-img">
                <!--每个图片的位置-->
                <div class="pg-content-img">
                    <img src="2.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div id="i1" class="pg-content-img">
                    <img src="3.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span id="i2">－</span>
                        <span id="i3">0</span>
                        <span id="i4">+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="4.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="5.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="6.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="7.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
                <div class="pg-content-img">
                    <img src="8.jpg" class="pg-content-img-img">
                    <span style="padding-left: 20px">单价:</span>
                    <span>111元</span>
                    <span style="padding-left: 20px">数量:</span>
                    <span style="background-color: #dddddd">
                        <span>－</span>
                        <span>0</span>
                        <span>+</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    //    页面加载完成之后执行的函数
    $(function () {
        //手动播放图片
        $(".button ul li").hover(function () {
            $(this).addClass("one").siblings().removeClass("one");
            var index = $(this).index();
            i = index;
            $(".picture a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
        });
        //自动播放图片
        var i = 0;
        var t = setInterval(autoplay, 2000);

        function autoplay() {
//            索引自动循环，从1到5再循环回来
            i++;
            if (i > 3) i = 0;
//            找到数字的按钮标签，并将它的背景色加上，兄弟标签的背景色除掉
            $(".button ul li").eq(i).addClass("one").siblings().removeClass("one");
//            找到图片的标签，停止渐入显示，停止渐入隐藏
            $(".picture a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeOut(500).hide();
        }

//        hover进入时停止定时器，进入时设置定时器
        $("#banner").hover(function () {
            clearInterval(t);
        }, function () {
            t = setInterval(autoplay, 2000);
        });
    });
    $('#i2').click(function () {
        var obj = $('#i3');
        var num = obj.text();
        if (num > 0) {
            num--;
            obj.text(num);
        }
    });
    $('#i4').click(function () {
        var obj = $('#i3');
        var num = obj.text();
        num++;
        obj.text(num);
    });
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41901915/article/details/83211866
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022