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

中文类名

<div class="行 首屏">
    <div class="行 导航">
        <div class="LOGO">
            <img>
            <span class="位置">
                <span class="图标"></span>
                <span class="名称"></span>
            </span>
        </div>
        <div class="链接组">
            <div class="行">
                <span class="图标"></span>
                <a>登录</a>
                <a>注册</a>
            </div>
            <div class="行 导航">
                <a>二手房</a>
                <a>新房</a>
                <a>Item</a>
                <!--x more-->
            </div>
        </div>
    </div>
    <div class="行 居中领队">
        <div class="行 标题">
            <div class="行 大标题">连接每个家的故事</div>
            <div class="行 副标题">北京链家在售新房楼盘 479 个</div>
        </div>
        <div class="行 搜索区">
            <div class="行 搜索类型">
                <span>找二手房</span>
                <span>找新房</span>
                <span>Item</span>
                <!--x more-->
            </div>
            <div class="行 搜索框">
                <input type="text">
                <button>开始找房</button>
            </div>
        </div>
    </div>
    <div class="行 其他信息">
        <a><span class="图标 感叹号"></span>关于仿冒我公司进行不正当竞争行为的郑重声明</a>
        <a><span class="图标 文档"></span>房地产中介诚信服务承诺及保证书</a>
    </div>
</div>
<div class="行 主体">
    <div class="行 服务列表">
        <div class="列">
            <div class="缩略图">
                <img>
            </div>
            <div class="文字">
                <div class="标题">找二手房</div>
                <div class="描述">真实二手房源，链家承诺真实在售所见即真</div>
            </div>
        </div>
        <!--x more-->
    </div>
    <div class="行 APP推广">
        <div class="行">一恋倾城</div>
        <div class="行">为你为家</div>
        <div class="行">集二手、新房、租房功能于一体，随时随地任性找房。IM匿名咨询让您放心，消息动态推送让您省心，服务承诺让您安心，数据百科锦囊让您感受贴心漫漫找房路，我们努力为您想更多。</div>
        <div class="行">
            <div class="列">
                <button>IPhone</button>
                <button>Android</button>
            </div>
            <div class="列">
                <img>
            </div>
        </div>
    </div>
    <div class="行 卡片组">
        <div class="头">
            <div class="列 左">
                <div class="大标题"></div>
                <div class="副标题"></div>
            </div>
            <div class="列 右">
                <a>更多北京二手房</a>
            </div>
        </div>
        <div class="体">
            <div class="列">
                <div class="行 卡片">
                    <div class="行 图片">
                        <img>
                    </div>
                    <div class="行 详情">
                        <div class="行 标题">
                            隆曦园A区 3室2厅 390万
                        </div>
                        <div class="行 描述">
                            隆曦园A区 3室2厅
                        </div>
                    </div>
                </div>
                <div class="行 补充信息">xxxxxx</div>
            </div>
            <!--3 more-->
        </div>
    </div>
    <div class="行 卡片组 灰背景">
        <div class="列 卡片">
            <div class="行 图片">
                <img>
            </div>
            <div class="行 详情">
                <div class="行 标题">
                    隆曦园A区 3室2厅 390万
                </div>
                <div class="行 描述">
                    隆曦园A区 3室2厅
                </div>
            </div>
        </div>
    </div>
    <div class="行">
        <div class="列 口号">
            <div class="标题">链家真房源</div>
            <div class="副标题">不是嘴上说说就可以</div>
        </div>
        <div class="列 防伪工具">
            <div class="描述">
                真实存在，真实在售，真实价格，真实图片！<br>
                链家郑重向用户承诺：真实房源，假一赔百元！
            </div>
            <input>
            <span class="图标 放大镜"></span>
        </div>
    </div>
</div>
<div class="行 页脚">
    <div class="行">
        <a>了解链家</a>
        <a>Item</a>
        <!--x more-->
    </div>
    <!--x more-->
</div>

英文类名

<div class="row first-screen">
    <div class="row nav">
        <div class="logo">
            <img>
            <span class="location">
                <span class="icon"></span>
                <span class="name"></span>
            </span>
        </div>
        <div class="link-group">
            <div class="row">
                <span class="icon"></span>
                <a>登录</a>
                <a>注册</a>
            </div>
            <div class="row nav">
                <a>二手房</a>
                <a>新房</a>
                <a>Item</a>
                <!--x more-->
            </div>
        </div>
    </div>
    <div class="row leader-center">
        <div class="row title">
            <div class="row main-title">连接每个家的故事</div>
            <div class="row sub-title">北京链家在售新房楼盘 479 个</div>
        </div>
        <div class="row search-area">
            <div class="row search-type">
                <span>找二手房</span>
                <span>找新房</span>
                <span>Item</span>
                <!--x more-->
            </div>
            <div class="row search-box">
                <input type="text">
                <button>开始找房</button>
            </div>
        </div>
    </div>
    <div class="row others">
        <a><span class="icon exc"></span>关于仿冒我公司进row不正当竞争row为的郑重声明</a>
        <a><span class="icon doc"></span>房地产中介诚信服务承诺及保证书</a>
    </div>
</div>
<div class="row main">
    <div class="row service-list">
        <div class="col">
            <div class="thumbnail">
                <img>
            </div>
            <div class="text">
                <div class="title">找二手房</div>
                <div class="desc">真实二手房源，链家承诺真实在售所见即真</div>
            </div>
        </div>
        <!--x more-->
    </div>
    <div class="row app-promote">
        <div class="row">一恋倾城</div>
        <div class="row">为你为家</div>
        <div class="row">集二手、新房、租房功能于一体，随时随地任性找房。IM匿名咨询让您放心，消息动态推送让您省心，服务承诺让您安心，数据百科锦囊让您感受贴心漫漫找房路，我们努力为您想更多。</div>
        <div class="row">
            <div class="col">
                <button>IPhone</button>
                <button>Android</button>
            </div>
            <div class="col">
                <img>
            </div>
        </div>
    </div>
    <div class="row card-group">
        <div class="head">
            <div class="col left">
                <div class="main-title"></div>
                <div class="sub-title"></div>
            </div>
            <div class="col right">
                <a>更多北京二手房</a>
            </div>
        </div>
        <div class="body">
            <div class="col">
                <div class="row card">
                    <div class="row thumbnail">
                        <img>
                    </div>
                    <div class="row detail">
                        <div class="row title">
                            隆曦园A区 3室2厅 390万
                        </div>
                        <div class="row desc">
                            隆曦园A区 3室2厅
                        </div>
                    </div>
                </div>
                <div class="row extra">xxxxxx</div>
            </div>
            <!--3 more-->
        </div>
    </div>
    <div class="row card-group bg-gray">
        <div class="col card">
            <div class="row thumbnail">
                <img>
            </div>
            <div class="row detail">
                <div class="row title">
                    隆曦园A区 3室2厅 390万
                </div>
                <div class="row desc">
                    隆曦园A区 3室2厅
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col slogan">
            <div class="title">链家真房源</div>
            <div class="sub-title">不是嘴上说说就可以</div>
        </div>
        <div class="col anti-fake">
            <div class="描述">
                真实存在，真实在售，真实价格，真实图片！<br>
                链家郑重向用户承诺：真实房源，假一赔百元！
            </div>
            <input>
            <span class="icon len"></span>
        </div>
    </div>
</div>
<div class="row footer">
    <div class="row">
        <a>了解链家</a>
        <a>Item</a>
        <!--x more-->
    </div>
    <!--x more-->
</div>