天猫电商购物平台前端页面

最新推荐文章于 2024-04-01 15:54:23 发布

艳学网

最新推荐文章于 2024-04-01 15:54:23 发布

阅读量4.8k

点赞数 5

分类专栏： java之路文章标签：前端天猫电商图片支付

本文链接：https://blog.csdn.net/sinat_15153911/article/details/69666934

版权

java之路专栏收录该内容

90 篇文章 2 订阅

订阅专栏

以天猫购物网站为平台的前端购物页面，实现了点击购物车后，右面会显示相应的商品图片及其信息，总价未计算出。
效果如下：
这里写图片描述
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>扫一扫支付系统</title>
        <meta name="keywords" content="支付宝，扫一扫">
        <meta name="description" content="支付宝扫一扫" />

        <style>
            *{margin: 0;padding: 0;}
            img{border:0;}
            body{font-size:12px;font-family:"微软雅黑";color:#666;}
            .top{width:100%;height:85px;}
            .top .t_header{width:1000px;height:85px;margin: 0 auto;}
            .top .t_header .logo{width: 200px; height: 85px; display: block;
            line-height:85px;text-align:center;
            text-decoration:none;font-size:80px;color:red;}
            .banner{width:100%;height:160px;background:url("images/banner.jpg")}
            .shop{width:1000px;height:340px;margin:10px auto;}
            .shop ul li{
                border:1px solid #efefef;
                list-style:none;
                width:200px;padding:5px;
                float:left;
                margin:0px 10px;
            }
            .shop ul li:hover{border:1px solid red;}
            .shop ul li .s_price{font-size:20px;color:#C00;}
            .shop ul li .s_title{line-height:30px;}
            .shop ul li p{font-size:14px;}
            .shop ul li .s_add{width:200px;height:36px;
                display:block;text-align:center;
                background:#bc0000;
                line-height:36px;text-decoration:none;font-size:14px;
                color:#fff;font-weight:bold;border-radius:3px;
            }
            .shop ul li .s_add:hover{background:#A80000;}

            .car{width:250px;height:100%;position:absolute;top:0;right:0;}
            .car .c_tools{width:35px;height:100%;background:#000;float:left;}
            .car .c_con{width:215px;height:100%;background:#eee;float:left;}

            .car .c_tools .c_btn{width:35px;height:110px;
            display:block;margin-top:300px;
            text-decoration:none;color:#fff;font-size:14px;
            }
            .car .c_tools .c_btn:hover{background:#A80000;}
            .car .c_tools .c_btn i{width:35px;height:35px;display:block;
            text-align:center;line-height:35px;
            font-size:24px;color:#fff;}
            .car .c_tools .c_btn span{width:15px;display:block;margin:5px auto;}

            .car .c_con ul li{list-style:none;width:225px;height:55px;background:#fff;margin-bottom:5px;}
            .car .c_con .c_sub{width:215px;height:40px;display:block;
            background:#bc0000;position:absolute;bottom:0;
            right:0;text-align:center;line-height:40px;font-size:20px;color:#fff;text-decoration:none;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    </head>
    <body>
        <div class="top">
            <div class="t_header">
                <a href="#" class="iconfont logo">&#xe602;</a>
            </div>
        </div>

        <div class="banner"></div>

        <div class="shop">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/1.webp.jpg" width="200px" height="280px" alt="商品1" />
                    </a>
                    <p class="s_price">￥<span class="s_p">0.01</span></p>
                    <p class="s_title">春装韩版系带小香风蝴蝶结衬衫</p>
                    <a href="#" class="s_add">加入购物车</a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/2.webp.jpg" width="200px" height="280px" alt="商品1" />
                    </a>
                    <p class="s_price">￥<span class="s_p">0.01</span></p>
                    <p class="s_title">春装韩版系带小香风蝴蝶结衬衫</p>
                    <a href="#" class="s_add">加入购物车</a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/3.webp.jpg" width="200px" height="280px" alt="商品1" />
                    </a>
                    <p class="s_price">￥<span class="s_p">0.01</span></p>
                    <p class="s_title">春装韩版系带小香风蝴蝶结衬衫</p>
                    <a href="#" class="s_add">加入购物车</a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/4.webp.jpg" width="200px" height="280px" alt="商品1" />
                    </a>
                    <p class="s_price">￥<span class="s_p">0.01</span></p>
                    <p class="s_title">春装韩版系带小香风蝴蝶结衬衫</p>
                    <a href="#" class="s_add">加入购物车</a>
                </li>
            </ul>
        </div>

        <div class="car">
            <div class="c_tools">
                <a href="#" class="c_btn">
                    <i class="iconfont">&#xf003f;</i>
                    <span>购物车</span>
                </a>
            </div>
            <div class="c_con">
                <ul id="c_ul">
                    <li>
                        <a href="#"><img src="images/1.webp.jpg" alt="" width="50" height="50" /></a>
                        <span>优惠价格：￥0.01</span>
                    </li>
                    <li>
                        <a href="#"><img src="images/1.webp.jpg" alt="" width="50" height="50" /></a>
                        <span>优惠价格：￥0.01</span>
                    </li>
                    <li>
                        <a href="#"><img src="images/1.webp.jpg" alt="" width="50" height="50" /></a>
                        <span>优惠价格：￥0.01</span>
                    </li>
                    <li>
                        <a href="#"><img src="images/1.webp.jpg" alt="" width="50" height="50" /></a>
                        <span>优惠价格：￥0.01</span>
                    </li>
                    <li>
                        <a href="#"><img src="images/1.webp.jpg" alt="" width="50" height="50" /></a>
                        <span>优惠价格：￥0.01</span>
                    </li>
                </ul>
                <a href="#" class="c_sub">结算</a>
            </div>
        </div>

<script src="js/jquery.js"></script>
<script>
$(function(){
    //alert("d");
    $(".s_add").click(function(){
        var s_price = $(this).parent().find(".s_p").text();
        var src = $(this).parent().find("img").attr("src");
        $("#c_ul").append("<li>"+
        "<a href='#'><img src='"+src+"' alt='' width='50' height='50' /></a>"+
        "<span>优惠价格：￥"+s_price+"</span>"+
        "</li>");
    });
})
</script>

</body>
</html>

使用技术如下：
1、阿里妈妈图标库iconfonts 参考：http://www.iconfont.cn/
2、单点转双点：

$("#c_ul").append("<li>"+
        "<a href='#'><img src='"+src+"' alt='' width='50' height='50' /></a>"+
        "<span>优惠价格：￥"+s_price+"</span>"+
        "</li>");

参考：
String retext2= retext.replaceAll("\"", "\'");  
    retext2= retext2.replaceAll("\n", "\" \n +\"");
    String retext3 = "var html +=\"" + retext2 + "\";";

代码下载：
链接：http://pan.baidu.com/s/1slTRo9f 密码：ppys

全CSDN的丰（好）色（se）博客，这里有书本看不到的Java技术，电影院禁播的电影，欢迎关注QQ群494808400

艳学网

关注

5
点赞
踩
33

收藏

觉得还不错? 一键收藏
1
评论
天猫电商购物平台前端页面

以天猫购物网站为平台的前端购物页面，实现了点击购物车后，右面会显示相应的商品图片及其信息，总价未计算出。效果如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>扫一扫支付系统</title> <meta name="keywords" conte
复制链接

扫一扫