Project小米商城

纯路人kun

于 2021-12-08 01:46:33 发布

597

文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_54373729/article/details/121782414

版权

HTML结构代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/all.css">
    <link rel="stylesheet" href="./project1_css/base.css">
    <link rel="stylesheet" href="./project1_css/style.css">
    <link rel="icon" type="image/x-icon" href="https://pic21.photophoto.cn/20111020/0007019918640189_b.jpg">
    <title>project1小米商城</title>
</head>
<body>
    <div class="box"><!-- 外部框架 -->
        <div class="header-wrapper"><!--头部容器 -->
            <div class="header fixed-style"><!--头部居中整体-->
                <div class="header-left"><!--头部左侧-->
                    <ul>
                        <li><a href="javascript:;">小米商城</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">MIUI</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">loT</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">云服务</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">天星数科</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">有品</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">小爱开放平台</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">企业团购</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">资质证照</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">协议规则</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text">
                            <a class="app" href="javascript:;">
                                <span>下载app</span>
                                <div class="app-outbox">
                                    <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1">
                                    <p>小米商城APP</p>
                                </div>
                            </a>
                        </li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">智能生活</a></li>
                        <li class="header-interval"></li>
                        <li class="header-left-text"><a href="javascript:;">Select Location</a></li>
                    </ul>
                </div><!--头部左侧--> 
                <div class="header-right"><!--头部右侧-->
                    <ul>
                        <li class="shopping-text">
                            <a href="javascript:;">
                                <i class="fas">&#xf07a;</i><span>购物车（0）</span>
                            </a>
                            <div class="shopping-outbox"><!--头部右侧购物车下拉框-->
                                <p>购物车中还没有商品，快来选购吧！</p>
                            </div><!--头部右侧购物车下拉框-->
                        </li>
                    </ul>
                </div><!--头部右侧-->
                <div class="header-middle">	<!--头部中间-->
                    <ul>
                        <li class="header-middle-text"><a href="javascript:;">登录</a></li>
                        <li class="header-interval"></li>
                        <li class="header-middle-text"><a href="javascript:;">注册</a></li>
                        <li class="header-interval"></li>
                        <li class="header-middle-text"><a href="javascript:;">消息通知</a></li>
                    </ul><!--头部中间-->
                 </div>
            </div><!--头部居中部分-->
        </div><!--头部容器 -->
        <div class="main"><!-- main整体 -->
            <div class="main1"><!-- main1整体 -->
                <div class="main1-inbox fixed-style"><!-- main1内部整体 -->
                    <div class="main1-left"><!-- main1左边 -->
                        <a href="javascript:;"><img src="https://pic21.photophoto.cn/20111020/0007019918640189_b.jpg" alt="xiaomi.logo"></a>
                    </div>
                    <ul class="main1-middle"><!-- main1中间 -->
                        <li class="main1-middle-text hide">
                            <a class="hide-topic" href="javascript:;">全部商品分类</a>
                            <div class="hide-outbox-wrapper">
                                <ul hide-outbox>
                                    <li class="outbox-topic">
                                        <a class="phone" href="javascript:;">手机<i class="fas">&#xf054;</i></a>
                                        <ul class="photo-box"><!-- 手机弹盒 -->
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a95d59ec8c9c6ae7061f314eb4901e7c.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Note 11 Pro系列</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Xiaomi MIX FOLD</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e5aa3cab478f5eeba1c7d4cf25cba9a.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>K40 Pro 系列</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/958d5b4cf1f6a755b97b797f4cec67ed.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>黑鲨4S</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e2c570b7cd666114a7d351a1dd10a527.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Note 11 4G</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1241b5a94ba1739e85f72d46592af0e.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Xiaomi 11 Ultra</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/79e2935264bf9247aa7512e330112820.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Note 10 5G</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/947721c8bc4a4ecc3bca17237ee64dea.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Redmi Note 9 4G</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ca3caca774dc8be0a453c90d1fa58e13.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Note 11 5G</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6cf44dfe89111cb35e1a2211481ff546.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Xiaomi 11 Pro</span>
                                                    </a>
                                                </li>
                                                <li><a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/56bb7e2d44cef71c3afedaeae3d98927.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Note 10 Pro</span>
                                                    </a></li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/970c6b287eb89620f5ee8e2b347f6f3d.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Redmi Note 9 5G</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/92fdd051100722d25323e9bd188befc5.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Redmi K40</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a51c1afa4db8e47e62fad1f6fa4a8970.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Xiaomi 11</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1db88cd66ff1a6a3e75116988b7f3e12.jpg?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Redmi 9A</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/76378ce289a36fcfa29f704ba90b4155.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Redmi Note 9 Pro</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f33903e1162959f500360a39896f2306.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Xiaomi Civi</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Xiaomi 10S</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Xioami 11 青春</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cadc8b00dbe3b5615bd6ab657715baf.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Redmi 9</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Redmi MIX 4</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab956ee82c24bdd83d21bc212aad3eb5.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>K40 游戏增强版</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b45cbcf2bbe244982b2e865fa5077a52.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>黑鲨 4S Pro</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=50&h=50&f=webp&q=90">
                                                        <span>Redmi 8A</span>
                                                    </a>
                                                </li>
                                            </ul><!-- 手机弹盒 -->
                                    </li>
                                    <li class="outbox-topic"><a href="javascript:;">电视<i class="fas">&#xf054;</i></a></li>
                                    <li class="outbox-topic"><a href="javascript:;">笔记本 平板<i class="fas">&#xf054;</i></a></li>
                                    <li class="outbox-topic"><a href="javascript:;">家电<i class="fas">&#xf054;</i></a></li>
                                    <li class="outbox-topic"><a href="javascript:;">出行 穿戴<i class="fas">&#xf054;</i></a></li>
                                    <li class="outbox-topic"><a href="javascript:;">智能 路由器<i class="fas">&#xf054;</i></a></li>
                                    <li class="outbox-topic"><a href="javascript:;">电源 配件<i class="fas">&#xf054;</i></a></li>
                                    <li class="outbox-topic"><a href="javascript:;">健康 儿童<i class="fas">&#xf054;</i></a></li>
                                    <li class="outbox-topic"><a href="javascript:;">耳机 音箱<i class="fas">&#xf054;</i></a></li>
                                    <li class="outbox-topic"><a href="javascript:;">生活 箱包<i class="fas">&#xf054;</i></a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="main1-middle-text xiaomi">
                            <a href="javascript:;">Xiaomi手机</a>
                            <div class="xiaomiphone-box-wrapper"><!-- 小米手机弹盒容器 -->
                                <div class="xiaomiphone-box fixed-style"><!-- 小米手机弹盒 -->
                                    <ul>
                                        <li>
                                            <a href="javascript:;">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=200&h=138&f=webp&q=90"/>
                                                <p class="name">Xiaomi Civy</p>
                                                <p class="money">2599元起</p>
                                            </a>
                                        </li>
                                        <li class="xiaomiphone-box-interval"></li>
                                        <li>
                                            <a href="javascript:;">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/087c52d253d9301dff7743d6bf2d0330.png?thumb=1&w=200&h=138&f=webp&q=90"/>
                                                <p class="name">Xiaomi MIX 4</p>
                                                <p class="money">4199元起</p>
                                            </a>
                                        </li>
                                        <li class="xiaomiphone-box-interval"></li>
                                        <li>
                                            <a href="javascript:;">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=200&h=138&f=webp&q=90"/>
                                                <p class="name">Xiaomi MIX FOLD</p>
                                                <p class="money">7199元起</p>
                                            </a>
                                        </li>
                                        <li class="xiaomiphone-box-interval"></li>
                                        <li>
                                            <a href="javascript:;">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a359e9346e3c6ee8c9d8389e3fd9458.png?thumb=1&w=200&h=138&f=webp&q=90"/>
                                                <p class="name">Xiaomi MIX Ultra</p>
                                                <p class="money">5499元起</p>
                                            </a>
                                        </li>
                                        <li class="xiaomiphone-box-interval"></li>
                                        <li>
                                            <a href="javascript:;">
                                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1c45eadcedeb27b1cafca0359422da9.png?thumb=1&w=200&h=138&f=webp&q=90"/>
                                                <p class="name">Xiaomi 11 Pro</p>
                                                <p class="money">3999元起</p>
                                            </a>
                                        </li>
                                        <li class="xiaomiphone-box-interval"></li>
                                        <li>
                                            <a href="javascript:;">
                                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/56e3379b5422cb06e5c8a0c546445606.png?thumb=1&w=200&h=138&f=webp&q=90"/>
                                            <p class="name">Xiaomi 11 青春版</p>
                                            <p class="money">1999元起</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div><!-- 小米手机弹盒 -->
                            </div><!-- 小米手机弹盒容器 -->
                        </li>
                        <li class="main1-middle-text main1-output-text"><a href="javascript:;">Redmi 红米</a></li>
                        <li class="main1-middle-text main1-output-text"><a href="javascript:;">电视</a></li>
                        <li class="main1-middle-text main1-output-text"><a href="javascript:;">笔记本</a></li>
                        <li class="main1-middle-text main1-output-text"><a href="javascript:;">平板</a></li>
                        <li class="main1-middle-text main1-output-text"><a href="javascript:;">家电</a></li>
                        <li class="main1-middle-text main1-output-text"><a href="javascript:;">路由器</a></li>
                        <li class="main1-middle-text"><a href="javascript:;">服务</a></li>
                        <li class="main1-middle-text"><a href="javascript:;">社区</a></li>
                        <div class="main1-middle-outbox"></div>
                    </ul>
                    <div class="main1-right"><!-- main1右边 -->
                        <form>
                            <input class="search" type="text" value="手机">
                            <button class="search-pointer" type="button"><i class="fas">&#xf002;</i></button>
                        </form>
                    </div>
                </div>
            </div><!-- main1整体 -->
            <div class="main2 fixed-style"><!-- main2整体 -->
                <ul class="main2-img-list"><!-- main2中央图片列表 -->
                    <li class="main2-img-list-part">
                        <a href="javascript:;">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ce57203f1618c7554d8a22f92e18446.jpg?w=2452&h=920" alt="main2-img-list-part1">
                        </a>
                    </li>
                    <li class="main2-img-list-part">
                        <a href="javascript:;">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/19f12ce5a1770c2a23188f1055258967.jpg?thumb=1&w=1379&h=518&f=webp&q=90" alt="main2-img-list-part1">
                        </a>
                    </li>
                    <li class="main2-img-list-part">
                        <a href="javascript:;">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1379&h=518&f=webp&q=90" alt="main2-img-list-part1">
                        </a>
                    </li>
                    <li class="main-img-list-part">
                        <a href="javascript:;">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61bef947ca0b863003b3e68336192a3a.jpg?thumb=1&w=1379&h=518&f=webp&q=90" alt="main2-img-list-part1">
                        </a>
                    </li>
                </ul><!-- main2中央图片列表 -->
                <ul class="main2-pointer-list"><!-- main2圆点列表 -->
                    <li class="main2-pointer active"><a href="javascript:;"></a></li>
                    <li class="main2-pointer"><a href="javascript:;"></a></li>
                    <li class="main2-pointer"><a href="javascript:;"></a></li>
                    <li class="main2-pointer"><a href="javascript:;"></a></li>
                </ul><!-- main2圆点列表 -->
                <div class="arrow arrow-left"><!-- main2中央左箭头标志 -->
                    <a href="javascript:;"></a>
                </div><!-- main2中央左箭头标志 -->
                <div class="arrow arrow-right"><!-- main2中央右箭头标志 -->
                    <a href="javascript:;"></a>
                </div><!-- main2中央右箭头标志 -->
            </div><!-- main2整体 -->
            <div class="main3 fixed-style"><!-- main3整体 -->
                <ul class="main3-left"><!-- main3左侧 -->
                    <li class="main3-left-part"><a href="javascript:;"><i class="fas">&#xf017;</i><br>保障服务</a></li>
                    <li class="main3-left-part"><a href="javascript:;"><i class="fas">&#xf0d1;</i><br>企业团购</a></li>
                    <li class="main3-left-part"><a href="javascript:;"><i class="fab">&#xf082;</i><br>F码通道</a></li>
                    <li class="main3-left-part"><a href="javascript:;"><i class="fas">&#xf012;</i><br>米粉卡</a></a></li>
                    <li class="main3-left-part"><a href="javascript:;"><i class="fas">&#xf079;</i><br>以旧换新</a></a></li>
                    <li class="main3-left-part"><a href="javascript:;"><i class="fas">&#xf10b;</i><br>话费充值</a></li>
                </ul><!-- main3左侧 -->
                <ul class="main3-right"><!-- main3右侧 -->
                    <li class="main3-img-list"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340"></a></li>
                    <li class="main3-img-list"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fce474f4024b96545959ccd45b7e50f3.jpg?w=632&h=340"></a></li>
                    <li class="main3-img-list"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340"></a></li>
                </ul><!-- main3右侧 -->
            </div><!-- main3整体 -->
            <ul class="asider"><!--main4侧边框整体 -->
                <li class="asider-part qr">
                    <a href="javascript:;">
                        <i class="fas">&#xf10b;</i>
                        <p class="asider-part-text1">手机app</p>
                    </a>
                    <div class="qr-outbox">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png"/>
                        <p class="qrcode-text">扫码领取新<br>人百元红包</p>
                    </div>
                </li>
                <li class="asider-part">
                    <a href="javascript:;">
                        <i class="fas">&#xf007;</i>
                        <p>个人中心</p>
                    </a>
                </li>
                <li class="asider-part">
                    <a href="javascript:;">
                        <i class="fas">&#xf0ad;</i>
                        <p>售后服务</p>
                    </a>
                </li>
                <li class="asider-part">
                    <a href="javascript:;">
                        <i class="fas">&#xf025;</i>
                        <p>人工客服</p>
                    </a>
                </li>
                <li class="asider-part">
                    <a href="javascript:;">
                        <i class="fas">&#xf07a;</i>
                        <p>购物车</p>
                    </a>
                </li>
            </ul><!--main4侧边框整体 -->
        </div><!-- main整体 -->
       
    </div><!-- 外部框架 -->
