这段时间从一个模板网站上拷了个购物系统的demo，试着写了一下，发现div+css布局还真是精妙无穷呢。设置好了布局，加上动态效果也只是锦上添花而已。所以，接下来的重点就是布局了！

我把网址粘上去：http://www.html5code.net/moban/

下面是我仿照着写的比较简单一点的demo，GitHub地址：https://github.com/123456abcdefg/shoppingDemo

完整代码：

1.html:

<html>

    <head>

        <meta charset="utf-8" />

        <title>demo</title>

        <link type="text/css" rel="stylesheet" href="demo.css">

        <script src="js/jquery-1.8.3.min.js"></script>

        <script src="js/slider.js"></script>

        <script src="js/base.js"></script>

        <script src="js/demo.js"></script>

    </head>

    <body>

        <section class="sec">

            <div class="top1">

                <div class="songhuo">

                    <span>送货至：</span>

                    <a href="#">北京</a>

                    <img src="data:images/jt_t.png">

                    <div class="hide_add">

                        <ul>

                            <li>

                                <a href="#">北京</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">上海</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">天津</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">重庆</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">河北</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">山西</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">河南</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">辽宁</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">吉林</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">黑龙江</a>

                            </li>

                            <li class="selected">

                                <a href="javascript:void(0)">内蒙古</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">江苏</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">山东</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">安徽</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">浙江</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">浙江</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">福建</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">湖北</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">湖南</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">广东</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">广西</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">江西</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">四川</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">海南</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">贵州</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">云南</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">西藏</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">陕西</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">甘肃</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">青海</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">宁夏</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">新疆</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">台湾</a>

                            </li>

                            <li>

                                <a href="javascript:void(0)">香港</a>

                            </li>

                        </ul>

                    </div>

                </div>

                <div class="vip">

                    <span>您好，</span>

                    <a href="#">会员登录</a>

                    <a href="#">快速注册</a>

                </div>

                <div class="help">

                    <a href="#">会员中心</a>

                    <a href="#">商户中心</a>

                    <a href="#">帮助</a>

                </div>

            </div>

        </section>

        <div class="top2">

            <img src="data:images/logo.png" width="200px" height="80px" style="display:block;float:left;">

            <div class="inputContent">

                <form>

                    <input type="text" placeholder="零食盛宴，满199减100，满99减50">

                    <button value="搜索">搜索</button>

                </form>

            </div>

            <div class="shop">

                <img src="data:images/shopping_cart.png">

                <span>我的购物车</span>

            </div>

        </div>

        <section class="important">

            <nav>

                <div class="left">

                    <img src="data:images/all_list.png">

                    <span>全部商品分类</span>

                    <aside>

                    <ul>

                        <li>

                            <span>手机通讯：</span>

                            <p>

                                <a href="#">手机</a>

                                <a href="#">智能数码</a>

                                <a href="#">运营商</a>

                            </p>

                        </li>

                        <li>

                            <span>手机通讯：</span>

                            <p>

                                <a href="#">手机</a>

                                <a href="#">智能数码</a>

                                <a href="#">运营商</a>

                            </p>

                        </li>

                        <li>

                            <span>手机通讯：</span>

                            <p>

                                <a href="#">手机</a>

                                <a href="#">智能数码</a>

                                <a href="#">运营商</a>

                            </p>

                        </li>

                        <li>

                            <span>手机通讯：</span>

                            <p>

                                <a href="#">手机</a>

                                <a href="#">智能数码</a>

                                <a href="#">运营商</a>

                            </p>

                        </li>

                    </ul>

                    </aside>

                    <div>

                        <div class="aside_hide">

                            <dt>手机通讯：</dt>

                            <dd>

                                <a href="#">全部手机</a>

                                <a href="#">iPhone</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>

                                <a href="#">以旧换新</a>

                            </dd>

                            <dt>手机通讯：</dt>

                            <dd>

                                <a href="#">全部手机</a>

                                <a href="#">iPhone</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>

                                <a href="#">以旧换新</a>

                            </dd>

                        </div>

                        <div class="aside_hide">

                            <dt>手机通讯：</dt>

                            <dd>

                                <a href="#">全部手机</a>

                                <a href="#">iPhone</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>

                                <a href="#">以旧换新</a>

                            </dd>

                        </div>

                        <div class="aside_hide">

                            <dt>手机通讯：</dt>

                            <dd>

                                <a href="#">全部手机</a>

                                <a href="#">iPhone</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>

                                <a href="#">以旧换新</a>

                            </dd>

                            <dt>手机通讯：</dt>

                            <dd>

                                <a href="#">全部手机</a>

                                <a href="#">iPhone</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>

                                <a href="#">以旧换新</a>

                            </dd>

                        </div>

                        <div class="aside_hide">

                            <dt>手机通讯：</dt>

                            <dd>

                                <a href="#">全部手机</a>

                                <a href="#">iPhone</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>

                                <a href="#">以旧换新</a>

                            </dd>

                        </div>

                    </div>

                </div>

                <div class="nav_list">

                    <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>

                    <a href="#">会员</a>

                </div>

                <div class="adv">

                    <h4>最新公告</h4>

                    <p>

                        <a href="#">来部红色手机，颜值亮爆朋友圈</a>

                    </p>

                    <p>

                        <a href="#">荣耀V10高配版 6GB+64GB 魅丽红 移动联通电信4G手机</a>

                    </p>

                    <p>

                        <a href="#">真正香饽饽，时髦的全面屏手机大团战</a>

                    </p>

                    <p>

                        <a href="#">女生新宠vivo X20梦幻粉，八大配色随你选</a>

                    </p>

                    <p>

                        <a href="#">除了低价，我们还能给你更多专业的购机指导</a>

                    </p>

                    <p>

                        <a href="#">作为游戏爱好者，怎么能少一款游戏笔记本呢？</a>

                    </p>

                    <div class="adv_images">

                        <img src="data:images/activity.jpg">

                        <img src="data:images/activity.jpg" class="image1">

                </div>

            </nav>

        </section>

        <div id="banner_tabs" class="flexslider">

            <ul class="slides">

                <li>

                    <a title="" target="_blank" href="#">

                        <img width="1920" height="500" alt="" style="background:#e1211e url(images/ba1.jpg) no-repeat center;" src="data:images/alpha.png">

                    </a>

                </li>

                <li>

                    <a title="" href="#">

                        <img width="1920" height="500" alt="" style="background:#900 url(images/ba2.jpg) no-repeat center;" src="data:images/alpha.png">

                    </a>

                </li>

                <li>

                    <a title="" target="_blank" href="#">

                        <img width="1920" height="500" alt="" style="background:#e1211e url(images/ba1.jpg) no-repeat center;" src="data:images/alpha.png">

                    </a>

                </li>

                <li>

                    <a title="" href="#">

                        <img width="1920" height="500" alt="" style="background:#900 url(images/ba2.jpg) no-repeat center;" src="data:images/alpha.png">

                    </a>

                </li>

            </ul>

            <ul class="flex-direction-nav">

                <li>

                    <a class="flex-prev" href="javascript:;">Previous</a>

                </li>

                <li>

                    <a class="flex-next" href="javascript:;">Next</a>

                </li>

            </ul>

            <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">

                <li class="active">

                    <a>1</a>

                </li>

                <li>

                    <a>2</a>

                </li>

                <li>

                    <a>2</a>

                </li>

                <li>

                    <a>2</a>

                </li>

            </ol>

        </div>

        <script src="js/slider.js"></script>

        <div class="dajuhui">

            <div class="dajuhui_title">

                <a href="#">大聚汇</a>

                <span>更多红包</span>

            </div>

            <div class="dajuhui_images">

                <ul>

                    <li>

                        <a>

                            <img src="data:images/1.jpg">

                        </a>

                        <h4>价值288元</h4>

                        <a href="#">查看福包</a>

                        <span>200人已购买</span>

                    </li>

                    <li>

                        <a>

                            <img src="data:images/2.jpg">

                        </a>

                        <h4>价值288元</h4>

                        <a href="#">查看福包</a>

                        <span>200人已购买</span>

                    </li>

                    <li>

                        <a>

                            <img src="data:images/3.jpg">

                        </a>

                        <h4>价值288元</h4>

                        <a href="#">查看福包</a>

                        <span>200人已购买</span>

                    </li>

                </ul>

            </div>

        </div>

        <div class="yingji">

            <div class="yingji_title">

                <a href="#">应季商品</a>

                <ul>

                    <li class="list active">屯年货</li>

                    <li class="list">拿货节</li>

                    <li class="list">限时</li>

                    <li class="list">折扣</li>

                </ul>

            </div>

            <div>

            <div class="yingji_images">

                <ul>

                    <li>

                        <img src="data:images/ad1.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad1.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色</a>

                    </li>

                    <li>

                        <img src="data:images/ad1.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad1.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad1.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色</a>

                    </li>

                </ul>

            </div>

            <div class="yingji_images hide">

                <ul>

                    <li>

                        <img src="data:images/ad2.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad2.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色</a>

                    </li>

                    <li>

                        <img src="data:images/ad2.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad2.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad2.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色</a>

                    </li>

                </ul>

            </div>

            <div class="yingji_images hide">

                <ul>

                    <li>

                        <img src="data:images/ad3.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad3.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色</a>

                    </li>

                    <li>

                        <img src="data:images/ad3.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad3.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad3.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色</a>

                    </li>

                </ul>

            </div>

            <div class="yingji_images hide">

                <ul>

                    <li>

                        <img src="data:images/ad4.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad4.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色</a>

                    </li>

                    <li>

                        <img src="data:images/ad4.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad4.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色 </a>

                    </li>

                    <li>

                        <img src="data:images/ad4.jpg">

                        <h4>￥4299</h4>

                        <a href="#">Apple iPad MPGW2CH/A 平板电脑 9.7英寸（128G/WLAN）金色</a>

                    </li>

                </ul>

            </div>

            </div>

        </div>

        <footer>

            <div class="center">

                <ul>

                    <li>

                        <span>关于我们</span>

                        <a href="#">关于我们</a>

                        <a href="#">诚聘英才</a>

                        <a href="#">用户服务协议</a>

                        <a href="#">网站服务条款</a>

                        <a href="#">联系我们</a>

                    </li>

                    <li>

                        <span>购物指南</span>

                        <a href="#">新手上路</a>

                        <a href="#">订单查询</a>

                        <a href="#">会员介绍</a>

                        <a href="#">网站服务条款</a>

                        <a href="#">帮助中心</a>

                    </li>

                    <li>

                        <span>消费者保障</span>

                        <a href="#">人工验货</a>

                        <a href="#">退货退款政策</a>

                        <a href="#">运费补贴卡</a>

                        <a href="#">无忧售后</a>

                        <a href="#">先行赔付</a>

                    </li>

                    <li>

                        <span>商务合作</span>

                        <a href="#">人工验货</a>

                        <a href="#">退货退款政策</a>

                        <a href="#">运费补贴卡</a>

                        <a href="#">无忧售后</a>

                        <a href="#">先行赔付</a>

                    </li>

                    <li class="ewm">

                        <span>下载手机版</span>

                        <img src="data:images/code.png">

                        <div class="saomiao">

                            <h4>扫描下载云购APP</h4>

                            <p>把优惠握在手心</p>

                            <p>把潮流带在身边</p>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="footer_bottom">

                <div class="center2">

                    <p>

                        <span>友情链接:</span>

                        <a href="#">素材网</a>

                        <a href="#">跟版网</a>

                        <a href="#">手游交易平台</a>

                        <a href="#">法律咨询</a>

                        <a href="#">深圳地图</a>

                        <a href="#">P2P网贷导航</a>

                        <a href="#">名鞋库</a>

                        <a href="#">叮当音乐网</a>

                    </p>

                    <p>

                        京ICP证1900075号 京ICP备20051110号-5 京公网安备110104734773474323 统一社会信用代码 91113443434371298269B 食品流通许可证SP1101435445645645640352397

                    </p>

                    <p style="padding-bottom:30px;">

                        版物经营许可证 新出发京零字第朝160018号 Copyright©2011-2015 版权所有 ZHE800.COM

                    </p>

                </div>

            </div>

        </footer>

    </body>

