美文网首页
Web_3 Html结构-小米

Web_3 Html结构-小米

作者: kerooooo | 来源:发表于2019-12-29 20:33 被阅读0次

中文类名：

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>

    <div class="导航栏">
        <div class="列 链接组 左">
            <a href="#">小米商城</a>
            <a href="#">MIUI</a>
            <a href="#">IOT</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
        </div>
        <div class="列 链接组 右">
            <a href="#">登录</a>
            <a href="#">注册</a>
            <a href="#">消息通知</a>
        </div>
    </div>

    <div class="首屏">
        <div class="行 产品导航">
            <div class="LOGO"><img src="#" alt="#"></div>
            <div class="链接组">
                <a href="#">小米手机</a>
                <a href="#">Redmi红米</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">家电</a>
                <a href="#">路由器</a>
                <a href="#">智能硬件</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="搜索栏">
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
        <div class="行 主促销">
            <div class="产品分类">
                <a href="#">手机 电话卡</a>
                <a href="#">电视 盒子</a>
                <a href="#">笔记本</a>
                <a href="#">手机 电话卡</a>
                <a href="#">手机 电话卡</a>
                <a href="#">手机 电话卡</a>
                <a href="#">手机 电话卡</a>
            </div>
            <div class="轮播">
                <a href="#"><img src="#" alt="#"></a>
                <a href="#"><img src="#" alt="#"></a>
                <a href="#"><img src="#" alt="#"></a>
                <a href="#"><img src="#" alt="#"></a>
            </div>
        </div>
        <div class="行 辅促销">
            <div class="快速通道">
                <div class="行">
                    <div class="列">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                    <div class="列">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                    <div class="列">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                </div>
                <div class="行">
                    <div class="列">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                    <div class="列">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                    <div class="列">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                </div>
            </div>
            <div class="单品"><img src="#" alt=""></div>
            <div class="单品"><img src="#" alt=""></div>
            <div class="单品"><img src="#" alt=""></div>
        </div>
        <div class="行 明星单品">
            <div class="单品">
                <img src="#" alt="">
                <div class="文字">
                    <div class="标题">小米蓝牙耳机</div>
                    <div class="描述">顽音系列</div>
                    <div class="价格">179元</div>
                </div>
            </div>
            <div class="单品"></div>
            <div class="单品"></div>
            <div class="单品"></div>
            <div class="单品"></div>
        </div>
    </div>

    <div class="主体">
        <div class="行 卡片组">
            <div class="头">
                <div class="标题">家电</div>
                <div class="标签组">
                    <div class="文字">查看全部</div>
                    <div class="图标"><img src="#" alt=""></div>
                </div>
            </div>
            <div class="体">
                <div class="列 左"><img src="#" alt=""></div>
                <div class="列 右">
                    <div class="行">
                        <div class="单品">
                            <img src="" alt="">
                            <div class="文字">
                                <div class="标题">小米蓝牙耳机</div>
                                <div class="描述">顽音系列</div>
                                <div class="价格">179元</div>
                            </div>
                        </div>
                        <div class="单品">
                            <img src="" alt="">
                            <div class="文字">
                                <div class="标题">小米蓝牙耳机</div>
                                <div class="描述">顽音系列</div>
                                <div class="价格">179元</div>
                            </div>
                        </div>
                        <div class="单品">
                            <img src="" alt="">
                            <div class="文字">
                                <div class="标题">小米蓝牙耳机</div>
                                <div class="描述">顽音系列</div>
                                <div class="价格">179元</div>
                            </div>
                        </div>
                    </div>
                    <div class="行">
                        <div class="列"></div>
                        <div class="列"></div>
                        <div class="列"></div>
                        <div class="列"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- more -->
    </div>

    <div class="页脚">
        <div class="行 售后">
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
        </div>
        <div class="行 更多">
            <div class="链接组">
                <div class="列">
                    <a href="#">账户管理</a>
                    <a href="#">账户管理</a>
                    <a href="#">账户管理</a>
                </div>
            </div>
            <div class="联系方式">
                <div class="电话">400-100-5678</div>
                <div class="描述">周一至周日 8:00-18:00
                        （仅收市话费）</div>
                <button>人工客服</button>
            </div>
        </div>
        <div class="行 元信息">
            <div>链接</div>
            <div>链接</div>
            <div>链接</div>
            <div>链接</div>
            <div>链接</div>
        </div>
    </div>

</body>

</html>

