小米商城HTML5+CSS3

最新推荐文章于 2024-08-17 18:47:23 发布

。。。小博客

最新推荐文章于 2024-08-17 18:47:23 发布

阅读量684

点赞数

分类专栏：静态网页文章标签： html css3 前端

本文链接：https://blog.csdn.net/weixin_44006193/article/details/124103236

版权

静态网页专栏收录该内容

4 篇文章 1 订阅

订阅专栏

css

<!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">
    <title>小米</title>
    <!-- 引入css与图片 -->
    <link rel="icon" href="image/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/mi.css">
    
    
</head>
<body>
   
    <!-- 头部开始 -->
    <div class="header">
        <div class="warp">
            <ul class="back-nav-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">LOT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">金融</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li>
                    <a href="#">下载APP</a><span>|</span>
                    <div class="triangle"></div>
                    <div class="code">
                        <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1">
                        <p>小米商城APP</p>
                    </div>
                </li>
                <li><a href="#">Select Location</a><span>|</span></li>
            </ul>

            <ul class="back-nav-right">
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a><span>|</span></li>
                <li class="cart">
                    <a href="#">
                        <i class="iconfont">&#xe653;</i>购物车（0）
                    </a>
                    <div class="cart-list">购物车中还没有商品，赶紧选购吧</div>
                    </li>
            </ul>
        </div>
    </div>


    <!-- 导航条部分 -->
    <div class="white-nav">
        <!-- 图片 -->
        <div class="warp">
            <div class="logo">
                <a href="#"></a>
            </div>
            <!-- 索引 -->
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="#">Xiaomi手机</a>
                            <div class="nav-list">
                                <div class="wrap">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <div class="img-box">
                                                    <img src="image/88bb84ff06f0ab467b859aeed36b817a.png" alt=""/>
                                                </div>
                                                <p class="name1">小米CC9</p>
                                                <p class="price">1799元起</p>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="img-box">
                                                    <img src="image/88bb84ff06f0ab467b859aeed36b817a.png" alt="">
                                                </div>
                                                <p class="name1">小米CC9</p>
                                                <p class="price">1799元起</p>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="img-box">
                                                    <img src="image/88bb84ff06f0ab467b859aeed36b817a.png" alt="">
                                                </div>
                                                <p class="name1">小米CC9</p>
                                                <p class="price">1799元起</p>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="img-box">
                                                    <img src="image/88bb84ff06f0ab467b859aeed36b817a.png" alt="">
                                                </div>
                                                <p class="name1">小米CC9</p>
                                                <p class="price">1799元起</p>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="img-box">
                                                    <img src="image/88bb84ff06f0ab467b859aeed36b817a.png" alt="">
                                                </div>
                                                <p class="name1">小米CC9</p>
                                                <p class="price">1799元起</p>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="img-box img-box1" >
                                                    <img src="image/88bb84ff06f0ab467b859aeed36b817a.png" alt="">
                                                </div>
                                                <p class="name1">小米CC9</p>
                                                <p class="price">1799元起</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        
                    
                    </li>
                    <li><a href="#">Redmi红米</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>

                </ul>
            </div>
            <!-- 搜索 -->
            <div class="search">
                <form action="">
                    <input type="text">
                    <button class="iconfont">&#xe63d;</button>
                    <div class="hot-word-list">
                        <ul>
                            <li><a href="#">小米9</a></li>
                            <li><a href="#">Redmi k20 pro</a></li>
                            <li><a href="#">Redmi k20</a></li>
                            <li><a href="#">Redmi Note 7</a></li>
                            <li><a href="#">Redmi Note 7 pro</a></li>
                            <li><a href="#">小米电视4c</a></li>
                            <li><a href="#">笔记本pro</a></li>
                            <li><a href="#">小爱音箱</a></li>
                            <li><a href="#">净水器</a></li>
                            <li><a href="#">电视32英寸</a></li>
                        </ul>
                    </div>
                    <div class="hot-word">
                        <a href="#">Redmi Note8 Pro</a>
                        <a href="#">小米9</a>
                    </div>
                </form>
            </div>
            
        </div>

    </div>

    <!-- Banner部分 -->
    <div class="carousel">
        <div class="warp">
            <div class="carousel-box">
                <div class="slide">
                    <ul>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                        <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                        <li><a href="#">手机  电话卡</a><i class="iconfont">&#xe658</i>
                            <div class="slide-list"></div>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
    </div>


    <!-- 广告 -->
    <div class="ad">
        <div class="warp">
            <div class="ad-aside">
                <ul>
                    <li class="row col"><a href="#"><i class="iconfont">&#xe6ab</i><p>服务保障</p></a></li>
                    <li class="row col"><a href="#"><i class="iconfont">&#xe64f</i><p>企业团购</p></a></li>
                    <li class="row"><a href="#"><i class="iconfont">&#xe63f</i><p>F</p></a></li>
                    <li class="col"><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                    <li class="col"><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                    <li ><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                    
                    
                </ul>
            </div>
            <div class="ad-img">
                <a href="#"><img src="image/b30177d629bfbe2fb42251c1b8538f7b.jpg" alt=""></a>
            </div>
            <div class="ad-img">
                <a href="#"><img src="image/b30177d629bfbe2fb42251c1b8538f7b.jpg" alt=""></a>
            </div>
            <div class="ad-img">
                <a href="#"><img src="image/b30177d629bfbe2fb42251c1b8538f7b.jpg" alt=""></a>
            </div>

        </div>
    </div>

    
    <div class="containner">
        <div class="warp">
            <!-- 手机 -->
            <div class="phone">
                <div class="phone-banner-box">
                    <a href="#">
                        <img src="image/431e5fd6bfd1b67d096928248be18303.webp" alt="">
                    </a>
                </div>

                <h2 class="title">手机
                    <a href="#" class="all">查看更多<i class="iconfont">&#xe63e;&nbsp;</i></a>
                </h2>

                <div class="phone-box">
                    <div class="phone-box-left">
                        <a href="#">
                            <img src="image/c583f2edc613f1be20fa415910b13ce3.webp" alt="" >
                        </a>
                    </div> 
    
                    <div class="phone-box-right">
                        <div class="item">
                            <a href="#">
                                <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" class="items-img">
                                <p class="name name2">Redmi Note8 Pro</p>
                                <p class="decs desc2">6400万全景四射</p>
                                <p class="price price2">1399元起</p>
                            </a>
                        </div>
    
                        <div class="item">
                            <a href="#">
                                <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" class="items-img">
                                <p class="name name2">Redmi Note8 Pro</p>
                                <p class="decs desc2">6400万全景四射</p>
                                <p class="price price2">1399元起</p>
                            </a>
                        </div>
    
                        <div class="item">
                            <a href="#">
                                <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" class="items-img">
                                <p class="name name2">Redmi Note8 Pro</p>
                                <p class="decs desc2">6400万全景四射</p>
                                <p class="price price2">1399元起</p>
                            </a>
                        </div>
    
                        <div class="item">
                            <a href="#">
                                <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" class="items-img">
                                <p class="name name2">Redmi Note8 Pro</p>
                                <p class="decs desc2">6400万全景四射</p>
                                <p class="price price2">1399元起</p>
                            </a>
                        </div>
    
                        <div class="item">
                            <a href="#">
                                <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" class="items-img">
                                <p class="name name2">Redmi Note8 Pro</p>
                                <p class="decs desc2">6400万全景四射</p>
                                <p class="price price2">1399元起</p>
                            </a>
                        </div>
    
                        <div class="item">
                            <a href="#">
                                <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" class="items-img">
                                <p class="name name2">Redmi Note8 Pro</p>
                                <p class="decs desc2">6400万全景四射</p>
                                <p class="price price2">1399元起</p>
                            </a>
                        </div>

                        <div class="item">
                            <a href="#">
                                <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" class="items-img">
                                <p class="name name2">Redmi Note8 Pro</p>
                                <p class="decs desc2">6400万全景四射</p>
                                <p class="price price2">1399元起
                                    <del>1200元</del>
                                </p>
                            </a>
                        </div>

                        <div class="item">
                            <a href="#">
                                <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" class="items-img">
                                <p class="name name2">Redmi Note8 Pro</p>
                                <p class="decs desc2">6400万全景四射</p>
                                <p class="price price2">1399元起
                                    <del>1200元</del>
                                </p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            
            <!-- 家电 -->
            <div class="ele">
                <div class="phone-banner-box">
                    <a href="#">
                        <img src="image/431e5fd6bfd1b67d096928248be18303.webp" alt="">
                    </a>
                </div>
    
                <h2 class="title">家电</h2>
                <div class="phone-box">
                    <div class="phone-box-left">
                        <ul>
                            <li class="item">
                                <a href="#">
                                    <img src="image/116fc43816b87192be4e67cf762e8da5.webp" alt="">
                                </a>
                            </li>
                            <li class="item">
                                <a href="#">
                                    <img src="image/116fc43816b87192be4e67cf762e8da5.webp" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="phone-box-right">
                        <ul>
                            <li class="item">
                                <a href="#">
                                    <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" alt="">
                                    <p class="name2">Note 10 Pro</p>
                                    <p class="desc2">天机1100年度旗舰芯，VC液冷散热</p>
                                    <p class="price2">
                                        <del>1699元</del>
                                    </p>
                                </a>
                            </li>

                            <li class="item">
                                <a href="#">
                                    <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" alt="">
                                    <p class="name2">Note 10 Pro</p>
                                    <p class="desc2">天机1100年度旗舰芯，VC液冷散热</p>
                                    <p class="price2">
                                        <del>1699元</del>
                                    </p>
                                </a>
                            </li>

                            <li class="item">
                                <a href="#">
                                    <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" alt="">
                                    <p class="name2">Note 10 Pro</p>
                                    <p class="desc2">天机1100年度旗舰芯，VC液冷散热</p>
                                    <p class="price2">
                                        <del>1699元</del>
                                    </p>
                                </a>
                            </li>

                            <li class="item">
                                <a href="#">
                                    <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" alt="">
                                    <p class="name2">Note 10 Pro</p>
                                    <p class="desc2">天机1100年度旗舰芯，VC液冷散热</p>
                                    <p class="price2">
                                        <del>1699元</del>
                                    </p>
                                </a>
                            </li>

                            <li class="item">
                                <a href="#">
                                    <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" alt="">
                                    <p class="name2">Note 10 Pro</p>
                                    <p class="desc2">天机1100年度旗舰芯，VC液冷散热</p>
                                    <p class="price2">
                                        <del>1699元</del>
                                    </p>
                                </a>
                            </li>

                            <li class="item">
                                <a href="#">
                                    <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" alt="">
                                    <p class="name2">Note 10 Pro</p>
                                    <p class="desc2">天机1100年度旗舰芯，VC液冷散热</p>
                                    <p class="price2">
                                        <del>1699元</del>
                                    </p>
                                </a>
                            </li>

                            <li class="item">
                                <a href="#">
                                    <img src="image/61454401f855cf5ed64747a6ac04bae5.webp" alt="">
                                    <p class="name2">Note 10 Pro</p>
                                    <p class="desc2">天机1100年度旗舰芯，VC液冷散热</p>
                                    <p class="price2">
                                        <del>1699元</del>
                                    </p>
                                </a>
                            </li>

                            <li class="last-items">
                                <div>
                                    <a href="#">
                                        <div class="item-text">
                                            <p>小米米家空气净化器2S</p>
                                            <p>699元</p>
                                        </div>
                                        <img src="image/d5a39c5e-28e7-f4c1-57fd-59933f26032b!100x100.jpg" alt="">
                                    </a>
                                </div>

                                <div>
                                    <a href="#">
                                        <div class="item-text">
                                            <p>浏览更多</p>
                                            <p>热门</p>
                                        </div>
                                        <img src="image/6874615b3c50e837ffe532eb6ea4ef1a.jpg" alt="">
                                    </a>
                                </div>
                            </li>


                            
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 视频 -->
            <div class="video">
                <div class="phone-banner-box">
                    <a href="#">
                        <img src="image/88e35cffc82cd98cd53172460067af17.webp" alt="">
                    </a>
                </div>
                <h2 class="title">视频
                    <a href="#" class="all">查看全部<i class="iconfont">&#xe616;</i></a>
                </h2>
                <div class="video-box">
                    <ul>
                        <li class="video-items">
                            <a href="#">
                                <div class="video-img">
                                    <img src="image/e74c4ff741bcdfc5b28a48a43e4edc6d.webp" alt="">
                                    <div class="play">
                                        <span></span>
                                    </div>
                                </div>
                                <p>2022年春季新品发布会第一场</p>
                            </a>
                        </li>

                        <li class="video-items">
                            <a href="#">
                                <div class="video-img">
                                    <img src="image/101b19aca4bb489bcef0f503e44ec866.jpg" alt="">
                                    <div class="play">
                                        <span></span>
                                    </div>
                                </div>
                                <p>Redmi 10X系列发布会</p>
                            </a>
                        </li>

                        <li class="video-items">
                            <a href="#">
                                <div class="video-img">
                                    <img src="image/96563e75833ba4563bd469dd28203b09.jpg" alt="">
                                    <div class="play">
                                        <span></span>
                                    </div>
                                </div>
                                <p>小米10 青春版 发布会</p>
                            </a>
                        </li>

                        <li class="video-items">
                            <a href="#">
                                <div class="video-img">
                                    <img src="image/e74c4ff741bcdfc5b28a48a43e4edc6d.webp" alt="">
                                    <div class="play">
                                        <span></span>
                                    </div>
                                </div>
                                <p>2022年春季新品发布会第一场</p>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>        
    </div>

    <div class="footer">
        <div class="site-footer">
            <div class="warp">
                <div class="footer-service">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe629</i>
                                <span>预约维修服务</span>
                                
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe63f</i>
                                <span>七天无理由退货</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe606</i>
                                <span>15天免费换货</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe657</i>
                                <span>满69包邮</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe64d</i>
                                <span>520余家售后网点</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="footer-links">
                    <ul>
                        <li>帮助中心</li>
                        <li>
                            <a href="#">账户管理</a>
                        </li>
                        <li>
                            <a href="#">购物指南</a>
                        </li>
                        <li>
                            <a href="#">订单操作</a>
                        </li>
                    </ul>
                    <ul>
                        <li>服务支持</li>
                        <li>
                            <a href="#">售后政策</a>
                        </li>
                        <li>
                            <a href="#">自助服务</a>
                        </li>
                        <li>
                            <a href="#">相关下载</a>
                        </li>
                    </ul>
                    <ul>
                        <li>线下门店</li>
                        <li>
                            <a href="#">小米之家</a>
                        </li>
                        <li>
                            <a href="#">服务网点</a>
                        </li>
                        <li>
                            <a href="#">授权体验店/专店</a>
                        </li>
                    </ul>
                    <ul>
                        <li>关于小米</li>
                        <li>
                            <a href="#">了解小米</a>
                        </li>
                        <li>
                            <a href="#">加入小米</a>
                        </li>
                        <li>
                            <a href="#">投资者关系</a>
                        </li>
                        <li>
                            <a href="#">企业社会责任</a>
                        </li>
                        <li>
                            <a href="#">廉洁举报</a>
                        </li>
                    </ul>
                    <ul>
                        <li>关注我们</li>
                        <li>
                            <a href="#">新浪微博</a>
                        </li>
                        <li>
                            <a href="#">官方微信</a>
                        </li>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                        <li>
                            <a href="#">公益基金会</a>
                        </li>
                        
                    </ul>
                    <ul>
                        <li>特色服务</li>
                        <li>
                            <a href="#">F码通道</a>
                        </li>
                        <li>
                            <a href="#">礼物码</a>
                        </li>
                        <li>
                            <a href="#">防伪查询</a>
                        </li>
                    </ul>
                    <div class="contact">
                        <p class="tel">400-100-5687</p>
                        <p class="time">8:00-18:00 (仅收市话费)</p>
                        <a href="#" class="kefu">
                            <i class="iconfont">&#xe710</i>
                            人工客服
                        </a>
                        <p class="follow">
                            关注小米：
                            <span class="wb"></span>
                            <span class="wx"></span>
                            <img src="image/wx-img.png" alt="" class="wx-img">
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-info">
            <div class="warp">
                <div class="footer-logo">
                    <img src="image/logo-mi2.png" alt="">
                </div>
                <div class="sites">
                    <p>
                        <a rel="nofollow" href="//www.mi.com/index.html" target="_blank">小米商城</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//home.mi.com/index.html" target="_blank">米家</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="http://www.miliao.com/" target="_blank">米聊</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//www.duokan.com/" target="_blank">多看</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//game.xiaomi.com/" target="_blank">游戏</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//b.mi.com/?client_id=180100031058&masid=17409.0358" target="_blank">政企服务</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//privacy.mi.com/all/zh_CN/" target="_blank">小米集团隐私政策</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html" target="_blank">小米公司儿童信息保护规则</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded8d0e4a77d.html" target="_blank">小米商城隐私政策</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//www.mi.com/about/user-agreement/" target="_blank">小米商城用户协议</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="//static.mi.com/feedback/" target="_blank">问题反馈</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="javascript:void(0);" class="J_siteGlobalRegion">Select Location</a>
                        <br>
                        <a rel="nofollow" href="http://www.mi.com/beihu" target="_blank">北京互联网法院法律服务工作站</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="http://www.cca.org.cn/" target="_blank">中国消费者协会</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
                    </p>
                    <p>
                        ©
                        <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                        <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a>
                        <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134" target="_blank">京公网安备11010802020134号</a>
                        <a href="//www.mi.com/culture-license/" target="_blank">京网文[2020]0276-042号</a>
                        <br>
                        <a href="//www.mi.com/medical/record/" target="_blank">（京）网械平台备字（2018）第00005号</a>
                        <a href="//www.mi.com/medical/qualification/" target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
                        <a href="//www.mi.com/business-license/" target="_blank">营业执照</a>
                        <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a>
                        <br>
                        <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png" target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                        <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png" target="_blank">食品经营许可证</a>
                        <br>
                        违法和不良信息举报电话：171-5104-4404&nbsp;<a href='https://www.mi.com/intellectual' target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                    </p>
                    <p>
                        <img src="image/truste.png" alt="">
                        <img src="image/v-logo-2.png" alt="">
                        <img src="image/icon3.png" alt="">
                        <img src="image/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                        <div class="change"></div>
                    </p>
                </div>
                <img src="image/slogan2020.png" alt="" class="slogan">
            </div>
        </div>
    </div>

   