</html>

html

2.css:

*{

    padding:;

    margin:;

    text-decoration: none;

    list-style-type: none;

}

.sec{

    display: block;

    width: 100%;

    height: 42px;

    background-color: rgb(233, 225, 225);

}

.top1{

    width: 1200px;

    height: 42px;

    margin: 0 auto;

}

.songhuo{

    width: 100px;

    float: left;

}

.songhuo span{

    font-size: 14px;

    line-height: 42px;

}

.songhuo a{

    color: black;

    font-size: 14px;

    line-height: 42px;

}

.songhuo .hide_add{

    display: none;

    position: absolute;

    width: 400px;

    height: 200px;

    top: 42px;

    background-color: white;

    float: left;

    z-index:;

}

.hide_add ul li{

    display: block;

    float: left;

}

.hide_add ul li a{

    display: block;

    width: 40px;

    height: 40px;

    padding-left: 5px;

    padding-right: 5px;

    float: left;

    text-align: center;

    color: black;

    font-size: 14px;

}

.selected{

    color: white;

    background-color: red;

}

.hide_add ul li a:hover{

    color: red;

}

.vip{

    width: 200px;

    float: left;

    margin-left: 20px;

}

.vip span{

    font-size: 14px;

    line-height: 42px;

}

.vip a{

    color: black;

    font-size: 14px;

    line-height: 42px;

    padding-left: 8px;

}

