小米网页案例

最新推荐文章于 2024-06-10 21:54:00 发布

咩有猫腻.

最新推荐文章于 2024-06-10 21:54:00 发布

阅读量3.4k

点赞数 5

分类专栏： html、css 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/DcTbnk/article/details/104758076

版权

html、css 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

在这里插入图片描述

1.小米网站部分内容的大致框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网 - 小米10 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title>
    <meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi K30、Redmi Note 8 Pro，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
    <meta name="keywords" content="小米,redmi,小米10,Redmi K30,小米MIX Alpha,小米商城">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
    /* css reset */
    *{ margin:0; padding:0;}
    ul,ol{ list-style: none;}
    a{ text-decoration: none; color:#424242;}
    img{ display: block;}
    body{ font-family: Arial; font-size:14px;}
    h1,h2,h3{ font-size:14px;}

    /* css common */
    .l{ float:left;}
    .r{ float:right;}
    .clear:after{ content:""; display:block; clear:both;}
    .container{ width:1226px; margin:0 auto; position: relative;}
    .container-fluid{ position: relative;}
    
    /* css header */
    #header{ background:#333333; height:40px; line-height: 40px; color:#b0b0b0;}
    #header .header-nav{ font-size:0; }
    #header .header-nav a{ font-size:12px; color:#b0b0b0;}
    #header .header-nav span{ font-size:12px; margin:0 8px;}
    #header .header-che{ width:120px; height:100%; text-align:center; background:rgba(255,255,255,.2); margin-left:24px;}
    #header .header-subnav{font-size:0;}
    #header .header-subnav a{ font-size:12px; color:#b0b0b0;}
    #header .header-subnav span{ font-size:12px; margin:0 8px;}

    /* css logo */
    #logo{ height: 90px; margin-top:10px;}
    #logo .logo-pic{ width:55px; height:55px; background:#ff6700 url('./img/mi-logo.png') no-repeat -50px 0; margin-top:12px; margin-right: 189px; transition:.5s;}
    #logo .logo-pic:hover{ background-position: 0 0;}
    #logo .logo-pic a{ width:100%; height:100%; display: block;}
    #logo .logo-nav{ font-size:0; line-height: 90px; position: relative;}
    #logo .logo-nav a{ font-size:16px; margin-right:20px; transition: 1s;}
    #logo .logo-nav a:hover{ color:#ff6700;}
    #logo .logo-nav a > div{ position: absolute; left:0; top:70px; width:100%; height:0; z-index: 20; background:white; overflow: hidden; transition:.5s linear height;}
    #logo .logo-nav a:hover > div{ height:100px;}
    #logo .logo-nav div p{ height:98px; float:left;}

    #logo .logo-search{ margin-top:15px; width:294px; height:48px; border:1px #e0e0e0 solid; display: flex; position: relative;}
    #logo .logo-search input{ flex:1; border:none; outline: none; font-size:18px; text-indent: 5px;}
    #logo .logo-search .logo-search-btn{ width:50px; height:48px; text-align: center; line-height: 48px; border-left:1px #e0e0e0 solid;}
    #logo .logo-search .logo-search-tip{ position: absolute; left:50px; top:15px;}
    #logo .logo-search-tip a{ background:#ccc; padding:3px 5px;}

    /* css banner */
    #banner{ height:460px;}
    #banner .banner-pic{}
    #banner .banner-pic li{}
    #banner .banner-list{ position: absolute; left:0; top:5px; width:234px; height:100%; background:rgba(0,0,0,.5); padding:20px 0; box-sizing: border-box; color:white; }
    #banner .banner-list li{ height:42px; line-height: 42px; padding:0 24px 0 30px; cursor: pointer;}
    #banner .banner-list li:hover{ background:#ff6700;}
    #banner .banner-list .banner-list-popup{ position: absolute; width:400px; height:100%; border:1px black solid; left:234px; top:0; background:white; z-index: 10; display: none; color:black;}
    #banner .banner-list li:hover .banner-list-popup{ display: block;}
    #banner .banner-list a{ color:white;}
    #banner .banner-list i{ float:right;}
    #banner .banner-left-btn , #banner .banner-right-btn{ width:38px; height:38px; position: absolute; top:50%; text-align: center; line-height: 38px;}
    #banner .banner-left-btn i ,  #banner .banner-right-btn i{ font-size:30px; color:chartreuse;}
    #banner .banner-left-btn{ left:234px;}
    #banner .banner-right-btn{ right:0; }
    #banner .banner-dot{ position: absolute; bottom:10px; right:10px;}
    #banner .banner-dot li{ float:left; width:10px; height:10px; background:white; border-radius: 50%; margin:5px;}
    
    /* css news */
    #news{ margin-top:15px;}
    #news .news-info{ width:234px; height:170px; background:url('./img/news-info.png'); padding-left:4px; box-sizing: border-box;}
    #news .news-info div{ width:75px; height:75px; text-align: center; float:left; margin-top: 8px; color:#cfccca;}
    #news .news-info i{ font-size:22px; margin:16px 0 7px 0; display: block;}
    #news .news-pic{ width: 992px;}
    #news .news-pic div{ width:316px; margin-left:14px; float:left;}
    #news .news-pic img{ width:100%;}

    #main{ background: #f5f5f5; margin-top:26px;}

    /* css flash */
    #flash{}
    #flash .flash-title{ height:62px;}
    #flash .flash-title h2{ font-size:22px; font-weight: normal; line-height: 62px;}
    #flash .flash-title div{ margin-top:20px;}
    #flash .flash-title a{ float:left; padding:5px 12px; border:1px #ccc solid;}
    #flash .flash-time{ width:234px; height:339px; background:#f1eded; border-top:1px #e53935 solid;}
    #flash .flash-list{ width:992px; display: flex; overflow: hidden;}
    #flash .flash-list li{ margin-left:14px; width:234px; height:339px; border-top:1px #00c0a5 solid; background: #fafafa; flex-shrink: 0;}

    .ad{ margin-top:22px;}

    /* css phone */
    #phone{}
    #phone .phone-title{ height:62px;}
    #phone .phone-title h2{ font-size:22px; font-weight: normal; line-height: 62px;}
    #phone .phone-title div{ margin-top:25px; font-size:16px;}
    #phone .phone-title i{ background:#b0b0b0; color:white; padding:3px; border-radius: 50%;}
    #phone .phone-hot{ width:234px;}
    #phone .phone-list{ width:992px;}
    #phone .phone-list li{ float:left; width:234px; height:300px; background:white; margin-left:14px; margin-bottom:14px;}

    /* css footer */
    #footer{}
    #footer .footer-nav{}
    #footer .footer-nav-list{ margin-top: 41px;}
    #footer .footer-nav-list dl{ float:left; width:160px;}
    #footer .footer-nav-list dt{ color:#424242; line-height: 14px; margin-bottom: 24px;}
    #footer .footer-nav-list dd{ font-size:12px; line-height: 28px;}
    #footer .footer-nav-phone{ width:251px; height:112px; border-left:1px #e0e0e0 solid; margin-top:40px; text-align:center;}
    #footer .footer-nav-phone h3{ color:#ff6700; font-size:18px;}
    #footer .footer-nav-phone p{ margin:10px 0;}
    #footer .footer-nav-phone div{ width:118px; height: 26px; border:1px #ff6700 solid; margin:10px auto; line-height: 26px;}
    #footer .footer-info{ margin-top:30px; background:url(./img/slogan2016.png) center bottom no-repeat; padding-bottom:40px;}
    #footer .footer-info-logo{ margin-right:10px;}
    #footer .footer-info-content{}
    #footer .footer-info-content div{ margin:10px 0;}
    #footer .footer-info-content p{ line-height: 18px;}
    #footer .footer-info-content div:last-of-type a{ float:left; width:83px; height: 28px;}
    #footer .footer-info-content div:last-of-type img{ width:100%;}
    </style>
</head>
<body>
    <header id="header" class="container-fluid">
        <div class="container clear">
            <div class="header-nav l">
                <a href="#">小米商城</a><span>|</span>
                <a href="#">MIUI</a><span>|</span>
                <a href="#">IoT</a><span>|</span>
                <a href="#">云服务</a><span>|</span>
                <a href="#">金融</a><span>|</span>
                <a href="#">有品</a><span>|</span>
                <a href="#">小爱开放平台</a><span>|</span>
                <a href="#">资质证照</a>
            </div>
            <div class="header-che r">
                <i class="iconfont icongouwuchekong"></i> 购物车(0)
            </div>
            <div class="header-subnav r">
                <a href="#">登录</a><span>|</span>
                <a href="#">注册</a><span>|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </header>
    <div id="logo" class="container clear">
        <div class="logo-pic l">
            <a href="#"></a>
        </div>
        <div class="logo-nav l">
            <a href="#">
                小米手机
                <div>
                    <div class="clear" style="border:1px black solid; ">
                        <p>00000001</p>
                        <p>00000002</p>
                        <p>00000003</p>
                        <p>00000004</p>
                        <p>00000005</p>
                    </div>
                </div>
            </a>
            <a href="#">Redmi 红米</a>
            <a href="#">电视</a>
            <a href="#">笔记本</a>
            <a href="#">家电</a>
            <a href="#">路由器</a> 
        </div>
        <div class="logo-search r">
            <input type="text">
            <div class="logo-search-btn"><i class="iconfont iconfangdajing"></i></div>
            <div class="logo-search-tip">
                <a href="#">小米9 Pro 5G</a>
                <a href="#">redmi Note 8</a>
            </div>
        </div>
    </div>
    <div id="banner" class="container">
        <ul class="banner-pic">
            <li><a href="#"><img src="./img/banner-pic1.jpg" alt=""></a></li>
            <!-- <li><a href="#"><img src="./img/banner-pic1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/banner-pic1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/banner-pic1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/banner-pic1.jpg" alt=""></a></li> -->
        </ul>
        <ul class="banner-list">
            <li>
                <a href="#">手机</a> <a href="#">电话卡</a><i class="iconfont iconiconfontjiantou2"></i>
                <div class="banner-list-popup">1</div>
            </li>
            <li>
                <a href="#">笔记本</a> <a href="#">显示器</a> <a href="#">平板</a><i class="iconfont iconiconfontjiantou2"></i>
                <div class="banner-list-popup">2</div>
            </li>
            <li>
                <a href="#">手机</a> <a href="#">电话卡</a><i class="iconfont iconiconfontjiantou2"></i>
                <div class="banner-list-popup">3</div>
            </li>
            <li>
                <a href="#">笔记本</a> <a href="#">显示器</a><a href="#">平板</a><i class="iconfont iconiconfontjiantou2"></i>
                <div class="banner-list-popup">4</div>
            </li>
            <li><a href="#">手机</a> <a href="#">电话卡</a><i class="iconfont iconiconfontjiantou2"></i></li>
            <li><a href="#">笔记本</a> <a href="#">显示器</a> <a href="#">平板</a><i class="iconfont iconiconfontjiantou2"></i></li>
        </ul>
        <div class="banner-left-btn">
            <i class="iconfont iconzuojiantou"></i>
        </div>
        <div class="banner-right-btn">
            <i class="iconfont iconyoujiantou"></i>
        </div>
        <ul class="banner-dot">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="news" class="container clear">
        <div class="news-info l">
            <div>
                <i class="iconfont iconshouji901"></i>
                <p>小米秒杀</p>
            </div>
            <div>
                <i class="iconfont iconshouji901"></i>
                <p>小米秒杀</p>
            </div>
            <div>
                <i class="iconfont iconshouji901"></i>
                <p>小米秒杀</p>
            </div>
            <div>
                <i class="iconfont iconshouji901"></i>
                <p>小米秒杀</p>
            </div>
            <div>
                <i class="iconfont iconshouji901"></i>
                <p>小米秒杀</p>
            </div>
            <div>
                <i class="iconfont iconshouji901"></i>
                <p>小米秒杀</p>
            </div>
        </div>
        <div class="news-pic r">
            <div><a href="#"><img src="./img/news-pic.jpg" alt=""></a></div>
            <div><a href="#"><img src="./img/news-pic.jpg" alt=""></a></div>
            <div><a href="#"><img src="./img/news-pic.jpg" alt=""></a></div>
        </div>
    </div>
    <main id="main" class="container-fluid">
        <div id="flash" class="container clear">
            <div class="flash-title clear">
                <h2 class="l">小米闪购</h2>
                <div class="r">
                    <a href="#"><i class="iconfont iconzuojiantou"></i></a>
                    <a href="#"><i class="iconfont iconyoujiantou"></i></a>
                </div>
            </div>
            <div class="flash-time l"></div>
            <ul class="flash-list r">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
        <div class="container ad">
            <a href="#"><img src="./img/ad1.jpg" alt=""></a>
        </div>
        <div id="phone" class="container clear">
            <div class="phone-title clear">
                <h2 class="l">手机</h2>
                <div class="r">
                    <a href="#">查看全部 <i class="iconfont iconiconfontjiantou2"></i></a>
                </div>
            </div>
            <div class="phone-hot l">
                <a href="#"><img src="./img/phone-hot.jpg" alt=""></a>
            </div>
            <ul class="phone-list r">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
        <div class="container ad">
            <a href="#"><img src="./img/ad1.jpg" alt=""></a>
        </div>
    </main>
    <footer id="footer" class="container">
        <div class="footer-nav clear">
            <div class="footer-nav-list l">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理南</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
            </div>
            <div class="footer-nav-phone r">
                <h3>400-100-5678</h3>
                <p>周一至周日 8:00-18:00 <br>（仅收市话费）</p>
                <div><i class="iconfont iconliuyan"></i> 人工客服</div>
            </div>
        </div>
        <div class="footer-info clear">
            <div class="footer-info-logo l">
                <a href="#"><img src="./img/logo.png" alt=""></a>
            </div>
            <div class="footer-info-content l">
                <div>
                    <a href="#">小米商城</a>|
                    <a href="#">小米商城</a>|
                    <a href="#">小米商城</a>|
                    <a href="#">小米商城</a>|
                    <a href="#">小米商城</a>|
                    <a href="#">小米商城</a>|
                    <a href="#">小米商城</a>
                </div>
                <p>
                    © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12  食品经营许可证<br>
违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
                <div>
                    <a href="#"><img src="./img/truste.png" alt=""></a>
                    <a href="#"><img src="./img/truste.png" alt=""></a>
                    <a href="#"><img src="./img/truste.png" alt=""></a>
                    <a href="#"><img src="./img/truste.png" alt=""></a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

2.小米网页的详细框架

①html里的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <title>小米</title>
</head>
<body>
    
    <!-- html header -->
    <div id="header" class="container-fluid">
        <h1><a href="#">应对疫情小米服务业务调整通知</a></h1>
    </div>

    <!-- html nav -->
    <div id="nav" class="container-fluid">
        <div class="container clearfix">
            <ul class="l">
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">IoT</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="#">下载APP</a></li>
                <li><a href="#">SelectLocation</a></li>
            </ul>
            <div class="nav-login r">
                <div><a href="#">登录</a></div>
                <span>|</span>
                <div><a href="#">注册</a></div>
                <span>|</span>
                <div><a href="#">消息通知</a></div>
                <div class="iconfont icongouwuche"><a href="#"> 购物车（0）</a></div>
                <div></div>
            </div>
        </div>
    </div>

        <!-- html  menu -->
        <div id="menu" class="container-fluid">
            <div class="menu-main container">
                <div class="menu-btn">
                    <span class="iconfont iconxiaomi"></span>
                    <span class="iconfont iconshouyexiaofangzi"></span>
                </div>
                <ul>
                    <li>小米手机</li>
                    <li>Redmi 红米</li>
                    <li>电视</li>
                    <li>笔记本</li>
                    <li>家电</li>
                    <li>路由器</li>
                    <li>智能硬件</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
                <div class="menu-input">
                    <input type="text">
                    <span class="iconfont iconmagnifier"></span>
                </div>
            </div>
        </div>
    

        <!-- html banner -->
        <div id="banner" class="container">
            <ul class="banner-pic">
                <li class="show"><a href="#"><img src="./images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            </ul>
            <ul class="banner-list">
                <li>
                    <a href="#">手机电话卡 <span class="iconfont iconiconright"></span></a>
                    <div>1111</div>
                </li>
                <li>
                    <a href="#">电视 盒子 <span class="iconfont iconiconright"></span></a>
                    <div>2222</div>
                </li>
                <li>
                    <a href="#">笔记本 显示器 平板 <span class="iconfont iconiconright"></span></a>
                    <div>3333</div>
                </li>
                <li>
                    <a href="#">家电 插线板 <span class="iconfont iconiconright"></span></a>
                    <div>4444</div>
                </li>
                <li>
                    <a href="#">出行 穿戴 <span class="iconfont iconiconright"></span></a>
                    <div>5555</div>
                </li>
                <li>
                    <a href="#">智能 路由器 <span class="iconfont iconiconright"></span></a>
                    <div>6666</div>
                </li>
                <li>
                    <a href="#">电源 配件 <span class="iconfont iconiconright"></span></a>
                    <div>7777</div>
                </li>
                <li>
                    <a href="#">健康 儿童 <span class="iconfont iconiconright"></span></a>
                    <div>8888</div>
                </li>
                <li>
                    <a href="#">耳机 音箱<span class="iconfont iconiconright"></span></a>
                    <div>9999</div>
                </li>
                <li>
                    <a href="#">生活 箱包 <span class="iconfont iconiconright"></span></a>
                    <div>1010</div>
                </li>
            </ul>
          
            <ul class="banner-dot">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>


        <!-- html news -->
        <div id="news" class="container">
            <!-- <div > -->
                <ul class="news-text">
                    <li>
                        <span class="iconfont iconmiaosha"></span>
                        <p>小米秒杀</p>
                    </li>
                    <li>
                        <span class="iconfont iconqiyetuangou"></span>
                        <p>企业团购</p>
                    </li>
                    <li>
                        <span class="iconfont iconFnum"></span>
                        <p>F码通道</p>
                    </li>
                    <li>
                        <span class="iconfont iconmifenka"></span>
                        <p>米粉卡</p>
                    </li>
                    <li>
                        <span class="iconfont iconmoney-5"></span>
                        <p>以旧换新</p>
                    </li>
                    <li>
                        <span class="iconfont iconhuafeichongzhi"></span>
                        <p>话费充值</p>
                    </li>
                </ul>
           <!--  </div> -->
            <div><a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340" alt=""></a></div>
            <div><a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340" alt=""></a></div>
            <div><a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340" alt=""></a></div>
        </div>


        <!-- html main *******************************-->
        <div id="main" class="container-fluid">


            <!-- html iflashbuy -->
            <div id="iflashbuy" class="container">
                <!-- tite -->
                <div class="iflashbuy-title">
                    <h2>小米闪购</h2>
                    <div>
                        <a href="#"><span class="iconfont iconright-angle"></span></a>
                        <a href="#"><span class="iconfont iconiconright"></span></a>
                    </div>
                </div>
                <div class="iflashbuy-time-list">
                    <!-- time -->
                    <div class="iflashbuy-time ">
                        <p>00:00 场</p>
                        <span class="iconfont iconshandian"></span>
                        <p>本场已结束</p>
                        <input type="time">
                    </div>
                    <!-- list -->
                    <ul class="iflashbuy-list">
                        <li>
                            <a href="#">
                                <img src="./images/iflashbuy1.jpg" alt="">
                                <p>米家无线手持擦地机 白色</p>
                                <p>全家人都喜欢的擦地机</p>
                                <p>495元 <del>499元</del></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/iflashbuy2.jpg" alt="">
                                <p>米家无线手持擦地机 白色</p>
                                <p>全家人都喜欢的擦地机</p>
                                <p>495元 <del>499元</del></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/iflashbuy3.jpg" alt="">
                                <p>米家无线手持擦地机 白色</p>
                                <p>全家人都喜欢的擦地机</p>
                                <p>495元 <del>499元</del></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/iflashbuy4.jpg" alt="">
                                <p>米家无线手持擦地机 白色</p>
                                <p>全家人都喜欢的擦地机</p>
                                <p>495元 <del>499元</del></p>
                            </a>
                        </li>
                    </ul>
                </div>


            
            
            
            
            </div>

            
            <!-- html banner -->
            <div id="banner1" class="container">
                <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/58095bfc5cf8d2ab6c3ea2d33805254e.jpg?thumb=1&w=1226&h=120&f=webp&q=90" alt=""></a>
            </div>


            <!-- html  phone -->
            <div id="phone" class="container">
                <div class="phone-title">
                    <div class="l">手机</div>
                    <div class="r">查看全部<span class="iconfont iconiconright"></span></div>
                </div>
                <div class="phone-info">
                    <div class="phone-info-pic">
                        <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=234&h=614&f=webp&q=90" alt=""></a>
                    </div>
                    <ul class="phone-info-list">
                        <li>
                            <a href="#">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                                <p>小米10</p>
                                <p>骁龙865/1亿像素相机</p>
                                <p>3999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                                <p>小米10</p>
                                <p>骁龙865/1亿像素相机</p>
                                <p>3999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/53641901fbc28cbcdb495b17fdf69e46.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                                <p>小米10</p>
                                <p>骁龙865/1亿像素相机</p>
                                <p>3999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07270cc09689eb9b13b29aa9f6bc41eb.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                                <p>小米10</p>
                                <p>骁龙865/1亿像素相机</p>
                                <p>3999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d295c4fb500d163a7045dc715b47f808.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                                <p>小米10</p>
                                <p>骁龙865/1亿像素相机</p>
                                <p>3999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c924c3f3436b6934495fd98f159ee3f7.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                                <p>小米10</p>
                                <p>骁龙865/1亿像素相机</p>
                                <p>3999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6f2493e6c6fe8e2485c407e5d75e3651.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                                <p>小米10</p>
                                <p>骁龙865/1亿像素相机</p>
                                <p>3999元起</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4c87947d104ee5833913e4c520108f16.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                                <p>小米10</p>
                                <p>骁龙865/1亿像素相机</p>
                                <p>3999元起</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


            <!-- html banner -->
            <div id="banner1" class="container">
                <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1226&h=120&f=webp&q=90" alt=""></a>
            </div>


            <!-- html  home -->
            <div id="home" class="container">
    <div class="home-title clearfix">
        <div class="l">家电</div>
        <div class="r"><span class="active">热门</span><span>电视影音</span></div>
    </div>
    <ul class="home-info-list">
        <li>
            <a href="#">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b56fd90a60e3d9e5d87dae9fbd427ea8.jpg?thumb=1&w=234&h=300&f=webp&q=90" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8ce424d6fe93dfb74733b5838140b7ee.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                <p>小米10</p>
                <p>骁龙865/1亿像素相机</p>
                <p>3999元起</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2b911be4c2f156bb6e4cf367c6080045.jpg?thumb=1&w=200&h=200" alt="">
                <p>小米10</p>
                <p>骁龙865/1亿像素相机</p>
                <p>3999元起</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec20453216dcd42f982cffe5fdbc3115.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                <p>小米10</p>
                <p>骁龙865/1亿像素相机</p>
                <p>3999元起</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg" alt="">
                <p>小米10</p>
                <p>骁龙865/1亿像素相机</p>
                <p>3999元起</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b67de5a8ce9025fb5d8bac66e019d1c3.jpg?thumb=1&w=234&h=300&f=webp&q=90" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b8c63a2024528fe5410ebe669b7d2407.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                <p>小米10</p>
                <p>骁龙865/1亿像素相机</p>
                <p>3999元起</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                <p>小米10</p>
                <p>骁龙865/1亿像素相机</p>
                <p>3999元起</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cd2aa2dcad6440b469c22e27db9b6236.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                <p>小米10</p>
                <p>骁龙865/1亿像素相机</p>
                <p>3999元起</p>
            </a>
        </li>
        <li>
                <div class=" top clearfix">
                    <div class="l">
                        <span>小米10</span><br>
                        <span>3999元起</span>
                    </div>
                   <!--  <div class="r">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg?thumb=1&w=100&h=100&f=webp&q=90" alt="">
                    </div> -->
                </div>
                <div class="bottom">
                    浏览更多
                </div>

        </li>
    </ul>

            </div>


            <!-- html banner -->
            <div id="banner1" class="container">
                <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/10fb0086cb21120c53248a3d8cc56dc5.jpg?thumb=1&w=1226&h=120&f=webp&q=90" alt=""></a>
            </div>



            <!-- html rim周边 -->
            <div id="rim" class="container">
                <div class="rim-title clearfix">
                    <div class="l">周边</div>
                    <div class="r"><span class="active">热门</span><span>出行</span></div>
                </div>
                <ul class="rim-info-list">
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/37dc0898c2624b4130da4631f2d9a675.jpg?thumb=1&w=234&h=300&f=webp&q=90" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>3999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/57433a4b991b2a2ddc889f2d8d434655.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>3999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c149537ebb0c2cdb977ddd93200074f4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>3999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03d94ee6059481a6adcb6c4c5c572fb4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>3999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0b8cffcbdaa88e2a314f0a372ca75dd.jpg?thumb=1&w=234&h=300&f=webp&q=90" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41e6890f9d6b7fdb4275c986dc3644e8.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>3999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/38748fefeef78183ac01356a23dbc5c5.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>3999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://i8.mifile.cn/v1/a1/413f5e2f-53e7-0879-119c-8b4466feea53!200x200.jpg" alt="">
                            <p>小米10</p>
                            <p>骁龙865/1亿像素相机</p>
                            <p>3999元起</p>
                        </a>
                    </li>
                    <li>
                            <div class=" top clearfix">
                                <div class="l">
                                    <span>小米10</span><br>
                                    <span>3999元起</span>
                                </div>
                               <!--  <div class="r">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg?thumb=1&w=100&h=100&f=webp&q=90" alt="">
                                </div> -->
                            </div>
                            <div class="bottom">
                                浏览更多
                            </div>
            
                    </li>
                </ul>
            
                        </div>
            
            



            <!-- html banner -->
            <div id="banner1" class="container">
                <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg?thumb=1&w=1226&h=120&f=webp&q=90" alt=""></a>
            </div>


            

             <!-- html  video -->
             <div id="video" class="container">
                <div class="video-title">
                    <div class="l">视频</div>
                    <div class="r">查看全部<span class="iconfont iconiconright"></span></div>
                </div>
                <ul class="video-list">
                    <li>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fd26bb99b723337a2f8eaba84f7d5bb.jpg?thumb=1&w=296&h=180&f=webp&q=90"></img>
                        <p>小米10 8K手机拍大片</p>
                    </li>
                    <li>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a8dd25cab48c60fc6387b9001eddc3f9.jpg?thumb=1&w=296&h=180&f=webp&q=90"></img>
                        <p>小米10发布会</p>
                    </li>
                    <li>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b4004fc968de331f702585d58b15aba2.jpg?thumb=1&w=296&h=180&f=webp&q=90"></img>
                        <p>小米MIX AIpha 开箱视频</p>
                    </li>
                    <li>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/395fdedf0f40206032397e33beed756e.jpg?thumb=1&w=296&h=180&f=webp&q=90"></img>
                        <p>小米5G新品手机发布会</p>
                    </li>
                </ul>
            </div>
        
        </div>


<!-- html  message -->
<div id="message" class="container"> 
    <div class="message-nav">
        <a href="#"><i class="iconfont icongongju"></i>预约维修服务</a>
        <span>|</span>
        <a href="#"><i class="iconfont icongongju"></i>7天无理由退货</a>
        <span>|</span>
        <a href="#"><i class="iconfont icongongju"></i>15天免费换贷</a>
        <span>|</span>
        <a href="#"><i class="iconfont icongongju"></i>满99包邮</a>
        <span>|</span>
        <a href="#"><i class="iconfont icongongju"></i>520余家售后网点</a>
    </div>

    <div class="message-info clearfix">
        <dl>
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
        </dl>
        <dl>
            <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自助服务</dd>
            <dd>相关下载</dd>
        </dl>
        <dl>
            <dt>线下门店</dt>
            <dd>小米之家</dd>
            <dd>服务网点</dd>
            <dd>授权体验店</dd>
        </dl>
        <dl>
            <dt>关于小米</dt>
            <dd>了解小米</dd>
            <dd>加入小米</dd>
            <dd>投资者关系</dd>
            <dd>廉洁举报</dd>
        </dl>
        <dl>
            <dt>关注我们</dt>
            <dd>新浪微博</dd>
            <dd>官方微信</dd>
            <dd>联系我们</dd>
        </dl>
        <dl>
            <dt>特色服务</dt>
            <dd>F码通道</dd>
            <dd>礼物码</dd>
            <dd>防伪操作</dd>
        </dl>

        <div class="message-text">
            <h2>400-100-5678</h2>
            <p>周一至周日 8：00-18：00<br>(仅收市话费)</p>
            <div>人工客服</div>
        </div>
    </div>

</div>



<!-- html footer -->
<div id="lastfooter" class="container-fluid">
    <div class="container clearfix">
        <div class="lastfooter-pic l">
            <img src="./images/footer.png" alt="">
        </div>
        <div class="l">
            <div class="lastfooter-nav">
                <a href="#">小米商城</a>
                <span>|</span> 
                <a href="#">MIUI</a>
                <span>|</span> 
                <a href="#">米家</a>
                <span>|</span> 
                <a href="#">米聊</a>
                <span>|</span> 
                <a href="#">多看</a>
                <span>|</span> 
                <a href="#">游戏</a>
                <span>|</span> 
                <a href="#">政企服务</a>
                <span>|</span> 
                <a href="#">小米天猫店</a>
                <span>|</span> 
                <a href="#">小米集团隐私政策</a>
                <span>|</span> 
                <a href="#">小米公司儿童信息保护规则</a>
                <span>|</span> 
                <a href="#">小米商城隐私政策</a>
                <span>|</span> 
                <a href="#">小米商城用户协议</a>
                <span>|</span> 
                <a href="#">问题反馈</a>
                <span>|</span> 
                <a href="#">Select Location</a>
            </div>
            <p>
                <a href="#">© mi.com 京ICP证110507号</a> <a href="#">京ICP备10046444号</a> <a href="#">京公网安备11010802020134号</a> <a href="#">京网文[2020]0276-042号</a><br><a href="#">（京）网械平台备字（2018）第00005号</a> <a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="#">营业执照</a> <a href="#">医疗器械质量公告</a><br><a href="#">增值电信业务许可证</a> <a href="#">网络食品经营备案（京）【2018】WLSPJYBAHF-12</a>  <a href="#">食品经营许可证</a><br><a href="#">违法和不良信息举报电话：185-0130-1238</a> <a href="#">知识产权侵权投诉</a> <a href="#">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
            </p>

            <ul class="clearfix">
                <li><a href="#">
                    <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
                </a></li>
                <li><a href="#">
                    <img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
                </a></li>
                <li><a href="#">
                    <img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
                </a></li>
                <li><a href="#">
                    <img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                </a></li>
            </ul>
        </div>

 
    </div>
</div>

</body>
</html>

②css样式表

/* css reset */
*{margin:0;padding:0;}
a{text-decoration: none;}
ul{list-style: none;}
img{display:block;}
h1,h2,h3{font-size: 16px;}
body{background:white;}

/* css common */
.l{float:left;}
.r{float:right;}
.clearfix:after{content:"";clear:both;display:block;}
.container{width:1226px;margin:0 auto;position:relative;}
.container-fluid{position:relative;}


/* css header */
#header{height:120px;background-image:linear-gradient(to right,#ffb012,#ffc134)}
#header h1{font-size: 54px;line-height: 120px;text-align: center;text-shadow: 0 5px 5px #424242;font-family: 微软雅黑s;}
#header h1 a{color:white;}


/* css nav */
#nav{background:#333333;height:40px;overflow: hidden;}
#nav a:hover{color:white;}
#nav ul{}
#nav ul li{line-height: 40px;float:left;padding：0 8px;position: relative;padding:0 8px;}
#nav ul li::after{content:"|";color:#3c423c;position: absolute;right:0;top:0;}
#nav ul li:first-of-type{padding-left:0;}
#nav ul li:last-of-type::after{content:""}
#nav ul li a{color:#b0b0b0;font-size: 12px;}
#nav ul li a:hover{color:white;}
#nav .nav-login{display: flex;}
#nav .nav-login div{float: left;line-height: 40px;padding:0 6px;padding:0 16px;margin-left:10px;}
#nav .nav-login div a{color:#b0b0b0;font-size: 12px;}
#nav .nav-login div a:hover{color:white;}
#nav .nav-login span{color:#3c423c;position: relative;left:0;top:9px;}
#nav .nav-login div:nth-of-type(4){background:#424242;width:120px;}
#nav .nav-login div.iconfont{color:#b0b0b0;font-size: 16px;}


/* css menu */
#menu{height:100px;}
#menu .menu-main{display: flex;justify-content: space-between;align-items: center;}
#menu .menu-main .menu-btn{width:55px;height:55px;background:#ff6700;text-align: center;position: relative;}
#menu .menu-main .menu-btn span{font-size: 30px;color:white;position: absolute;line-height: 55px;transition: .1s;}
#menu .menu-main .menu-btn span:first-of-type{left:50%;top:0;transform:translateX(-50%);}
#menu .menu-main .menu-btn span:last-of-type{
    left:-75%;top:0;transform:translateX(-50%);
}
#menu .menu-main .menu-btn:hover span:first-of-type{transform: translateX(55px);}
#menu .menu-main .menu-btn:hover span:last-of-type{transform: translateX(55px);}
#menu .menu-main ul{}
#menu .menu-main ul li{display: inline-block;font-size: 16px;color:#333333;margin-right:20px;line-height: 100px;transition: .5s;}