</body> 
</html>

css



/* PC 布局
1）浮动

*/

.header{
    width: 100%;
    height: 40px;
    background-color: #333;
    line-height: 40px;
    font-size: 12px;
}

.warp{
    width: 1226px;
    margin: 0 auto;
}

.back-nav-left , .header li{
    float: left;
}


.back-nav-right{
    float: right;
}

.header li{
    position: relative;
}

.header a{
    color: #b0b0b0;
}

.header a:hover{
    color:#fff;
}

.header span{
    color: #424242;
    margin: 0 3.6px;
}

.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    cursor: pointer;
    /* 光标样式 */

}

.cart:hover{
    background-color: #fff;
}

.car i{
    font-size: 20px;
    margin-left: 4px;
}

.cart:hover>a{
    color: #ff6700;
}

.triangle{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-top: solid 8px transparent;
    border-right: solid 8px transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    display: none;
}

.header li:hover > .triangle,.header li:hover>.code{
    display: block;
}

.code{
    width: 124px;
    height: 0px;
    background-color: #fff;
    box-shadow: 0 1px 5px #aaa;
    position: absolute;
    top:40px;
    left: 50%;
    margin-left: -62px;
    overflow: hidden;
    transition: all .3s;
    z-index: 888;

}

.header li:hover>.code{
    height: 148px;
}