.help{

    float: right;

}

.help a{

    color: black;

    padding-right: 8px;

    font-size: 14px;

    line-height: 42px;

}

.top2{

    width: 1200px;

    height: 100px;

    margin: 0 auto;

    margin-top: 20px;

}

.inputContent{

    width: 700px;

    float: left;

    margin-left: 40px;

    margin-top: 15px;

}

.inputContent input{

    display: block;

    width: 600px;

    height: 40px;

    border: 2px solid red;

    float: left;

    text-indent:;

}

.inputContent button{

    display: block;

    width: 100px;

    height: 40px;

    background-color: red;

    border: 2px solid red;

    color: white;

    float: left;

}

.shop{

    width: 150px;

    height: 40px;

    float: right;

    border: 1px solid red;

    margin-top: 10px;

}

.shop img{

    display: block;

    float: left;

    margin-top: 10px;

    margin-left: 20px;

}

.shop span{

    display: block;

    float: left;

    font-size: 16px;

    line-height: 40px;

}

.important{

    display: block;

    width: 100%;

    height: 42px;

    background-color: black;

}

.important nav{

    display: block;

    width: 1200px;

    height: 42px;

    margin: 0 auto;

    position: relative;

}

.left{

    width: 200px;

    height: 42px;

    background-color: red;

    color: white;

    position: relative;

    float: left;

    line-height: 42px;

    font-size: 14px;

}

