HTML结构实战 - 小米 - [: 'HTML精讲 - 表严肃讲HTML' |cut:tmp.cut_limit :]

中文类名

<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>
    </div>
    <div class="列 链接组 右">
        <a href="#">登录</a>
        <a href="#">注册</a>
        <a href="#">消息通知</a>
    </div>
</div>
<div class="行 首屏">
    <div class="行 产品导航">
        <div class="列 LOGO">
            <img src="#" alt="LOGO">
        </div>
        <div class="列 链接组">
            <a href="#">手机</a>
            <a href="#">电脑</a>
            <a href="#">盒子</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
        </div>
        <div class="列 搜索">
            <input type="text">
            <button>搜索</button>
        </div>
    </div>
    <div class="行 主促销">
        <div class="列 产品分类">
            <a href="#">手机 电话卡</a>
            <a href="#">电视 盒子</a>
            <a href="#">Item Item</a>
            <a href="#">Item Item</a>
            <a href="#">Item Item</a>
            <a href="#">Item Item</a>
        </div>
        <div class="列 轮播">
            <a href="#">
                <img src="#">
            </a>
        </div>
    </div>
    <div class="行 辅促销">
        <div class="列 快速通道组">
            <div class="行">
                <div class="列 快速通道">
                    <img>
                    <div>选购手机</div>
                </div>
                <!--2 more-->
            </div>
            <!--1 more-->
        </div>
        <div class="列 单品">
            <img>
        </div>
        <!--2 more-->
    </div>
    <div class="行 明星单品">
        <div class="列 单品">
            <img>
            <div class="文字">
                <div class="标题">Mix 2</div>
                <div class="描述">lorem ipsum ...</div>
                <div class="价格">￥100</div>
            </div>
        </div>
        <!--4 more-->
    </div>
</div>
<div class="行 主体">
    <div class="行 卡片组">
        <div class="行 卡片组头">
            <div class="列 所属分类标题">家电</div>
            <div class="列 标签组">
                <div class="标签">热门</div>
                <div class="标签">电视影音</div>
                <div class="标签">Item</div>
                <div class="标签">Item</div>
            </div>
        </div>
        <div class="行 卡片组体">
            <div class="列 左">
                <img>
            </div>
            <div class="列 右">
                <div class="行">
                    <div class="列 卡片">
                        <img>
                        <div class="文字">
                            <div class="标题">Mix 2</div>
                            <div class="描述">lorem ipsum ...</div>
                            <div class="价格">￥100</div>
                        </div>
                    </div>
                    <!--3 more-->
                </div>
                <!--1 more-->
            </div>
        </div>
    </div>
    <!--...-->
</div>
<div class="行 页脚">
    <div class="行 售后">
        <div class="列 链接">
            <img src="#">
            预约维修服务
        </div>
        <!--...-->
    </div>
    <div class="行 更多">
        <div class="列 链接组">
            <div class="列">
                <a href="#">账户管理</a>
                <a href="#">购物指南</a>
                <a href="#">订单操作</a>
            </div>
            <!--5 more-->
        </div>
        <div class="列 联系方式">
            <div class="电话">400-100-5678</div>
            <div class="描述"></div>
            <button>在线客服</button>
        </div>
    </div>
    <div class="行 元信息">
        <div>
            <a>链接</a>
        </div>
        <!--2 more-->
    </div>
</div>

英文类名

<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>
    </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="LOGO">
        </div>
        <div class="col link-group">
            <a href="#">手机</a>
            <a href="#">电脑</a>
            <a href="#">盒子</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
            <a href="#">Item</a>
            <a href="#">Item</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="#">Item Item</a>
            <a href="#">Item Item</a>
            <a href="#">Item Item</a>
            <a href="#">Item Item</a>
        </div>
        <div class="col slider">
            <a href="#">
                <img src="#">
            </a>
        </div>
    </div>
    <div class="row sub-promote">
        <div class="col shortcut-group">
            <div class="row">
                <div class="col shortcut">
                    <img>
                    <div>选购手机</div>
                </div>
                <!--2 more-->
            </div>
            <!--1 more-->
        </div>
        <div class="col product">
            <img>
        </div>
        <!--2 more-->
    </div>
    <div class="row product-star">
        <div class="col product">
            <img>
            <div class="text">
                <div class="title">Mix 2</div>
                <div class="desc">lorem ipsum ...</div>
                <div class="price">￥100</div>
            </div>
        </div>
        <!--4 more-->
    </div>
</div>
<div class="row main">
    <div class="row card-group">
        <div class="row card-group-head">
            <div class="col cat-title">家电</div>
            <div class="col tab-group">
                <div class="tab">热门</div>
                <div class="tab">电视影音</div>
                <div class="tab">Item</div>
                <div class="tab">Item</div>
            </div>
        </div>
        <div class="row card-group-body">
            <div class="col left">
                <img>
            </div>
            <div class="col right">
                <div class="row">
                    <div class="col card">
                        <img>
                        <div class="text">
                            <div class="title">Mix 2</div>
                            <div class="desc">lorem ipsum ...</div>
                            <div class="price">￥100</div>
                        </div>
                    </div>
                    <!--3 more-->
                </div>
                <!--1 more-->
            </div>
        </div>
    </div>
    <!--...-->
</div>
<div class="row footer">
    <div class="row support">
        <div class="col link">
            <img src="#">
            预约维修服务
        </div>
        <!--...-->
    </div>
    <div class="row more">
        <div class="col link-group">
            <div class="col">
                <a href="#">账户管理</a>
                <a href="#">购物指南</a>
                <a href="#">订单操作</a>
            </div>
            <!--5 more-->
        </div>
        <div class="col contact">
            <div class="tel">400-100-5678</div>
            <div class="desc"></div>
            <button>在线客服</button>
        </div>
    </div>
    <div class="row meta">
        <div>
            <a>链接</a>
        </div>
        <!--2 more-->
    </div>
</div>