</body>
</html>

外置base.css:

.fixed-style{
    width: 1226px;
    margin: 0 auto;
}
a{
    text-decoration: none;
}
body{
    min-width: 1226px;
}

外置style.css:

/* 顶部样式 */
.header-wrapper{
    height: 40px;
    line-height:40px;
    background-color: #333;
}
.header-wrapper a{
    font-size: 12px;
    color: #b0b0b0;
    display: block;
}
.header-left,.header-left li{
    float: left;
}
.header-middle,.header-right{
    float: right;
}
.header-right{
    position: relative;
}
.header-middle li{
    float: left;
}
.header-interval{
    width: 1px;
    height: 13px;
    background-color: #424242;
    margin: 14px 8px 13px 8px;
}
.header-right a{
    width: 120px;
    height: 40px;
    background-color:rgba(66, 66, 66, .3);
    margin-left: 31px;
    text-align:center;
    position: relative;
    z-index: 999;
}
.header-right i{
    margin-right: 5px;
    font-size: 14px;
}
.header-wrapper a:hover{
    color:rgb(255, 255,255);
}
.header-right:hover  a{
    background-color: #fff;
    color: rgb(255,103,0);
}
.shopping-outbox{
    width: 320px;
    height: 0;
    position: absolute;
    right: 0;
    top: 40px;
    background-color:#fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    overflow: hidden;
    z-index: 99;
    transition: height,0.3s;
}
.shopping-outbox p{
    text-align: center;
    font-size: 12px;
    line-height: 1;
    color: #b0b0b0;
    margin-top: 45px;

}