.left img{

    display: block;

    margin-left: 40px;

    margin-top: 14px;

    float: left;

}

.nav_list{

    float: left;

    margin-left: 20px;

}

.nav_list a{

    display: block;

    float: left;

    padding-left: 12px;

    padding-right: 12px;

    line-height: 42px;

    font-size: 14px;

    position: relative;

    color: white;

    margin-right: 10px;

}

.nav_list a:hover{

    background-color: red;

}

aside{

    display: block;

    width: 200px;

    height: 500px;

    position: absolute;

    top: 42px;

    left:;

    background-color: rgba(250, 212, 209, 0.781);

    z-index:;

}

aside ul li{

    display: block;

    float: left;

    margin-top: 5px;

}

aside ul li span{

    display: block;

    font-size: 15px;

    color: black;

    margin-bottom: 5px;

    height: 30px;

    text-indent:;

}

aside ul li p{

    display: block;

    float: left;

    width: 200px;

    height: 25px;

    text-indent:;

}

aside ul li p a{

    display: block;

    float: left;

    color: black;

    font-size: 14px;

    line-height: 25px;

    padding-right: 10px;

}

.aside_hide{

    display: none;

    width: 740px;

    height: 480px;

    position: absolute;

    top: 42px;

    left: 200px;

    background-color: white;

    z-index:;

}

.aside_hide dt{

    color: black;

    margin-top: 15px;

    line-height: 30px;

    text-indent: 10px;

}

.aside_hide dd{

    text-indent: 12px;

    line-height: 40px;

}

.aside_hide dd a{

    color: black;

    padding-right: 5px;

}

.color{

    background-color: rgb(240, 200, 176);

}

.adv{

    width: 250px;

    height: 500px;

    position: absolute;

    right:;

    top: 42px;

    background-color: white;

    z-index:;

}

.adv h4{

    display: block;

    width: 250px;

    height: 40px;

    line-height: 40px;

    font-size: 15px;

    font-weight:;

    border-bottom: 1px dotted rgb(100, 100, 100);

    text-indent:;

}