#menu .menu-main ul li:hover{color:#ff6700}

#menu .menu-main ul li:last-of-type{margin-right:0;}
#menu .menu-main .menu-input{height:48px;border:1px solid #e0e0e0;width:294px;display: inline-flex;}
#menu .menu-main .menu-input input{width:243px;height:48px;border:none;outline:none;font-size: 18px;}
#menu .menu-main .menu-input span{display: inline-block;width:50px;border-left:1px solid #e0e0e0;font-size: 20px; color:#616161;line-height: 48px;text-align: center;}


/* css banner */
#banner{height:460px;position: relative;position: relative;}

#banner .banner-list{width:234px;background:rgba(166,166,166,.3);position: absolute;left:0;top:0;height:460px;padding:20px 0;box-sizing:border-box;}
#banner .banner-list li{clear:both;line-height: 42px;padding:0 24px 0 29px;line-height: 42px;}
#banner .banner-list li div{height:460px;width:600px;background:white;position: absolute;left:234px;top:0;display: none;}

#banner .banner-list li:hover{background:#ff6700;}
#banner .banner-list li:hover div{display: block;}

#banner .banner-list li a{font-size: 12px;color:white;}
#banner .banner-list li a span{float:right;}


#banner .banner-pic{height:460px;overflow: hidden;position: absolute;/* width:6000px; */width:auto;}
#banner .banner-pic li{display: none;}
#banner .banner-pic li.show{display: block;}
#banner .banner-pic li a{}
#banner .banner-pic li img{width:100%;}