.header-right:hover .shopping-outbox{
    height: 100px;
}
.app{
    position: relative;
}
.header-left .app-outbox{
    width: 124px; 
     height: 0; 
     background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    overflow: hidden;
    transition: height,0.3s;
    position: absolute;
    left: -30px;
    line-height: 1;
    z-index: 999;
}

.header-left .app-outbox img{
    width: 90px;
    height: 90px;
    margin: 18px 17px 10px 17px;
}
.header-left .app-outbox p{
    font-size: 16px;
    color: #000;
    text-align: center;
}
.app:hover .app-outbox{
    height: 150px;
} 
.app:hover::after{
    content: '';
    position:absolute;
    border: 7px solid transparent;
    border-top: none;
    border-bottom:7px solid #fff;
    left: 16px;
    top: 33px;
 }/* 顶部样式 */

 /* 主体main样式 */


 /* main1样式 */
 /* main1左边样式 */
.main1{
    height: 100px;
    background-color:#fff;
}
.main1-left{
    float: left;
    margin-top: 22px;
}
.main1-left img{
    width: 55px;
    height: 55px;
}/* main1左边样式 */


/* main1中间样式 */
.main1-middle,.main1-middle .main1-middle-text{
    float: left;
}
.main1-middle{
    line-height: 100px;
    margin-left:70px ;
}