.adv p{

    display: block;

    width: 250px;

    height: 30px;

    text-indent:;

}

.adv p a{

    display: block;

    line-height: 30px;

    font-size: 14px;

    color: black;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: 1s;

}

.adv p:hover a{

    color: red;

    transform: rotateX(360deg);

}

.adv_images{

    width: 220px;

    height: 220px;

    position: relative;

    top: 30px;

    left: 10px;

    perspective: 1200px;

}

.adv_images img{

    display: block;

    width: 220px;

    height: 220px;

    position: absolute;

    top:;

    left:;

    transition: 1.6s;

}

.image1{

    transform: rotateY(90deg);

}

.adv_images:hover img{

    transform: rotateY(360deg);

}

/*banner*/

.flexslider {

    margin: 0 auto;

    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;

}

.flexslider .slides li {

    width: 100%;

    height: 100%

}

.flex-direction-nav a {

    width: 50px;

    height: 50px;

    line-height: 99em;

    overflow: hidden;

    margin: -35px 0 0;

    display: block;

    background: url(images/ad_ctr1.png) no-repeat;

    position: absolute;

    top: 50%;

    z-index:;

    cursor: pointer;

    opacity:;

    filter: alpha(opacity=0);

    -webkit-transition: all .3s ease;

    border-radius: 35px

}

.flex-direction-nav .flex-next {

    background-position: 0 -50px;

    right: 0

}

.flex-direction-nav .flex-prev {

    left: 0

}

.flexslider:hover .flex-next {

    opacity: .8;

    filter: alpha(opacity=25)

}

.flexslider:hover .flex-prev {

    opacity: .8;

    filter: alpha(opacity=25)

}

.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover {

    opacity:;

    filter: alpha(opacity=50)

}

.flex-control-nav {

    width: 100%;

    position: absolute;

    bottom: 38px;

    text-align: center

}

.flex-control-nav li {

    margin: 0 2px;

    display: inline-block;

    zoom:}

.flex-control-paging li a {

    background:#fff;

    display: block;

    height: 12px;

    overflow: hidden;

    text-indent: -99em;

    width: 12px;

    cursor: pointer;

    border-radius:50%;

}

.flex-control-paging li a.flex-active,.flex-control-paging li.active a {

    background:#FF0036;

}

.flexslider .slides a img {

    width: 100%;

    height: 500px;

    display: block

}

.dajuhui{

    width: 1200px;

    height: 350px;

    margin: 0 auto;

    margin-top: 40px;

}

.dajuhui_title{

    height: 50px;

    background-color: rgb(223, 223, 223);

    border-top: 2px solid rosybrown;

}

.dajuhui_title a{

    display: block;

    width: 120px;

    height: 50px;

    float: left;

    background-color: red;

    color: white;

    font-size: 18px;

    line-height: 50px;

    padding-left: 60px;

}

.dajuhui_title span{

    display: block;

    width: 80px;

    height: 50px;

    line-height: 50px;

    background-color: red;

    color: white;

    font-size: 14px;

    float: right;

    padding-left: 12px;

}

.dajuhui_images{

    height: 250px;

    float: left;

    margin-top: 10px;

}

.dajuhui_images ul li{

    display: block;

    float: left;

    width: 395px;

    height: 230px;

    margin-right: 2px;

}

.dajuhui_images img{

    display: block;

    width: 395px;

    height: 200px;

}

.dajuhui_images ul li:hover{

    border: 2px solid red;

}

.dajuhui_images ul li h4{

    display: block;

    float: left;

    width: 80px;

    height: 20px;

    background-color: red;

    font-weight:;

    font-size: 15px;

    margin-top: 2px;

}

.dajuhui_images ul li a{

    color: black;

    font-size: 15px;

    display: block;

    float: right;

}

.dajuhui_images ul li span{

    display: block;

    float: right;

    color: rgb(236, 8, 198);

    font-size: 14px;

    margin-right: 40px;

    margin-top: 3px;

}

.yingji{

    width: 1200px;

    height: 400px;

    margin: 0 auto;

}

.yingji_title{

    height: 50px;

    background-color: rgb(223, 223, 223);

    border-top: 2px solid rosybrown;

}

.yingji_title a{

    display: block;

    width: 120px;

    height: 50px;

    float: left;

    background-color: red;

    color: white;

    font-size: 18px;

    line-height: 50px;

    padding-left: 60px;

}