#banner .banner-dot{position: absolute;right:30px;bottom:26px;font-size: 0;}
#banner .banner-dot li{width:6px;height:6px;background:#8e9299;border:2px solid #565757;border-radius:50%;display:inline-block;margin-left:8px;}
#banner .banner-dot li.active{background:#f4f8ff;border:2px solid #565757;}



/* css news */
#news{height:210px;display:flex;justify-content: space-between;padding-top: 14px;}
#news .news-text{width:234px;height:170px;background:url(../images/news1.png);padding:2px 3px;display: flex;flex-wrap: wrap;align-items: center;}
#news .news-text li{width:75px;height:81px;text-align: center;}
#news .news-text li span{font-size: 22px;color:#cfccca;margin:19px 0 8px 0;display: block;}
#news .news-text li p{font-size: 12px;color:#cfccca;}
#news div{width:316px;height:170px;}
#news div a{}
#news div a img{width:100%;}



/* css main */
#main{background:#f5f5f5;height:auto;overflow: hidden;}
/* title */
#iflashbuy{height:auto;}
#iflashbuy .iflashbuy-title{display:flex;justify-content: space-between;align-items: center;height:62px;}
#iflashbuy .iflashbuy-title h2{font-size: 22px;color:#333333;}
#iflashbuy .iflashbuy-title div{border:1px solid #e0e0e0;position: relative;top:5px;left:0;width:69px;height:22px;display: flex;align-items: center;}
#iflashbuy .iflashbuy-title div a{}
#iflashbuy .iflashbuy-title div span{height:22px;color:#e0e0e0;width:34px;display: inline-block;text-align: center;line-height: 22px;}
#iflashbuy .iflashbuy-title div span:first-of-type{border-right: 1px solid #e0e0e0;color:#b0b0b0;}