.main1-middle-text a{
    display: block;
    padding: 0 12px;
    font-size: 15px;
    color: rgb(51,51,57);
    margin: 0;
}
.main1-middle-text a:hover{
    color: rgb(255,103,0);
}/* main1中间样式 */


/* main1右边样式 */
.main1-right{
    float: right;
    width: 296px;
    height: 50px;
    background-color: #fff;
    margin-top: 25px;
}
.search,.search-pointer{
    float: left;
}
.main1-right .search{
    height: 48px;
    width: 233px;
    color: rgb(133,133,133);
    padding:0 0 0 10px;
    border: 1px solid rgb(224,224,224);
    outline: none;
}
.main1-right .search-pointer{
    display: block;
    line-height: 50px;
    text-align: center;
    width: 50px;
    height:48px ;
    box-sizing: content-box;
    padding: 0;
    border: 1px solid rgb(224,224,224);
    margin-left: -1px;

}
.main1-right:hover .search,
.main1-right:hover .search-pointer{ 
    border: 1px solid rgb(176,176,176) ;
}
.search:focus +.search-pointer{
    border: 1px solid rgb(255,103,0) ;
} 
.main1-right .search:focus,
.search:focus +.search-pointer{
    border: 1px solid rgb(255,103,0) ;
}
.search-pointer:hover{
    background-color: rgb(255,103,0);
}
.main1-middle .hide-topic{
    visibility: hidden; 
}/* main1右边样式 */