.yingji_title ul{

    display: block;

    float: right;

}

.yingji_title ul li{

    display: block;

    float: left;

    padding-right: 10px;

    padding-left: 10px;

    line-height: 50px;

    font-size: 15px;

    cursor: pointer;

}

.yingji_images{

    width: 1200px;

    height: 300px;

    float: left;

    margin-top: 20px;

}

.yingji_images ul li{

    display: block;

    width: 225px;

    height: 300px;

    float: left;

    border: 1px solid darkgray;

    margin-right: 10px;

}

.yingji_images img{

    display: block;

    width: 200px;

    height: 220px;

}

.yingji_images h4{

    display: block;

    font-size: 20px;

    color: red;

    font-weight:;

}

.yingji_images a{

    display: block;

    font-size: 12px;

    color: black;

    text-indent:;

}

.active{

    color: white;

    background-color: red;

}

.hide{

    display: none;

}

footer{

    width: 100%;

    height: 300px;

    border-top: 2px solid red;

}

.center{

    width: 1200px;

    height: 200px;

    margin: 0 auto;

}

.footer_bottom{

    border-top: 1px solid rgb(209, 208, 208);

    height: 50px;

}

.center ul li{

    display: block;

    float: left;

    width: 180px;

    height: 200px;

    border-right: 1px solid rgb(209, 208, 208);

    padding-left: 40px;

}

.center ul li span{

    font-size: 15px;

    display: block;

    margin-bottom: 10px;

    margin-top: 10px;

}

.center ul li a{

    display: block;

    color: black;

    font-size: 14px;

    margin-top: 5px;

}

.center ul .ewm{

    display: block;

    border-right: 0px;

    width: 250px;

}

.ewm img{

    display: block;

    width: 100px;

    height: 100px;

    float: left;

    margin-left: 5px;

}

.ewm span{

    display: block;

    font-size: 15px;

    margin-top: 10px;

}

.ewm .saomiao{

    margin-left: 10px;

}

.saomiao h4{

    font-size: 15px;

    font-weight:;

    text-indent: 8px;

}

.saomiao p{

    font-size: 14px;

    text-indent:;

}

.center2 p{

    display: block;

    margin-top: 15px;

    text-align: center;

    font-size: 15px;

}

.center2 p a{

    color: black;

    font-size: 14px;

}

.center2{

    width: 1200px;

    margin: 0 auto;

}

css

3.js:

$(function(){

    $(".list").mouseover(function(){

        $(this).addClass("active").siblings().removeClass("active");

        var v = $(this).index();

        $(".yingji_images").eq(v).removeClass("hide").siblings().addClass("hide");

    });

    $(".songhuo").mouseover(function(){

        $(".hide_add").css("display","block");

    });

    $(".songhuo").mouseleave(function(){

        $(".hide_add").css("display","none");

    });

    $(".hide_add ul li").click(function(){

        $(this).addClass("selected").siblings().removeClass("selected");

        $(".hide_add").css("display","none");

    });

    $("aside ul li").mouseover(function(){

        $(this).addClass("color").siblings().removeClass("color");

        var v = $(this).index();

        $(".aside_hide").eq(v).show().siblings().hide();

    });

    $(".left").mouseleave(function(){

        $(".aside_hide").css("display","none");

    });

})

js

然后还有就是一个slider.js，一个base.js ，是轮播图要用到的js文件，还有一个最基本的js库文件，这三个文件在我上一篇博客slider插件制作轮播图中有，大家可以自行拷贝。