.code>img{
    width: 90px;
    margin: 18px 0 1px;
}

.code>p{
    color: #333;
    font-size: 14px;
    line-height: 14px;
}

.cart-list{
    width: 316px;
    height: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 40px;
    right: 0px;
    transition: all .3s;
    color: #424242;
    overflow: hidden;
    z-index: 88;
}

.cart:hover>.cart-list{
    height: 100px;
    line-height: 100px;
}


.white-nav{
    width: 100%;
    height: 100px;
    position: relative;
    background-color: #fff;
}
/* logo*/
.logo{
    width: 55px;
    height: 100px;
    float: left;
    /* background-color: #ff6700; */
}

.logo>a{
    display: block;
    width: 55px;
    height: 55px;
    background-image: url(../image/logo-mi2.png);
    /* 不加不显示图片 */
    background-size: 55px 55px;
    margin-top: 22.5px;

}

/* 导航 */
.nav-bar,.nav-bar li{
    float: left;
    height: 100px;
}

.nav-bar{
    width: 850px;
    margin-left: 7px;
    margin-right: 18px;
    padding-left: 142px;
    box-sizing: border-box;
}

.nav-bar>ul>li>a{
    color: #333;
    padding: 38px 10px;
    display: block;
}

.nav-bar>ul>li>a:hover{
    color: #ff6700;
}
/* 导航下拉栏 */
.nav-list{
    width: 100%;
    height: 230px;
    display: none;
    background-color: #fff;
    position: absolute;
    top: 100px;
    left: 0%;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
    z-index: 888;
    
}