/* 左侧可弹可不弹框样式*/
.hide{
    position: relative;
}
.hide-outbox-wrapper{
    width: 234px;
    height: 420px;
    font-size: 14px;
    line-height: 42px;
    padding: 20px 0;
    background-color: rgba(105,101,101,.6);
    position: absolute;
    z-index: 99;
    left: -125px;
}
.hide-outbox-wrapper .outbox-topic{
    height: 42px;
    width:234px;
}
.hide-outbox-wrapper .outbox-topic a{
    display: block;
    color: rgb(255, 255,255);
    width:214px ;
    padding-left: 20px;
    padding-right: 0;
}
.hide-outbox-wrapper .outbox-topic i{
    font-size: 14px;
    float: right;
    margin-top: 14px;
    padding-right: 30px;
}
.hide-outbox-wrapper .outbox-topic a:not(.photo-box a):hover{
    background-color: rgb(255,103,0);
}/* 左侧可弹可不弹框样式*/

/* 手机弹盒样式 */
 .photo-box{
    width: 992px;
    height: 460px;
    position: absolute;
    left: 234px;
    top: 0px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    display: none;
}
.hide-outbox-wrapper .outbox-topic .photo-box li{
    line-height: 76.6px;
}
.hide-outbox-wrapper .outbox-topic .photo-box a{
    display: block;
    float: left;
    width: 248px;
    height:76.6px;
    padding: 0;
}
.hide-outbox-wrapper .outbox-topic .photo-box a img{
    margin-top: 13.3px;
    padding:0 10px 0 20px;
    float: left;
}
.photo-box a span{
    display: block;
    font-size: 14px;
    color: #000;
    
}
.photo-box a:hover span{
    color: rgb(255,103,0);
}
.photo-box a:hover {
    background-color: #fff;
}
.outbox-topic:hover .photo-box{
    display: block;
}
.outbox-topic:hover .phone{
    background-color: rgb(255,103,0);
}/* 手机弹盒样式 */