#iflashbuy .iflashbuy-time-list{display: flex;}
/* time */
#iflashbuy .iflashbuy-time{width:234px;height:339px;text-align: center;background:#f1eded;border-top: 1px solid red;}
#iflashbuy .iflashbuy-time p{}
#iflashbuy .iflashbuy-time p:nth-of-type(1){font-size: 20px;color:#ef3a3b;line-height: 20px;margin:60px 0 31px 0;}
#iflashbuy .iflashbuy-time p:nth-of-type(2){font-size: 14px;line-height: 14px;margin-bottom: 30px;}
#iflashbuy .iflashbuy-time span{font-size: 54px;margin-bottom: 35px;line-height: 54px;display: block;color:#ef3a3b;}
/* list */
#iflashbuy .iflashbuy-list{display: flex;}
#iflashbuy .iflashbuy-list li{width:234px;height:339px;background:white;border-top: 1px solid yellow;margin-left: 14px;padding-top: 65px;box-sizing: border-box;}
#iflashbuy .iflashbuy-list li a{}
#iflashbuy .iflashbuy-list li a img{margin:0 auto;display: block;}
#iflashbuy .iflashbuy-list li a p{font-size: 12px;line-height: 12px;color:#fa6509;text-align: center;}
#iflashbuy .iflashbuy-list li a p:nth-of-type(1){font-size: 14px;color:#202020;line-height: 14px;margin-top: 49px;}
#iflashbuy .iflashbuy-list li a p:nth-of-type(2){font-size: 12px;line-height: 12px;color:#adadad;margin:10px 0 20px 0;}
#iflashbuy .iflashbuy-list li a p:nth-of-type(3) del{color: #adadad;}