英文类名：

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>

    <div class="row nav">
        <div class="col link-group left">
            <a href="#">小米商城</a>
            <a href="#">MIUI</a>
            <a href="#">IOT</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
        </div>
        <div class="col link-group right">
            <a href="#">登录</a>
            <a href="#">注册</a>
            <a href="#">消息通知</a>
        </div>
    </div>

    <div class="row first-screen">
        <div class="row product-nav">
            <div class="col LOGO"><img src="#" alt="#"></div>
            <div class="col link-group">
                <a href="#">小米手机</a>
                <a href="#">Redmi红米</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">家电</a>
                <a href="#">路由器</a>
                <a href="#">智能硬件</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="col search">
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
        <div class="row main-promote">
            <div class="col product-cat">
                <a href="#">手机 电话卡</a>
                <a href="#">电视 盒子</a>
                <a href="#">笔记本</a>
                <a href="#">手机 电话卡</a>
                <a href="#">手机 电话卡</a>
                <a href="#">手机 电话卡</a>
                <a href="#">手机 电话卡</a>
            </div>
            <div class="col slider">
                <a href="#"><img src="#" alt="#"></a>
                <a href="#"><img src="#" alt="#"></a>
                <a href="#"><img src="#" alt="#"></a>
                <a href="#"><img src="#" alt="#"></a>
            </div>
        </div>
        <div class="row sub-promote">
            <div class="col shortcut-group">
                <div class="row">
                    <div class="col">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                    <div class="col">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                    <div class="col">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                    <div class="col">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                    <div class="col">
                        <img src="#" alt="#">
                        <div>选购手机</div>
                    </div>
                </div>
            </div>
            <div class="col product"><img src="#" alt=""></div>
            <div class="col product"><img src="#" alt=""></div>
            <div class="col product"><img src="#" alt=""></div>
        </div>
        <div class="row product-star">
            <div class="col product">
                <img src="#" alt="">
                <div class="text">
                    <div class="title">小米蓝牙耳机</div>
                    <div class="desc">顽音系列</div>
                    <div class="price">179元</div>
                </div>
            </div>
            <div class="col product"></div>
            <div class="col product"></div>
            <div class="col product"></div>
            <div class="col product"></div>
        </div>
    </div>

    <div class="row main">
        <div class="row card-group">
            <div class="row head">
                <div class="col cat-title">家电</div>
                <div class="col tab-group">
                    <div class="text">查看全部</div>
                    <div class="icon"><img src="#" alt=""></div>
                </div>
            </div>
            <div class="row body">
                <div class="col left"><img src="#" alt=""></div>
                <div class="col right">
                    <div class="row">
                        <div class="product">
                            <img src="" alt="">
                            <div class="文字">
                                <div class="标题">小米蓝牙耳机</div>
                                <div class="描述">顽音系列</div>
                                <div class="价格">179元</div>
                            </div>
                        </div>
                        <div class="product">
                            <img src="" alt="">
                            <div class="文字">
                                <div class="标题">小米蓝牙耳机</div>
                                <div class="描述">顽音系列</div>
                                <div class="价格">179元</div>
                            </div>
                        </div>
                        <div class="product">
                            <img src="" alt="">
                            <div class="文字">
                                <div class="标题">小米蓝牙耳机</div>
                                <div class="描述">顽音系列</div>
                                <div class="价格">179元</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col"></div>
                        <div class="col"></div>
                        <div class="col"></div>
                        <div class="col"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- more -->
    </div>

    <div class="row footer">
        <div class="row support">
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
            <div class="链接"><img src="#" alt="#">预约维修服务</div>
        </div>
        <div class="row more">
            <div class="col link">
                <div class="col">
                    <a href="#">账户管理</a>
                    <a href="#">账户管理</a>
                    <a href="#">账户管理</a>
                </div>
            </div>
            <div class="col contact">
                <div class="tel">400-100-5678</div>
                <div class="desc">周一至周日 8:00-18:00
                    （仅收市话费）</div>
                <button>人工客服</button>
            </div>
        </div>
        <div class="row meta">
            <div>链接</div>
            <div>链接</div>
            <div>链接</div>
            <div>链接</div>
            <div>链接</div>
        </div>
    </div>

</body>

</html>

相关文章

  • Web_3 Html结构-小米

    中文类名： 英文类名：

  • 2018-10-27

    小米闪购商城的基本结构还原 html代码 小米闪购-小米商城 ...

  • Sublime text 2中Emmet的使用指南

    生成 HTML 文档初始结构 HTML 文档的初始结构，就是包括 doctype、html、head、body 以...

  • HTMl结构：

  • HTML结构

    前端小白初来乍到，将学习过程中的一些基础知识整理至此，欢迎各位指正。 先贴一个基本结构，如下： 其中， 标签告知...

  • HTML 结构

    Html结构包括“头部”（head）、和“主体”（body）。 其中的“头部”提供关于网页的信息，“主体”提供网页...

  • HTML结构

    新建文件HTML File

  • HTML结构

    字符集 视口标签 浏览器私有设置 edge是win10中的IE升级版浏览器，这句话的意思表示设置兼容性为让edge...

  • jq实现圆形倒计时多少秒

    html:结构 css初始化结构: body,html{background: #eee;height: 100%...

  • html/css基础知识

    1. 文件结构： HTML文件的固定结构： ... ... html是根标签 ...

网友评论

      本文标题：Web_3 Html结构-小米

      本文链接：https://www.haomeiwen.com/subject/huluoctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Web_3 Html结构-小米|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！