/* main1中间弹盒样式 */
.main1-middle-outbox{
    width: 100%;
    height: 0px;
    background-color:#fff;
    position: absolute;
    z-index: 999;
    top:140px;
    left: 0;
    box-shadow:0 0 5px rgba(0, 0, 0, .3);
    transition: height,0.3s;
}
.main1-output-text:hover ~ .main1-middle-outbox,
.main1-middle-outbox:hover{
    height: 230px;
}/* main1中间弹盒样式 */ 

/* main1中间部分小米手机弹盒样式 */
.xiaomiphone-box-wrapper{
    width: 100%;
    height: 0;
    position: absolute;
    left: 0px;
    z-index: 999;
    transition: height,0.3s;
    overflow: hidden;

}
.xiaomiphone-box{
    height: 230px;
    position: absolute;
    line-height: 20px;
    z-index: 999999999;
    background-color:#fff;
    left:0;
    right: 0;

}
.xiaomiphone-box li{
    float: left;
    height: 100px;
}
.xiaomiphone-box img{
    width: 150px;
    padding:41.5px 9px 30px 9px;
   
}
.xiaomiphone-box p{
    text-align: center;
    line-height: 1;
}
.xiaomiphone-box .name{
    font-size: 12px;
    color: rgb(51,51,51);
    
}
.xiaomiphone-box .money{
    font-size: 12px;
    color:rgb(255,103,0);
}
 .xiaomiphone:hover .xiaomiphone-box{
    display: block;
}
.xiaomiphone-box-interval{
    width: 1.5px;
    height: 100px;
    background-color:rgb(224,224,224) ;
    margin: 35px 6px 0px 6px;
    
}
.xiaomi:hover .xiaomiphone-box-wrapper{
    height: 230px;
    box-shadow: 0 0px 5px rgba(0,0,0,.3);
}/* main1中间部分小米手机弹盒样式 */
/* main1样式 */
 
/* main2样式 */
.main2{
    position: relative;
}
.main2-img-list .main2-img-list-part{
    position:absolute;
}
.main2-img-list img{
    width: 1226px;
}