/* css banner */
#banner1{height:120px;margin-top:22px;/* margin:0 auto; */margin-bottom:20px;}
#banner1 a{ width:100%;height:100%;}
#banner1 a img{width:100%}



/* css phone */
#phone{}
#phone .phone-title{height:60px;}
#phone .phone-title div{line-height: 60px;}
#phone .phone-title div:nth-of-type(1){font-size: 22px;color:#333333;}
#phone .phone-title div:nth-of-type(2){font-size: 16px;color:#333333;}
#phone .phone-title div:nth-of-type(2) span{font-size: 12px;color:white;background:#b0b0b0;border-radius: 50%;margin-left: 8px;width:20px;height:20px;display: inline-block;line-height: 20px;text-align: center;position: relative; left:0;top:-3px;}

#phone .phone-info{height:614px;display: flex;justify-content: space-between;}

#phone .phone-info .phone-info-pic{height:614px;width:234px;margin-right: 14px;}
#phone .phone-info .phone-info-pic img{width:100%;}

#phone .phone-info .phone-info-list{width:978px;height:614px;display: flex;justify-content: space-between;flex-wrap: wrap;}
#phone .phone-info .phone-info-list li{width:234px;height:300px;background:white;box-sizing: border-box;margin-bottom: 14px;}
#phone .phone-info .phone-info-list li img{margin:0 auto; margin-top: 12px;}
#phone .phone-info .phone-info-list li p{font-size: 12px; line-height: 12px;text-align: center;}
#phone .phone-info .phone-info-list li p:nth-of-type(1){color:#6e336e;}
#phone .phone-info .phone-info-list li p:nth-of-type(2){color:#b0b0b0;margin:8px 0 10px 0;}
#phone .phone-info .phone-info-list li p:nth-of-type(3){color:#ff6700;}







