美文网首页
Web_4 天猫整站布局分析

Web_4 天猫整站布局分析

作者: kerooooo | 来源:发表于2019-12-30 15:50 被阅读0次
image.png

中文类名:

<!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->

<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="#">请登录</a>
            <a href="#">免费注册</a>
        </div>
        <div class="列 链接组 右">
            <a href="#">我的淘宝</a>
            <a href="#">购物车</a>
            <a href="#">收藏夹</a>
            <!-- 4 more -->
        </div>
    </div>
    <div class="行 首屏">
        <div class="行 头">
            <div class="列 LOGO">
                <img src="#" alt="">
                <div class="行 分类头">商品分类</div>
            </div>
            <div class="列 搜索区">
                <div class="行">
                    <input type="text">
                    <button>搜索</button>
                </div>
                <div class="行 链接组">
                    <img src="#" alt="" class="">
                    <img src="#" alt="" class="">
                    <a href="#">天猫会员</a>
                    <!-- 7 more -->
                </div>
            </div>
            <div class="列 小广告">
                <a><img src="#" alt=""></a>
            </div>

        </div>
        <div class="行 主促销">
            <div class="列 类目组">
                <div class="类目"><a>女装/内衣</a></div>
                <!-- 15 more -->
            </div>
            <div class="列 轮播">
                <div class="小广告"></div>
                <div class="小广告"></div>
            </div>
        </div>
    </div>
    <div class="行 主体">
        <div class="行 品牌商品">
            <div class="列 小卡片"><img src="#" alt=""></div>
            <!-- 4 more -->
        </div>
        <div class="行 品牌">
            <div class="行">
                <div class="列 卡片">
                    <img src="#" alt="">
                </div>
                <!-- 9 more -->
            </div>
            <!-- 2 more -->
        </div>
        <div class="行 卡片组 主题区">
            <div class="行 标题">天猫超市</div>
            <div class="行">
                <div class="列 领队"><img src="#" alt=""></div>
                <div class="列 卡片组">
                    <div class="行">
                        <div class="列 小卡片">
                            <div class="行 缩略图"><img src="" alt=""></div>
                            <div class="行 描述">童年记咸干花生500g</div>
                            <div class="行 价格">149元</div>
                        </div>
                        <!-- 4 more -->
                    </div>
                    <!-- 1 more -->
                </div>
            </div>
        </div>
        <!-- 1 more -->
        <div class="行 卡片组 分类区区">
            <div class="行 标题">美丽人生</div>
            <div class="行">
                <div class="列 领队"><img src="#" alt=""></div>
                <div class="列 卡片组">
                    <div class="行">
                        <div class="列 小卡片">
                            <div class="行 缩略图"><img src="" alt=""></div>
                            <div class="行 描述">回力小白鞋</div>
                            <div class="行 价格">¥89</div>
                        </div>
                        <!-- 4 more -->
                    </div>
                    <!-- 1 more -->
                </div>
            </div>
        </div>
        <!-- more -->
    </div>
    <div class="行 页脚">
        <div class="行 售后">
            <div class="列 售后项目"></div>
            <!-- 4 more -->
        </div>
        <div class="行 其他">
            <div class="列 链接组">
                <a href="#">购物指南</a>
                <a href="#">免费注册</a>
                <a href="#">开通支付宝</a>
                <a href="#">支付宝充值</a>
            </div>
            <!-- 3 more -->
            <div class="列">
                <div class="行 标题">手机天猫</div>
                <div class="行 二维码"><img src="#" alt=""></div>
            </div>
        </div>
        <div class="行 元信息">
            <div class="行"></div>
            <!--2 more -->
        </div>
    </div>
</body>

</html>

相关文章

网友评论

      本文标题:Web_4 天猫整站布局分析

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