.nav-bar li:hover>.nav-list{
    display: block;
}

.nav-list li{
    width: 204px;
    height: 201px;
    padding: 35px 12px 0;
    box-sizing: border-box;
    float: left;
}

.img-box{
    height: 110px;
    border-right: 1px solid #e0e0e0;
    margin-top: 16px;
}

.img-box1{
    border-right: none;
}

.name1{
    color: #333;
    font-size: 12px;
    line-height: 20px;
}

.price{
    color: #ff6700;
    font-size: 12px;
    line-height: 20px;
}

/* 搜索 */
.search{
    width: 296px;
    float: left;
    margin-top: 25px;
    position: relative;
    /* background-color: red; */
}

.search input{
    width: 244px;
    height: 50px;
    border: 1px solid #e0e0e0;
    padding: 0 10px;
    box-sizing: border-box;
    border-right: none;
    float: left;
    outline: none;
    transition: all .2s;
}


.search button{
    width: 52px;
    height: 50px;
    background-color: #fff;
    float: left;
    color: #616161;
    border: 1px solid #e0e0e0;
    font-size: 20px;
    transition: all .2s;
    cursor: pointer;
    outline: none;
}

.search input:hover,.search input:hover+button{
    border-color: #b0b0b0;
}

.search input:focus,.search input:focus~button{
    border-color: #ff6700;
}

