@wangzhuanyun 2019-12-02T03:24:10.000000Z 字数 2070 阅读 454

鸿卓商城——商品详情

作者：王转运

鸿卓国际

引入CSS:

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

1.底部菜单

image_1bk1qbto0udh1htvdhqe5spp5n.png-11.7kB

写入HTML代码如下：

        重新写样式：
        .nav {
                background: #ffffff;
                padding: 5px 0 6px 0;
                width: 100%;
                position: fixed;
                left: 0;
                bottom: 0;
                z-index: 100;
             }
 
 
       <div class="nav" style="padding:0px;">
                <div  style="float:left;width:50%;font-size: 20px;text-align: center;padding-top:8px">
                    总计：<span style="color: #00B8F1">￥300<span>
                </div>
                <div   style="width:50%;float:left;text-align: center;background-color: #F0415E;color: #fff;padding: 15px">
                    去付款
                </div>
        </div>

2.收货地址

image_1bk1pv162e4saj417kabb31fh757.png-25.5kB

写入HTML代码如下：

        <div class="col-xs-12 "   style="background-color: #fff;padding: 10px 10px 0px 10px;margin:5px 0px">
                <div class="col-xs-6">收货人名字</div>
                <div class="col-xs-6">电话<span  style="float: right;" class="glyphicon glyphicon-chevron-right"></span></div>
                <div class="col-xs-4">收货地址：</div>
                <div class="col-xs-8">地址</div>
                <div class="col-xs-12"><img  src="img/interval.png" style="max-width: 100%"></div>
 
        </div>
 
    #代码说明：
      添加IDV容器
        <div style="width: 100%;height:auto;margin-top: 50px">
            <!--将底部菜单除外的代码放入此容器中-->
        </div>

3.引入轮播图插件

引入相应的JS与CSS后写入HTML代码如下：

   <div class="WSCSlideWrapper" style="height: 60%">
        <div class="WSCSlide WSCSlideTransition">
            <img class="WSCSlide_img" src="img/商品图片" style="max-width: 100%;" />
 
        </div>
        <div class="WSCSlideStatus"></div>
    </div>
 
    #代码说明：
        max-width: 100%  设置图片最大宽度为100%
 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/lunbo.js"></script>
    以上两行JS  请放到<body>标签后
 
        代码放入后出现问题解决方式：
        添加IDV容器
        <div style="width: 100%;height:auto;margin-top: 50px">
            <!--将底部菜单除外的代码放入此容器中-->
        </div>

4.产品介绍

image_1bk1pbm1m76s6bg15gha2d122u3g.png-31.3kB
写入HTML代码如下：

    <div class="col-xs-12 " style="margin-top: 5px">
        <div style="font-size: 18px;color: #000">商品名称</div>
        <div style="font-size: 12px;color: #888;line-height: 20px">商品简介</div>
        <div style="font-size: 18px;color: #00B8F1">￥<span>商品价格</span></div>
    </div>

5.文图详情

image_1bk1pcepb1bob16ot1h4u1mkfvvn3t.png-394.7kB
写入HTML代码如下：

    <table class="table" style="margin-bottom: 5px;">
            <tr >
                <td style="width: 22px;padding:15px 0px">
                    <img alt="" src="img/dian.png" width="20px">
                </td>
                <td style="width: 72px;padding:15px 0px;">文图详情</td>
                <td>
 
                </td>
            </tr>
 
    </table>
 
        <div style="margin-bottom: 80px;width: 100%;height: auto;">
            <!--放入文图详情内容  可从富文本编辑器中读取为HTML放入 暂时可以放入一个img  -->
        </div>
 
    #代码说明：
        class="table"自带下边框
        空的DIV用于撑起后半部分