/* css home */
#home{}
#home .home-title{height:60px;overflow: hidden;}
#home .home-title div{line-height: 60px;}
#home .home-title div:nth-of-type(1){font-size: 22px;color:#333333;}
#home .home-title div:nth-of-type(2){font-size: 16px;color:#333333;display: flex;}
#home .home-title div:nth-of-type(2) span{margin-left:10px;margin-left: 30px;}
#home .home-title div:nth-of-type(2) .active{color:#fa6509;}
#home .home-title div:nth-of-type(2) .active:after{content:"";width:100%;height:2px;background:#ff6700;position: relative;bottom:15px;left:0;display: block;}


#home .home-info-list{height:614px;display: flex;justify-content: space-between;flex-wrap: wrap;}
#home .home-info-list li{width:234px;height:300px;background:white;box-sizing: border-box;margin-bottom: 14px;}
#home .home-info-list li img{margin:0 auto; margin-top: 12px;}
#home .home-info-list li:nth-of-type(1) img{margin-top:0;}
#home .home-info-list li:nth-of-type(6) img{margin-top:0;}
#home .home-info-list li p{font-size: 12px; line-height: 12px;text-align: center;}
#home .home-info-list li p:nth-of-type(1){color:#6e336e;}
#home .home-info-list li p:nth-of-type(2){color:#b0b0b0;margin:8px 0 10px 0;}
#hom .home-info-list li p:nth-of-type(3){color:#ff6700;}