/* 下拉列表 */
.hot-word-list{
    width: 245px;
    height: 300px;
    border: 1px solid #ff6700;
    box-sizing: border-box;
    position: absolute;
    top: 50px;
    left: 0px;
    border-top: none;
    background-color: #fff;
    z-index: 700;
    display: none;
}

.search input:focus~.hot-word-list{
    display: block;
}

.hot-word-list a{
    color: #424242;
    font-size: 12px;
}

.hot-word-list li{
    text-align: left;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
}

.hot-word{
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 0;
    right: 62px;
    text-align: right;
}

.hot-word>a{
    color: #757575;
    background-color: #eee;
    font-size: 12px;
    padding: 0 5px;
    margin-left: 5px;
    transition: all .2s;
}

.hot-word>a:hover{
    color: #fff;
    background-color: #ff6700;
}

.search input:focus~.hot-word{
    display: none;
}

/* Banner */
.carousel,.carousel-box{
    width: 100%;
    height: 460px;
}

.carousel-box{
    background-image: url(../image/793eebbee1dd569fe56a8aaf58f62452.jpg);
    background-size: 100%;
    animation: carousel 15s linear infinite;
}
/* 放上去暂停动画 */
.carousel-box:hover{
    animation-play-state: paused;
}

@keyframes carousel{
    0%{
        background-image: url(../image/793eebbee1dd569fe56a8aaf58f62452.jpg);
    }
    50%{
        background-image: url(../image/1c3e97686468231f3f78048d7f2b7fdc.webp);
    }
    100%{
        background-image: url(../image/f22bf70c4dc00ab1ed9b3d71125534f7.webp);
    }
}

