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

中文类名

<div class="行 导航 全局">
    <div class="列 链接组 左">
        <a>喵，欢迎来天猫</a>
        <a>请登录</a>
        <a>免费注册</a>
    </div>
    <div class="列 链接组 右">
        <a>我的淘宝</a>
        <a>购物车0件</a>
        <a>Item</a>
        <!--5 more-->
    </div>
</div>
<div class="行 首屏">
    <div class="行 头">
        <div class="列 LOGO">
            <img>
            <div class="行 分类头">商品分类</div>
        </div>
        <div class="列 搜索区">
            <div class="行 搜索">
                <div class="行">
                    <input type="text">
                    <button>搜索</button>
                </div>
                <div class="行 搜索建议">
                    <a>手机</a>
                    <a>运动鞋</a>
                    <a>牛奶</a>
                    <!--x more-->
                </div>
            </div>
            <div class="行 导航 页面">
                <a>苏宁易购</a>
                <!--6 more-->
            </div>
        </div>
        <div class="列 小广告">
            <a>
                <img>
            </a>
        </div>
    </div>
    <div class="行 主促销">
        <div class="列 类目组">
            <div class="类目">
                <a>女装</a> / <a>内衣</a>
            </div>
            <!--x more-->
        </div>
        <div class="列 轮播">
            <div class="小广告"></div>
            <div class="小广告"></div>
        </div>
    </div>
</div>
<div class="行 主体">
    <div class="行 品牌商品">
        <div class="列 卡片">
            <div class="标题">品牌闪购BRAND SALE 更多</div>
            <div class="缩略图">
                <img>
            </div>
        </div>
        <!--2 more-->
    </div>
    <div class="行 品牌">
        <div class="行">
            <div class="列 卡片">
                <img>
            </div>
            <!--9 more-->
        </div>
        <!--2 more-->
    </div>
    <div class="行 卡片组 主题区">
        <div class="行">
            <div class="列 标题"></div>
            <div class="列 链接组">
                <a>进口食品</a>
                <a>食品饮料</a>
                <!--4 more-->
            </div>
        </div>
        <div class="行">
            <div class="列 领队">
                <img>
            </div>
            <div class="列">
                <div class="行">
                    <div class="列">
                        <div class="行 按钮组">
                            <div class="列">今日疯抢</div>
                            <div class="列">量贩装</div>
                        </div>
                        <div class="行 缩略图">
                            <img>
                        </div>
                    </div>
                    <div class="列">
                        <div class="缩略图"></div>
                        <div class="文字"></div>
                    </div>
                    <!--1 more-->
                </div>
                <!--1 more-->
            </div>
        </div>
    </div>
    <!--1 more-->
    <div class="行 卡片组 分类区">
        <div class="行">
            <div class="列 标题"></div>
            <div class="列 链接组"></div>
        </div>
        <div class="行">
            <div class="列 领队"></div>
            <div class="列"></div>
        </div>
    </div>
    <!--5 more-->
</div>
<div class="行 页脚">
    <div class="行 售后">
        <div class="列 售后项目">
            <a><img></a>
        </div>
        <!--3 more-->
    </div>
    <div class="行 其他">
        <div class="列">
            <div class="标题"></div>
            <a>免费注册</a>
            <a>开通支付宝</a>
            <a>支付宝充值</a>
        </div>
        <!--4 more-->
        <div class="列">
            <img>
        </div>
    </div>
    <div class="行 元信息">
        <div class="行">
            <a>关于天猫</a>
            <!--x more-->
        </div>
        <!--4 more-->
    </div>
</div>

英文类名

<div class="row nav global">
    <div class="col link-group left">
        <a>喵，欢迎来天猫</a>
        <a>请登录</a>
        <a>免费注册</a>
    </div>
    <div class="col link-group right">
        <a>我的淘宝</a>
        <a>购物车0件</a>
        <a>Item</a>
        <!--5 more-->
    </div>
</div>
<div class="row first-screen">
    <div class="row head">
        <div class="col LOGO">
            <img>
            <div class="row cat-head">商品分类</div>
        </div>
        <div class="col search-area">
            <div class="row search">
                <div class="row">
                    <input type="text">
                    <button>搜索</button>
                </div>
                <div class="row search-rec">
                    <a>手机</a>
                    <a>运动鞋</a>
                    <a>牛奶</a>
                    <!--x more-->
                </div>
            </div>
            <div class="row nav page">
                <a>苏宁易购</a>
                <!--6 more-->
            </div>
        </div>
        <div class="col ad-sm">
            <a>
                <img>
            </a>
        </div>
    </div>
    <div class="row main-promote">
        <div class="col cat-group">
            <div class="cat">
                <a>女装</a> / <a>内衣</a>
            </div>
            <!--x more-->
        </div>
        <div class="col slider">
            <div class="ad-sm"></div>
            <div class="ad-sm"></div>
        </div>
    </div>
</div>
<div class="row main">
    <div class="row brand-product">
        <div class="col card">
            <div class="title">品牌闪购BRAND SALE 更多</div>
            <div class="thumbnail">
                <img>
            </div>
        </div>
        <!--2 more-->
    </div>
    <div class="row brand">
        <div class="row">
            <div class="col card">
                <img>
            </div>
            <!--9 more-->
        </div>
        <!--2 more-->
    </div>
    <div class="row card-group spacial-area">
        <div class="row">
            <div class="col title"></div>
            <div class="col link-group">
                <a>进口食品</a>
                <a>食品饮料</a>
                <!--4 more-->
            </div>
        </div>
        <div class="row">
            <div class="col leader">
                <img>
            </div>
            <div class="col">
                <div class="row">
                    <div class="col">
                        <div class="row button-group">
                            <div class="col">今日疯抢</div>
                            <div class="col">量贩装</div>
                        </div>
                        <div class="row thumbnail">
                            <img>
                        </div>
                    </div>
                    <div class="col">
                        <div class="thumbnail"></div>
                        <div class="text"></div>
                    </div>
                    <!--1 more-->
                </div>
                <!--1 more-->
            </div>
        </div>
    </div>
    <!--1 more-->
    <div class="row card-group cat-area">
        <div class="row">
            <div class="col title"></div>
            <div class="col link-group"></div>
        </div>
        <div class="row">
            <div class="col leader"></div>
            <div class="col"></div>
        </div>
    </div>
    <!--5 more-->
</div>
<div class="row footer">
    <div class="row support">
        <div class="col support-item">
            <a><img></a>
        </div>
        <!--3 more-->
    </div>
    <div class="row others">
        <div class="col">
            <div class="title"></div>
            <a>免费注册</a>
            <a>开通支付宝</a>
            <a>支付宝充值</a>
        </div>
        <!--4 more-->
        <div class="col">
            <img>
        </div>
    </div>
    <div class="row meta">
        <div class="row">
            <a>关于天猫</a>
            <!--x more-->
        </div>
        <!--4 more-->
    </div>
</div>