.main2-img-list-part:nth-of-type(1){
    z-index: 1;
}
/* main2圆点样式 */
.main2-pointer-list{
    /* width: 70px; */
    height: 10px;
    background-color:transparent;
    position: absolute;
    right:35px;
    bottom: 25px;
    z-index: 9;
}
.main2-pointer-list .main2-pointer{
    float: left;
    background-color: rgba(0,0,0,.3);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    background-clip: content-box;
    margin-right: 8px;
}
.main2-pointer-list .main2-pointer a{
    display: block;
    width: 9px;
    height: 9px;
}
.main2-pointer-list .main2-pointer:hover,
.main2-pointer-list .main2-pointer:active,
.main2-pointer-list .main2-pointer.active{
    /* outline:2px solid rgba(255,255,255,.3) ; */
    background-color: rgb(193,217,247);
    outline:1px solid rgba(115,130,148,.3);
    border-color:rgb(193,217,247,);
}/* main2圆点样式 */

 /* main2中央左右箭头标志样式 */
 .arrow{
     position: absolute;
     z-index: 9;
     top: 195.5px;
     width: 41px;
     height: 69px;
     background-image: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png);
 }
 .arrow a{
     display: block;
     width:41px;
     height: 69px;
 }
 .arrow-left{
     left: 234px;
     background-position:-84px 0;
 }
 .arrow-right{
     right: 0;
     background-position: 83px;
 }
 .arrow-left:hover,
 .arrow-left:active,
 .arrow-right:hover,
 .arrow-right:active{
     background-position:0;
 }/* main2中央左右箭头标志样式 */
 /* main2样式 */

 /* main3样式 */
 /* main3左侧样式 */
 .main3{
     margin-top: 14px;
 }
 .main3-left{
     width: 234px;
     height: 170px;
     background-color: rgb(95,87,80);
     text-align: center;
     position: relative;
     float: left;
 }
 .main3-left a{
     display: block;
     font-size:12px ;
     width:78px;
     height:60px;
     color: rgb(191,188,185);
     float: left;
     padding-top:25px;
 }
 .main3-left a i{
     font-size: 16px;
     margin-bottom: 5px;
 }
 .main3-left a::before{
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: rgb(102,94,87);
    position: absolute;
    margin-left: 9px;
    margin-top: -23px;
}
.main3-left a:hover{
    color: rgb(255,255,255);
}
 .main3-left a::after{
     content: '';
     display: block;
     width: 1px;
     height: 70px;
     background-color: rgb(102,94,87);
     
     position: absolute;
     z-index: 999999;
     margin-top: -50px;
     margin-left: 1px;
 }/* main3左侧样式 */

/* main3右侧样式 */
.main3-right,
.main3-img-list{
    float: left;
}
.main3-right{
    margin-left: 2px;
}
.main3-img-list{
    width:316px ;
    height: 170px;
    margin-left: 14px;
}
.main3-right img{
    width: 100%;
}/* main3右侧样式 */
/* main3样式 */

/* 侧边固定框样式 */
.asider{
    position: fixed;
    right: 0;
    bottom: 70px;
    text-align: center;
    z-index: 999999;
}
.asider .asider-part a{
    display: block;
    width: 82px;
    height: 89.8px;
    font-size: 14px;
    border-left: 1px solid  rgb(245,245,245);
    border-right: 1px solid  rgb(245,245,245);
    border-top: 1px solid  rgb(245,245,245);
    background-color: white;
    color: rgb(153,153,153);

}
.asider .asider-part:last-child{
    border-bottom: 1px solid rgb(245,245,245) ;
}
.asider .asider-part a i{
    font-size: 30px;
    padding-top: 20px;
}
.asider .asider-part a .asider-part-text1{
    margin-top: 10px;
}
.asider .asider-part a:hover{
    color: rgb(255,103,0);
}

.qr-outbox{/* 侧拉二维码样式 */
    position: absolute;
    width: 129px;
    height: 191px;
    border: 1px solid rgb(245,245,245);
    background-color: rgb(255,255,255);
    top: 0;
    left: -144px;
    display: none;
}
.qr-outbox img{
    width: 100px;
    height: 100px;
    margin-top: 20px;
}
.qr-outbox p{
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.5;
    color:  rgb(153,153,153);
}
.qr:hover .qr-outbox{
    display: block;
}
/* 侧拉二维码样式 */
/* 侧边固定框样式 */

/* main整体样式 */

外置还有

font awesome字体图标的all.css和

重置样式表reset.css