购物demo的更多相关文章

  1. SSH框架实现仿淘宝购物demo

    还记得六月份实习的时候,曾经做过一个电商的项目,项目里面需要实现类似淘宝购物车的移动端的demo,随着项目的进行,再一次跟购物车碰面,但是今天呢,不是移动端的需求,如何使用SSH框架实现类似淘宝的购物 ...

  2. JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识

    JAVA WEB快速入门系列之前的相关文章如下:(文章全部本人[梦在旅途原创],文中内容可能部份图片.代码参照网上资源) 第一篇:JAVA WEB快速入门之环境搭建 第二篇:JAVA WEB快速入门之 ...

  3. 从零开始学做微信小程序，看这些就够了！

    随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中.小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上 ...

  4. 如何做好一个Sprint Demo

    我列出了一些关于如何做好一个Demo(演示)的建议.我想通过以下四个步骤可以做出一个较好的Demo. 第一步:准备Demo故事 以真实用户使用软件的方式进行Demo.关键点不在于演示软件如何工作,而是 ...

  5. 微信小程序购物商城系统开发系列-目录结构

    上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的 ...

  6. 【Demo】 生成二维码 和 条形码

    条形码 和 二维码 对比 一维条形码只是在一个方向(一般是水平方向)表达信息,而在垂直方向则不表达任何信息,其一定的高度通常是为了便于阅读器的对准. 在水平和垂直方向的二维空间存储信息的条形码, 称为 ...

  7. mybatis重拾---部署官方demo

    学习一个框架,个人认为不是从什么start開始.而是从官方的demo開始,先将demo跑起来,了解到这个框架做了什么.能够实现那些功能.对框架有了一个总体的宏观概念! demo看得差点儿相同后再看官方 ...

  8. .Net集成PayPal的Demo

    .Net集成PayPal的Demo 近来项目中需要使用Paypal(贝宝)支付,研究了一下接口,真是吐血,花了一个下午+一个晚上,屡败屡战,海淘了若干文档,终于尝试成功了,分享一下,希望对将要使用pa ...

  9. 互联网“剁手”新方向，VR全景购物忙——全景智慧城市常诚

    随着VR和AR技术的兴起,各行各业都在寻求VR+的对接方式,除了游戏和社交平台,另一大对VR有着浓厚兴趣的就是电商平台了,阿里.京东等电商巨头纷纷成立VR事业部,如何让亿万用户在VR中愉快的买买买,已 ...

随机推荐

  1. Tcp协议的keepalive功能

    L:128

  2. git 回退版本

    回滚到指定的版本 git reset --hard e377f60e28c8b84158 强制提交 git push -f origin master

  3. 洛谷P1622释放囚犯

    题目: 这个题很明显是一个区间DP,但是比较不同的是,这个题它很像区间DP的经典题——石子合并. 然后我傻傻的搞了这个题搞了一下午,然后几乎看遍了全网的题解,就只看懂了这个方法,可能是我太菜了吧,但是 ...

  4. 允许外网访问MySQL

    1:设置mysql的配置文件     /etc/mysql/my.cnf     找到 bind-address  =127.0.0.1  将其注释掉://作用是使得不再只允许本地访问:  重启mys ...

  5. Python35安装

    wnm系列之python安装 下载网址https://www.python.org/downloads/ 之前就用的3.5.4版本,这次还下这个 安装,我直接选择的install now 默认位置安装 ...

  6. CodeForces 97 E. Leaders（点双连通分量 + 倍增）

    题意 给你一个有 \(n\) 个点 \(m\) 条边的无向图,有 \(q\) 次询问,每次询问两个点 \(u, v\) 之间是否存在长度为奇数的简单路径. \(1 \le n, m, q \le 10 ...

  7. 【BZOJ3874】[AHOI&JSOI2014]宅男计划（贪心，三分）

    [BZOJ3874][AHOI&JSOI2014]宅男计划(贪心,三分) 题面 BZOJ 洛谷 题解 大力猜想一最长的天数和购买外卖的总次数是单峰的.感性理解一下就是买\(0\)次是\(0\) ...

  8. 【CF526G】Spiders Evil Plan（贪心）

    [CF526G]Spiders Evil Plan(贪心) 题面 洛谷 CodeForces 给定一棵树,要求选择\(y\)条链,满足被链覆盖的所有点在树上联通,且\(x\)必定在联通块中. 对于每次 ...

  9. 【bfs】Knight Moves

    [题目描述] 输入nn代表有个n×nn×n的棋盘,输入开始位置的坐标和结束位置的坐标,问一个骑士朝棋盘的八个方向走马字步,从开始坐标到结束坐标可以经过多少步. [输入] 首先输入一个nn,表示测试样例 ...

  10. 「SHOI2014」三叉神经树 解题报告

    「SHOI2014」三叉神经树 膜拜神仙思路 我们想做一个类似于动态dp的东西,首先得确保我们的运算有一个交换律,这样我们可以把一长串的运算转换成一块一块的放到矩阵上之类的东西,然后拿数据结构维护. ...