渡课学习2018.8.12

天猫首页代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../assest/css/bootstrap/3.3.6/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/public.css">
    <link rel="stylesheet" type="text/css" href="../css/首页.css">
</head>
<body>
    <div class="nav-top">
        <a href="#" style="margin-left: 8px;"><span class="glyphicon glyphicon-home redColor"></span>&nbsp;天猫首页</a>
        <span style="margin-left: 20px;">喵,欢迎来天猫</span>
        <a href="#" style="margin-left: 20px;">请登录</a>
        <a href="#" style="margin-left: 20px;">免费注册</a>

        <span class="pull-right">
        <a href="#" style="margin-right: 20px;">我的订单</a>
        <a href="#" style="margin-right: 35px;"><span class="glyphicon glyphicon-shopping-cart redColor"></span>购物车0件</a>
        </span>
    </div>


    <div class="search-img" style="float: left">
        <img src="../img/site/logo.gif" />
    </div>
    <div class="search-inp">
        <input type="text" placeholder="时尚男鞋&nbsp;太阳镜"/>
        <button>搜索</button>
        <div class="link">
            <a>沙发</a><span>|</span><a> 电热水器</a><span>|</span><a> 平衡车</a><span>|</span><a>扫地机器人</a>
        </div>
    </div>

    <div class="banner">
        <div class="banner-title">
            <div class="clz">
                <span style="margin-left:10px" class="glyphicon glyphicon-th-list"></span>商品分类
            </div>
            <div class="nav">
                <span><a href="#"><img src="../img/site/chaoshi.png"/></a></span>
                <span><a href="#"><img src="../img/site/guoji.png"/></a></span>
                <span><a href="#">平板电视</a></span>
                <span><a href="#">马桶</a></span>
            </div>
        </div>
    </div>

    <div class="pro-clazz">
        <div class="pro-clazz-title">
            <div></div>
            平板电视
        </div>
        <div class="pro-clazz-img">
            <div>
                <a href="#">
                    <img src="../img/productSingle_middle/9521.jpg">
                    <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                    <h3>1,874.25</h3>
                </a>
            </div>
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
        </div>
    </div>

    <div class="pro-clazz">
        <div class="pro-clazz-title">
            <div></div>
            平板电视
        </div>
        <div class="pro-clazz-img">
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
            <div>
                <img src="../img/productSingle_middle/9521.jpg">
                <p>[热销]夏普屏PANDA/熊猫 LE39D71S</p>
                <h3>1,874.25</h3>
            </div>
        </div>
    </div>


    <div class="footer"> 
        <hr/>
        <div class="foot-img">
            <img src="../img/site/ensure.png" />
        </div>
        <hr/>

        <div class="foot-desc">
            <div>
                <span class="foot-desc-title">购物指南</span>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
            </div>
            <div>
                <span class="foot-desc-title">天猫保障</span>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
            </div>
            <div>
                <span class="foot-desc-title">支付方式</span>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
            </div>
            <div>
                <span class="foot-desc-title">商家服务</span>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
                <a href="#">免费注册</a>
            </div>
            <div>
                <span class="foot-desc-title">手机天猫</span><br/>
                <img src="../img/site/ma.png"/>
            </div>
        </div>

        <div class="foot-copyright">
            <img src="../img/site/cateye.png" />
            <div class="white-link">
                <a href="#">联系我们</a>
                <a href="#">联系我们</a>
                <a href="#">联系我们</a>
                <a href="#">联系我们</a>
                <a href="#">联系我们</a>
                <a href="#">联系我们</a>
                <a href="#">联系我们</a>
                <a href="#">联系我们</a>
                <a href="#">联系我们</a>
            </div>

            <div class="white-link">
                <a href="#">联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a><span>|<span>
                <a href="#">&nbsp;联系我们</a>
            </div>

            <div class="foot-copyright-addr">
                增值电信业务经营许可证: 浙B2-20110446 网络文化经营许可证:浙网文[2015]0295-065号 互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 互联网药品信息服务资质证书编号:浙-(经营性)-2012-0005
            </div>

            <div class="foot-copyright-cop">
                © 2003-2016 TMALL.COM 版权所有
            </div>

            <div class="foot-copyright-img">
                <img src="../img/site/copyRight1.jpg" /> 
                <img src="../img/site/copyRight2.jpg" />
            </div>

            <div style="height: 30px"></div>
        </div>
    </div>
    <script src="#"></script>
</body>
</html>

关于数据库的内容,真的是一脸懵逼,只知道跟着老师一步一步走,建了库都不晓得干嘛用的,不过陆老师让我们模拟一下在天猫上整个的购买到最后评价的一个过程完成的还算蛮顺利的

猜你喜欢

转载自blog.csdn.net/linlinAIR/article/details/81611582