#home .home-info-list li:last-of-type{background:#f5f5f5;margin-top: 0;}
#home .home-info-list li:last-of-type div{height:143px;background:white;width:100%;box-sizing: border-box;}
#home .home-info-list li:last-of-type div.top{margin-bottom: 14px;}
#home .home-info-list li:last-of-type div.top img{width:60%;}
#home .home-info-list li:last-of-type div.top span{font-size: 12px; line-height: 12px;margin-left:30px;display: block;}
#home .home-info-list li:last-of-type div.top span:nth-of-type(1){color:#6e336e;margin-top:44px;line-height: 20px;}
#home .home-info-list li:last-of-type div.top span:nth-of-type(2){color:#ff6700;}








/* css rim */
#rim{}
#rim .rim-title{height:60px;overflow: hidden;}
#rim .rim-title div{line-height: 60px;}
#rim .rim-title div:nth-of-type(1){font-size: 22px;color:#333333;}
#rim .rim-title div:nth-of-type(2){font-size: 16px;color:#333333;display: flex;}
#rim .rim-title div:nth-of-type(2) span{margin-left:10px;margin-left: 30px;}
#rim .rim-title div:nth-of-type(2) .active{color:#fa6509;}
#rim .rim-title div:nth-of-type(2) .active:after{content:"";width:100%;height:2px;background:#ff6700;position: relative;bottom:15px;left:0;display: block;}