.slide{
    width: 234px;
    height: 420px;
    background-color: rgba(105, 101, 101, .6);
    padding: 20px 0;
    position: relative;
}

.slide>ul>li{
    height: 42px;
    line-height: 42px;
    padding-left: 30px;
    text-align: left;
}

.slide>ul>li:hover{
    background-color: #ff6700;
}

.slide>ul>li>a{
    font-size: 14px;
    color: #fff;
}

.slide i{
    float: right;
    margin-right: 20px;
    color: #e0e0e0;
    font-weight: bold;
    font-size: 12px;
}

.slide-list{
    width: 992px;
    height: 460px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-left: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 234px;
    display: none;
    padding: 2px 0;

}

.slide li:hover>.slide-list{
    display: block;
}

.slide-list1{
    width: 497px;
}

/* 广告 */
.ad{
    width: 100%;
    height: 170px;
    margin: 14px 0 26px;
}

.ad-aside{
    width: 234px;
    height: 170px;
    background-color: #504943;
    padding: 3px;
    box-sizing: border-box;
    float: left;
}

.ad-img{
    width: 316px;
    height: 170px;
    float: left;
    margin-left: 14.66px;
    transition: all .2s linear;
}

.ad-img img{
    width: 100%;
}

.ad-img:hover{
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.ad-aside li{
    float: left;
    width: 76px;
    height: 82px;
    padding: 16px 0;
    box-sizing: border-box;
    position: relative;
}

.ad-aside a{
    color: #fff;
    font-size: 12px;
    opacity: .7;
    display: block;
    transform: all .2s;
}

.ad-aside a:hover{
    opacity: 1;
}

.ad-aside i{
    margin-bottom: 13px;
    font-size: 24px;
    display: block;
}

.global-img{
    float: left;
    width: 100%;
    margin-top: 40px;
}

/* 边框 */
.row::before,.col::after{
    content: "";
    display: block;
    background-color: #665e57;
    position: absolute;
}

.row::before{
    width: 64px;
    height: 1px;
    bottom: 0;
    left: 6px;
}

.col::after{
    width: 1px;
    height: 70px;
    right: 0;
    top: 6px;
}

/* 手机 */
.containner{
    width: 100%;
    background-color: #f5f5f5;
    padding: 4px 0 12px;
    overflow: hidden;
}

.phone-banner-box{
    width: 100%;
    height: 120px;
    margin: 22px 0;
}

.title{
    color: #333;
    font-size: 22px;
    font-weight: 200;
    text-align: left;
}

.all{
    float: right;
    color: #424242;
    font-size: 16px;
}

.all:hover{
    color: #ff6700;
}

.all>i{
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 4px;
    background-color: #b0b0b0;
    border-radius: 50%;
    line-height: 12px;
    color: #fff;
    font-size: 24px;
    margin-left: 20px;
    transition: all .4s;
    
}

.all:hover>i{
    background-color: #ff6700;
}

.phone-box{
    width: 100%;
    height: 614px;
    clear: both;
}

.phone-box-left{
    width: 234px;
    height: 614px;
    float: left;
    transition: all .2s linear;
}

.phone-box-right{
    width: 992px;
    height: 614px;
    float: left;
}

.item{
    width: 234px;
    height: 300px;
    background-color: #fff;
    float: left;
    margin-bottom: 14px;
    margin-left: 14px;
    transition: all .2s linear;
}

.items-img{
    width: 160px;
    margin-top: 20px;
    margin-bottom: 18px;
}

.name2,.desc2{
    width: 241px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.name2{
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    margin-bottom: 2px;
    color: #333;
}

.desc2{
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #b0b0b0;
    margin-bottom: 10px;
}

.price2{
    color: #ff6700;
    font-size: 14px;
}

.price2>del{
    color: #b0b0b0;
    margin-left: 7px;
}

.item:hover,.phone .phone-box-left:hover,.last-items>div:hover,.video-items:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .5);
}