#rim .rim-info-list{height:614px;display: flex;justify-content: space-between;flex-wrap: wrap;}
#rim .rim-info-list li{width:234px;height:300px;background:white;box-sizing: border-box;margin-bottom: 14px;}
#rim .rim-info-list li img{margin:0 auto; margin-top: 12px;}
#rim .rim-info-list li:nth-of-type(1) img{margin-top:0;}
#rim .rim-info-list li:nth-of-type(6) img{margin-top:0;}
#rim .rim-info-list li p{font-size: 12px; line-height: 12px;text-align: center;}
#rim .rim-info-list li p:nth-of-type(1){color:#6e336e;}
#rim .rim-info-list li p:nth-of-type(2){color:#b0b0b0;margin:8px 0 10px 0;}
rim .rim-info-list li p:nth-of-type(3){color:#ff6700;}

#rim .rim-info-list li:last-of-type{background:#f5f5f5;margin-top: 0;}
#rim .rim-info-list li:last-of-type div{height:143px;background:white;width:100%;box-sizing: border-box;}
#rim .rim-info-list li:last-of-type div.top{margin-bottom: 14px;}
#rim .rim-info-list li:last-of-type div.top img{width:60%;}
#rim .rim-info-list li:last-of-type div.top span{font-size: 12px; line-height: 12px;margin-left:30px;display: block;}
#rim .rim-info-list li:last-of-type div.top span:nth-of-type(1){color:#6e336e;margin-top:44px;line-height: 20px;}
#rim .rim-info-list li:last-of-type div.top span:nth-of-type(2){color:#ff6700;}




/* css video */
#video{}
#video .video-title{height:60px;}
#video .video-title div{line-height: 60px;}
#video .video-title div:nth-of-type(1){font-size: 22px;color:#333333;}
#video .video-title div:nth-of-type(2){font-size: 16px;color:#333333;}
#video .video-title div:nth-of-type(2) span{font-size: 12px;color:white;background:#b0b0b0;border-radius: 50%;margin-left: 8px;width:20px;height:20px;display: inline-block;line-height: 20px;text-align: center;position: relative; left:0;top:-3px;}

#video .video-list{display:flex;justify-content: space-between;margin-bottom: 26px;}
#video .video-list li{width:296;height:285px;background:white;}
#video .video-list li img{width:100%;}
#video .video-list li p{font-size: 12px;color:#333333;line-height: 12px;margin-top: 32px;text-align: center;}




/* css message */
#message{}
#message .message-nav{text-align: center;height:79px;box-sizing: border-box;border-bottom: 1px solid #e0e0e0;display: flex;align-items: center;justify-content: center;}
#message .message-nav a{font-size: 16px;color:#616161;line-height: 16px;}
#message .message-nav a .iconfont{font-size: 24px;color:#616161;margin-right: 5px;position: relative;top:3px;left:0;}
#message .message-nav span{margin:0 50px;color:#e0e0e0;font-size: 25px;}


#message .message-info{padding: 40px 0 6px 0;}
#message .message-info dl{font-size:12px;width:160px;float: left;}
#message .message-info dl dt{color:#424242;line-height: 12px;margin-bottom: 24px;}
#message .message-info dl dd{color:#757575;line-height: 28px;}

#message .message-info .message-text{font-size: 0;text-align: center;float:right;width:251px;height:112px;border-left: 1px solid #e0e0e0;}
#message .message-info .message-text h2{font-size: 22px;line-height: 18px;color:#ff6700;margin-bottom: 8px;}
#message .message-info .message-text p{font-size: 12px;line-height: 18px;color:#616161;}
#message .message-info .message-text div{width:118px;height:28px;border:1px solid #ff6700;line-height: 28px;margin:17px auto;font-size: 12px;color:#ff6700;}



/* css footer */
#lastfooter{background:#fafafa;padding-top: 30px;padding-bottom: 79px;}
#lastfooter .lastfooter-pic{width:56px;height:57px;margin:0 10px 0 1px;}

#lastfooter .lastfooter-nav{font-size: 12px;line-height:12px;color:#757575;margin:4px 0 2px 0;}
#lastfooter .lastfooter-nav a{color:#757575;}
#lastfooter .lastfooter-nav span{margin:0 4px;}

#lastfooter p{font-size: 12px;color:#b0c0d6;line-height: 18px;}
#lastfooter p a{color:#b0c0d6;}

#lastfooter ul{padding-top: 5px;}
#lastfooter ul li{width:80px;float: left;margin-right: 8px;}
#lastfooter ul li a{}
#lastfooter ul li a img{width:100%;}

#lastfooter a:hover{color:#ff6700;}

咩有猫腻.

关注

5
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
小米网页案例

1.小米网站的大致框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
复制链接

扫一扫

专栏目录