.phone-box-left .item{
    margin-left: 0;
}

.last-items{
    width: 234px;
    height: 300px;
    float: left;
    margin-left: 14px;
}

.last-items>div{
    width: 234px;
    height: 143px;
    background-color: #fff;
    transition: all .2s linear;
}

.last-items>div:first-child{
    margin-bottom: 14px;
}

.item-text{
    width: 94px;
    float: left;
    margin-left: 30px;
    margin-top: 40px;
    text-align: left;
    font-size: 14px;
    color: #333;
}

.item-text>p:nth-child(2){
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 5px;
}

.last-items img{
    float: right;
    width: 80px;
    margin: 32px 20px 0 0 ;
}

.video-box{
    width: 100%;
}

.video-items{
    width: 298px;
    height: 285px;
    background-color: #fff;
    float: left;
    margin-bottom: 14px;
    margin-right: 10px;
    transition: all .2s linear;
}

.video-items:last-child{
    margin-right: 0%;
    /* background-color: #ff6700; */
}

.video-img{
    position: relative;
    width: 100%;
    height: 180px;
}
.video-items p{
    width: 268px;
    height: 21px;
    margin: 28px auto 6px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.play{
    position: absolute;
    left: 20px;
    bottom: 10px;
    width: 32px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 12px;
    transition: all .2s;
}

.play>span{
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin: 4px auto;
}

.video-img:hover>.play{
    background-color: #ff6700;
    border-color: #ff6700;
}

.site-footer{
    width: 100%;
    height: 332px;
    background-color: #fff;
}

.footer-service{
    width: 100%;
    height: 25px;
    padding: 27px 0;
    border-bottom: 1px solid #e0e0e0;
    
}

.footer-service li{
    float: left;
    width: 19.8%;
    height: 25px;
    line-height: 25px;
    border-right: 1px solid #e0e0e0;
   
}

.footer-service li:last-child{
    border-right: none;
}

.footer-service a{
    color: #616161;
    transition: all .2s;
    position: relative;
}

.footer-service a:hover{
    color: #ff6700;
}

.footer-service i{
    font-size: 24px;
    margin-right: 6px;
    margin-top: 5px;
}

.footer-service span{
    font-size: 20px;
}

.footer-links{
    width: 100%;
    height: 172px;
    padding: 40px 0;
    font-size: 14px;
    color: #424242;
}

.footer-links ul{
    float: left;
    width: 160px;
    text-align: left;
}

.footer-links a{
    color: #757575;
    font-size: 12px;
}

.footer-links a:hover{
    color: #ff6700;
}

.footer-links li{
    height: 18px;
    line-height: 18px;
    margin-top: 10px;
}

.footer-links li:first-child{
    height: 17px;
    line-height: 17.5px;
    margin: -1px 0 26px;
}
.contact{
    float: right;
    width: 251px;
    height: 111px;
    border-left: 1px solid #e0e0e0;    
}

.tel{
    color: #ff6700;
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 5px;
}

.time{
    color: #616161;
    font-size: 12px;
    margin-bottom: 5px;
}

.contact .kefu{
    margin: 0 auto;
    width: 118px;
    height: 28px;
    border: 1px solid #ff6700;
    display: block;
    color: #ff6700;
    line-height: 28px;
    font-size: 12px;
    transition: all .2s;
}

.contact .kefu:hover{
    background-color: #ff6700;
    color: #fff;
}

.follow{
    position: relative;
    margin-top: 10px;
    font-size: 12px;
    color: #616161;
}

.follow >span{
    position: relative;
    top: 7px;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: 100%;
}

.wb{
    background-image: url(../image/wb.png);
}

.wb:hover{
    background-image: url(../image/wb@2x.png);
}

.wx{
    background-image: url(../image/wx.png);
}

.wx:hover{
    background-image: url(../image/wx@2x.png);
}

.wx-img{
    display: none;
    width: 126px;
    position: absolute;
    top: 35px;
    left: 100px;
}

.wx:hover~.wx-img{
    display: block;
}

.footer-logo{
    width: 56px;
    height: 56px;
    margin-right: 20px;
    float: left;
}

.footer-logo>img{
    width: 100%;
}

.site-info{
    width: 100%;
    height: 25px;
    padding: 27px 0;
   
}

.sites{
    float: left;
    width: 1150px;
    font-size: 12px;
    text-align: left;
    line-height: 18px;
    
}

.sites>p:first-child>a{
    color: #757575;
}

.sites>P{
    color: #b0b0b0;
}

.sites>p:nth-child(2)>a{
    color: #b0b0b0;
}

.sites>p>a:hover{
    color: #ff6700;
}

.sites img{
    height: 28px;
    float: left;
}

.change{
    height: 28px;
    float: left;
    width: 75px;
    margin-left: 5px;
    background-image: url(../image/f1ee261b96ae71e845efba398efeca02.png);
    background-size: 100%;
    animation: cc 5s  steps(1) infinite;
    
}

/* 放上去暂停动画 */
.change:hover{
    animation-play-state: paused;
}

@keyframes cc{
    0%{
        background-image: url(../image/f1ee261b96ae71e845efba398efeca02.png);
    }
    50%{
        background-image: url(../image/53e5ecffbb5c090255861e5692f1ae6d.png);
    }
    
}
.slogan{
    margin-top: 30px;
}