1. 首页
  2. 文章中心
  3. 淘宝首页布局（三）

HTML+CSS简单的淘宝首页框架布局小练（三）

71 阅读 0 评论
我是靠谱客的博主 长情火，最近开发中收集的这篇文章主要介绍HTML+CSS简单的淘宝首页框架布局小练（三），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

  • 接着完善淘宝的首页框架（嘿嘿，小傻猫日常）
    具体代码见下
HTML

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<link href="../CSS/二级导航3.css" rel="stylesheet" type="text/css">-->
    <!--<title>Title</title>-->
<!--</head>-->
<!--<body>-->


<!--<div class="index">-->
    <!--<div class="header">-->

        <!--<nav class="header_1">-->
            <!--<ul>-->
                <!--<li><a href="#">中国大陆</a>-->
                    <!--<ul  style="width:180px; height:320px;overflow:scroll"  >-->
                        <!--<li><a href="#">全球</a></li>-->
                        <!--<li><a href="#">中国大陆</a></li>-->
                        <!--<li><a href="#">香港</a></li>-->
                        <!--<li><a href="#">台湾</a></li>-->
                        <!--<li><a href="#">澳门</a></li>-->
                        <!--<li><a href="#">韩国</a></li>-->
                        <!--<li><a href="#">马来西亚</a></li>-->
                        <!--<li><a href="#">澳大利亚</a></li>-->
                        <!--<li><a href="#">新加坡</a></li>-->
                        <!--<li><a href="#">新西兰</a></li>-->
                        <!--<li><a href="#">加拿大</a></li>-->
                        <!--<li><a href="#">美国</a></li>-->
                        <!--<li><a href="#">日本</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <!--<li><a href="#">亲，请登录</a></li>-->
                <!--<li><a href="#">免费注册</a></li>-->
                <!--<li><a href="#">手机逛淘宝</a></li>-->
            <!--</ul>-->
        <!--</nav>-->


        <!--<div class="header_2">-->
            <!--<ul class="header_2_1">-->
                <!--<li class="header_2_1_1">-->
                    <!--<a href="#">我的淘宝</a>-->
                    <!--<ul>-->
                        <!--<li><a href="#">已买到的宝贝</a></li>-->
                        <!--<li><a href="#">我的足迹</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <!--<li class="header_2_1_2">-->
                    <!--<a href="#">购物车</a>-->
                <!--</li>-->
                <!--<li class="header_2_1_3">-->
                    <!--<a href="#">收藏夹</a>-->
                    <!--<ul>-->
                        <!--<li><a href="#">收藏的宝贝</a></li>-->
                        <!--<li><a href="#">收藏的店铺</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <!--<li class="header_2_1_4">-->
                    <!--<a href="#">商品分类</a>-->
                <!--</li>-->
                <!--<li class="header_2_1_5">-->
                    <!--<a href="#">|</a>-->
                <!--</li>-->
                <!--<li class="header_2_1_6">-->
                    <!--<a href="#">千牛卖家中心</a>-->
                    <!--<ul>-->
                        <!--<li><a href="#">免费开店</a></li>-->
                        <!--<li><a href="#">已卖出的宝贝</a></li>-->
                        <!--<li><a href="#">出售中的宝贝</a></li>-->
                        <!--<li><a href="#">卖家服务市场</a></li>-->
                        <!--<li><a href="#">卖家培训中心</a></li>-->
                        <!--<li><a href="#">体检中心</a></li>-->
                        <!--<li><a href="#">问商友</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <!--<li class="header_2_1_7">-->
                    <!--<a href="#">联系客服</a>-->
                    <!--<ul>-->
                        <!--<li><a href="#">消费者客服</a></li>-->
                        <!--<li><a href="#">卖家客服</a></li>-->
                    <!--</ul>-->
                <!--</li>-->

                <!--<li class="header_2_1_8">-->
                    <!--<a href="#">网站导航</a>-->
                    <!--<ul>-->
                        <!--<div class="dh">-->
                            <!--<div class="dh_1">-->
                                <!--<li class="zt" style="width: 70px">主题市场</li>-->
                                <!--<ul>-->
                                    <!--<li><a href="#">女装</a></li>-->
                                    <!--<li><a href="#">箱包</a></li>-->
                                    <!--<li><a href="#">手机</a></li>-->
                                    <!--<li><a href="#">手表</a></li>-->
                                    <!--<li><a href="#">游戏</a></li>-->
                                    <!--<li><a href="#">鲜花</a></li>-->
                                    <!--<li><a href="#">装修</a></li>-->
                                    <!--<li><a href="#">汽车</a></li>-->
                                    <!--<li><a href="#">教育</a></li>-->
                                <!--</ul>-->
                                <!--<li class="zt_1" style="width: 30px">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">男装</a></li>-->
                                        <!--<li><a href="#">婴童</a></li>-->
                                        <!--<li><a href="#">美妆</a></li>-->
                                        <!--<li><a href="#">运动</a></li>-->
                                        <!--<li><a href="#">动漫</a></li>-->
                                        <!--<li><a href="#">宠物</a></li>-->
                                        <!--<li><a href="#">建材</a></li>-->
                                        <!--<li><a href="#">二手车</a></li>-->
                                        <!--<li><a href="#">卡券</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_2" style="width: 30px">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">内衣</a></li>-->
                                        <!--<li><a href="#">家电</a></li>-->
                                        <!--<li><a href="#">珠宝</a></li>-->
                                        <!--<li><a href="#">户外</a></li>-->
                                        <!--<li><a href="#">影视</a></li>-->
                                        <!--<li><a href="#">农资</a></li>-->
                                        <!--<li><a href="#">家具</a></li>-->
                                        <!--<li><a href="#">办公</a></li>-->
                                        <!--<li><a href="#">本地</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_3" style="width: 30px">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">鞋靴</a></li>-->
                                        <!--<li><a href="#">数码</a></li>-->
                                        <!--<li><a href="#">眼镜</a></li>-->
                                        <!--<li><a href="#">乐器</a></li>-->
                                        <!--<li><a href="#">美食</a></li>-->
                                        <!--<li><a href="#">房产</a></li>-->
                                        <!--<li><a href="#">百货</a></li>-->
                                        <!--<li><a href="#">定制</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                            <!--</div>-->
                            <!--<div class="dh_2">-->
                                <!--<li class="zt_4">特色市场-->
                                    <!--<ul >-->
                                        <!--<li><a href="#">爱逛街</a></li>-->
                                        <!--<li><a href="#">腔调</a></li>-->
                                        <!--<li><a href="#">极有家</a></li>-->
                                        <!--<li><a href="#">飞猪</a></li>-->
                                        <!--<li><a href="#">农资</a></li>-->
                                        <!--<li><a href="#">丽人购</a></li>-->
                                        <!--<li><a href="#">全球精选</a></li>-->
                                        <!--<li><a href="#">量贩团</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_5">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">美妆秀</a></li>-->
                                        <!--<li><a href="#">淘女郎</a></li>-->
                                        <!--<li><a href="#">阿里拍卖</a></li>-->
                                        <!--<li><a href="#">亲宝贝</a></li>-->
                                        <!--<li><a href="#">天天特卖</a></li>-->
                                        <!--<li><a href="#">聚名品</a></li>-->
                                        <!--<li><a href="#">非常大牌</a></li>-->
                                        <!--<li><a href="#">阿里翻译</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_6">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">全球购</a></li>-->
                                        <!--<li><a href="#">星店</a></li>-->
                                        <!--<li><a href="#">淘宝众筹</a></li>-->
                                        <!--<li><a href="#">咸鱼</a></li>-->
                                        <!--<li><a href="#">Outlets</a></li>-->
                                        <!--<li><a href="#">淘抢购</a></li>-->
                                        <!--<li><a href="#">试用</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                            <!--</div>-->
                            <!--<div class="dh_3">-->
                                <!--<li class="zt_7">阿里APP-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">淘宝</a></li>-->
                                        <!--<li><a href="#">聚划算</a></li>-->
                                        <!--<li><a href="#">旺信</a></li>-->
                                        <!--<li><a href="#">钉钉</a></li>-->
                                        <!--<li><a href="#">虾米音乐</a></li>-->
                                        <!--<li><a href="#">爱逛街</a></li>-->
                                        <!--<li><a href="#">网商银行</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_8">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">天猫</a></li>-->
                                        <!--<li><a href="#">飞猪</a></li>-->
                                        <!--<li><a href="#">闲鱼</a></li>-->
                                        <!--<li><a href="#">高德地图</a></li>-->
                                        <!--<li><a href="#">淘票票</a></li>-->
                                        <!--<li><a href="#">拍卖会</a></li>-->
                                        <!--<li><a href="#">阿里邮箱</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_9">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">支付宝</a></li>-->
                                        <!--<li><a href="#">蚂蚁聚宝</a></li>-->
                                        <!--<li><a href="#">阿里钱盾</a></li>-->
                                        <!--<li><a href="#">点点虫</a></li>-->
                                        <!--<li><a href="#">菜鸟裹裹</a></li>-->
                                        <!--<li><a href="#">阿里云</a></li>-->
                                        <!--<li><a href="#">阿里众包</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                            <!--</div>-->
                            <!--<div class="dh_4">-->
                                <!--<li class="zt_10">精彩推荐类-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">余额宝</a></li>-->
                                        <!--<li><a href="#">淘公仔</a></li>-->
                                        <!--<li><a href="#">淘宝香港</a></li>-->
                                        <!--<li><a href="#">淘宝全球</a></li>-->
                                        <!--<li><a href="#">闺蜜淘货</a></li>-->
                                        <!--<li><a href="#">淘工作</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_11">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">大牌捡宝</a></li>-->
                                        <!--<li><a href="#">浏览器</a></li>-->
                                        <!--<li><a href="#">淘宝台湾</a></li>-->
                                        <!--<li><a href="#">淘宝东南亚</a></li>-->
                                        <!--<li><a href="#">大众评审</a></li>-->
                                        <!--<li><a href="#">阿里巴巴认证</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</ul>-->
                <!--</li>-->
            <!--</ul>-->

        <!--</div>-->
    <!--</div>-->
<!--</div>-->




<!--</body>-->
<!--</html>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV框架首页</title>
    <link href="../CSS/二级导航3.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="index">
    <div class="header">

        <nav class="header_1">
            <ul>
                <li><a href="#">中国大陆</a>
                    <ul  style="width:180px; height:320px;overflow:scroll"  >
                        <li><a href="#">全球</a></li>
                        <li><a href="#">中国大陆</a></li>
                        <li><a href="#">香港</a></li>
                        <li><a href="#">台湾</a></li>
                        <li><a href="#">澳门</a></li>
                        <li><a href="#">韩国</a></li>
                        <li><a href="#">马来西亚</a></li>
                        <li><a href="#">澳大利亚</a></li>
                        <li><a href="#">新加坡</a></li>
                        <li><a href="#">新西兰</a></li>
                        <li><a href="#">加拿大</a></li>
                        <li><a href="#">美国</a></li>
                        <li><a href="#">日本</a></li>
                    </ul>
                </li>
                <li><a href="#">亲，请登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">手机逛淘宝</a></li>
            </ul>
        </nav>


        <div class="header_2">
            <ul class="header_2_1">
                <li class="header_2_1_1">
                    <a href="#">我的淘宝</a>
                    <ul>
                        <li><a href="#">已买到的宝贝</a></li>
                        <li><a href="#">我的足迹</a></li>
                    </ul>
                </li>
                <li class="header_2_1_2">
                    <a href="#">购物车</a>
                </li>
                <li class="header_2_1_3">
                    <a href="#">收藏夹</a>
                    <ul>
                        <li><a href="#">收藏的宝贝</a></li>
                        <li><a href="#">收藏的店铺</a></li>
                    </ul>
                </li>
                <li class="header_2_1_4">
                    <a href="#">商品分类</a>
                </li>
                <li class="header_2_1_5">
                    <a href="#">|</a>
                </li>
                <li class="header_2_1_6">
                    <a href="#">千牛卖家中心</a>
                    <ul>
                        <li><a href="#">免费开店</a></li>
                        <li><a href="#">已卖出的宝贝</a></li>
                        <li><a href="#">出售中的宝贝</a></li>
                        <li><a href="#">卖家服务市场</a></li>
                        <li><a href="#">卖家培训中心</a></li>
                        <li><a href="#">体检中心</a></li>
                        <li><a href="#">问商友</a></li>
                    </ul>
                </li>
                <li class="header_2_1_7">
                    <a href="#">联系客服</a>
                    <ul>
                        <li><a href="#">消费者客服</a></li>
                        <li><a href="#">卖家客服</a></li>
                    </ul>
                </li>

                <li class="header_2_1_8">
                    <a href="#">网站导航</a>
                    <ul>
                        <div class="dh">
                            <div class="dh_1">
                                <li class="zt" style="width: 70px">主题市场</li>
                                <ul>
                                    <li><a href="#">女装</a></li>
                                    <li><a href="#">箱包</a></li>
                                    <li><a href="#">手机</a></li>
                                    <li><a href="#">手表</a></li>
                                    <li><a href="#">游戏</a></li>
                                    <li><a href="#">鲜花</a></li>
                                    <li><a href="#">装修</a></li>
                                    <li><a href="#">汽车</a></li>
                                    <li><a href="#">教育</a></li>
                                </ul>
                                <li class="zt_1" style="width: 30px">
                                    <ul>
                                        <li><a href="#">男装</a></li>
                                        <li><a href="#">婴童</a></li>
                                        <li><a href="#">美妆</a></li>
                                        <li><a href="#">运动</a></li>
                                        <li><a href="#">动漫</a></li>
                                        <li><a href="#">宠物</a></li>
                                        <li><a href="#">建材</a></li>
                                        <li><a href="#">二手车</a></li>
                                        <li><a href="#">卡券</a></li>
                                    </ul>
                                </li>
                                <li class="zt_2" style="width: 30px">
                                    <ul>
                                        <li><a href="#">内衣</a></li>
                                        <li><a href="#">家电</a></li>
                                        <li><a href="#">珠宝</a></li>
                                        <li><a href="#">户外</a></li>
                                        <li><a href="#">影视</a></li>
                                        <li><a href="#">农资</a></li>
                                        <li><a href="#">家具</a></li>
                                        <li><a href="#">办公</a></li>
                                        <li><a href="#">本地</a></li>
                                    </ul>
                                </li>
                                <li class="zt_3" style="width: 30px">
                                    <ul>
                                        <li><a href="#">鞋靴</a></li>
                                        <li><a href="#">数码</a></li>
                                        <li><a href="#">眼镜</a></li>
                                        <li><a href="#">乐器</a></li>
                                        <li><a href="#">美食</a></li>
                                        <li><a href="#">房产</a></li>
                                        <li><a href="#">百货</a></li>
                                        <li><a href="#">定制</a></li>
                                    </ul>
                                </li>
                            </div>
                            <div class="dh_2">
                                <li class="zt_4">特色市场
                                    <ul >
                                        <li><a href="#">爱逛街</a></li>
                                        <li><a href="#">腔调</a></li>
                                        <li><a href="#">极有家</a></li>
                                        <li><a href="#">飞猪</a></li>
                                        <li><a href="#">农资</a></li>
                                        <li><a href="#">丽人购</a></li>
                                        <li><a href="#">全球精选</a></li>
                                        <li><a href="#">量贩团</a></li>
                                    </ul>
                                </li>
                                <li class="zt_5">
                                    <ul>
                                        <li><a href="#">美妆秀</a></li>
                                        <li><a href="#">淘女郎</a></li>
                                        <li><a href="#">阿里拍卖</a></li>
                                        <li><a href="#">亲宝贝</a></li>
                                        <li><a href="#">天天特卖</a></li>
                                        <li><a href="#">聚名品</a></li>
                                        <li><a href="#">非常大牌</a></li>
                                        <li><a href="#">阿里翻译</a></li>
                                    </ul>
                                </li>
                                <li class="zt_6">
                                    <ul>
                                        <li><a href="#">全球购</a></li>
                                        <li><a href="#">星店</a></li>
                                        <li><a href="#">淘宝众筹</a></li>
                                        <li><a href="#">咸鱼</a></li>
                                        <li><a href="#">Outlets</a></li>
                                        <li><a href="#">淘抢购</a></li>
                                        <li><a href="#">试用</a></li>
                                    </ul>
                                </li>
                            </div>
                            <div class="dh_3">
                                <li class="zt_7">阿里APP
                                    <ul>
                                        <li><a href="#">淘宝</a></li>
                                        <li><a href="#">聚划算</a></li>
                                        <li><a href="#">旺信</a></li>
                                        <li><a href="#">钉钉</a></li>
                                        <li><a href="#">虾米音乐</a></li>
                                        <li><a href="#">爱逛街</a></li>
                                        <li><a href="#">网商银行</a></li>
                                    </ul>
                                </li>
                                <li class="zt_8">
                                    <ul>
                                        <li><a href="#">天猫</a></li>
                                        <li><a href="#">飞猪</a></li>
                                        <li><a href="#">闲鱼</a></li>
                                        <li><a href="#">高德地图</a></li>
                                        <li><a href="#">淘票票</a></li>
                                        <li><a href="#">拍卖会</a></li>
                                        <li><a href="#">阿里邮箱</a></li>
                                    </ul>
                                </li>
                                <li class="zt_9">
                                    <ul>
                                        <li><a href="#">支付宝</a></li>
                                        <li><a href="#">蚂蚁聚宝</a></li>
                                        <li><a href="#">阿里钱盾</a></li>
                                        <li><a href="#">点点虫</a></li>
                                        <li><a href="#">菜鸟裹裹</a></li>
                                        <li><a href="#">阿里云</a></li>
                                        <li><a href="#">阿里众包</a></li>
                                    </ul>
                                </li>
                            </div>
                            <div class="dh_4">
                                <li class="zt_10">精彩推荐类
                                    <ul>
                                        <li><a href="#">余额宝</a></li>
                                        <li><a href="#">淘公仔</a></li>
                                        <li><a href="#">淘宝香港</a></li>
                                        <li><a href="#">淘宝全球</a></li>
                                        <li><a href="#">闺蜜淘货</a></li>
                                        <li><a href="#">淘工作</a></li>
                                    </ul>
                                </li>
                                <li class="zt_11">
                                    <ul>
                                        <li><a href="#">大牌捡宝</a></li>
                                        <li><a href="#">浏览器</a></li>
                                        <li><a href="#">淘宝台湾</a></li>
                                        <li><a href="#">淘宝东南亚</a></li>
                                        <li><a href="#">大众评审</a></li>
                                        <li><a href="#">阿里巴巴认证</a></li>
                                    </ul>
                                </li>
                            </div>
                        </div>
                    </ul>
                </li>
            </ul>

        </div>
    </div>
</div>





<div class="nav">
    <div class="nav_1">
        <div class="logo">logo</div>
    </div>
    <div class="nav_2">
        <div class="nav_2_1">一行</div>
        <div class="nav_2_2">二行</div>
        <div class="nav_2_3">三行</div>

    </div>
</div>




<div class="focus_01">
    <div class="focus_01_1">
        <div class="focus_01_1_1">主题市场</div>

        <div class="focus_01_1_2">
            <ul>
                <li><a href="#">天猫</a></li>
                <li><a href="#">聚划算</a></li>
                <li><a href="#">天猫超市</a></li>
            </ul>
        </div>

        <div class="focus_01_1_3">
            <ul>
                <li class="focus_01_1_3_1">
                    <a href="#">|</a>
                </li>
                <li class="focus_01_1_3_2">
                    <a href="#"> 淘抢购</a>
                </li>
                <li class="focus_01_1_3_3">
                    <a href="#">电器城</a>
                </li>
                <li class="focus_01_1_3_4">
                    <a href="#">司法拍卖</a>
                </li>
                <li class="focus_01_1_3_5">
                    <a href="#">淘宝心选</a>
                </li>
                <li class="focus_01_1_3_6">
                    <a href="#">兴农扶贫</a>
                </li>
            </ul>
        </div>
        <div class="focus_01_1_4">
            <ul>
                <li class="focus_01_1_4_1">
                    <a href="#">|</a>
                </li>
                <li class="focus_01_1_4_2">
                    <a href="#">飞猪旅行</a>
                </li>
                <li class="focus_01_1_4_3">
                    <a href="#">智能生活</a>
                </li>
                <li class=focus_01_1_4_4">
                    <a href="#">苏宁易购</a>
                </li>
            </ul>
        </div>
    </div>
</div>











<div class="focus">
    <div class="focus_1">

        <div class="focus_1_1">
            <div class="focus_1_1_1">
                <ul>
                    <li>
                        <a href="#">女装/</a>
                        <a href="#">男装 /</a>
                        <a href="#">内衣 </a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_2">
                <ul>
                    <li>
                        <a href="#">鞋靴  /</a>
                        <a href="#">箱包  /</a>
                        <a href="#">配件</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_3">
                <ul>
                    <li>
                        <div class="focus_1_1_3_1"><a href="#">童装玩具/</a></div>
                        <div class="focus_1_1_3_2"><a href="#">孕产/</a></div>
                        <div class="focus_1_1_3_3"><a href="#">用品</a></div>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_4">
                <ul>
                    <li>
                        <a href="#">家电  /</a>
                        <a href="#">数码  /</a>
                        <a href="#">手机</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_5">
                <ul>
                    <li>
                        <div class="focus_1_1_5_1"><a href="#">美妆  /</a></div>
                        <div class="focus_1_1_5_2"><a href="#">洗护  /</a></div>
                        <div class="focus_1_1_5_3"><a href="#">保健品</a></div>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_6">
                <ul>
                    <li>
                        <a href="#">珠宝  /</a>
                        <a href="#">眼镜  /</a>
                        <a href="#">手表</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_7">
                <ul>
                    <li>
                        <a href="#">运动  /</a>
                        <a href="#">户外  /</a>
                        <a href="#">乐器</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_8">
                <ul>
                    <li>
                        <a href="#">游戏  /</a>
                        <a href="#">动漫  /</a>
                        <a href="#">影视</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_9">
                <ul>
                    <li>
                        <a href="#">美食  /</a>
                        <a href="#">生鲜  /</a>
                        <a href="#">零食</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_10">
                <ul>
                    <li>
                        <a href="#">鲜花  /</a>
                        <a href="#">宠物  /</a>
                        <a href="#">农资</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_11">
                <ul>
                    <li>
                        <a href="#">工具  /</a>
                        <a href="#">装修  /</a>
                        <a href="#">建材</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_12">
                <ul>
                    <li>
                        <a href="#">家具  /</a>
                        <a href="#">家饰  /</a>
                        <a href="#">家纺</a>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_13">
                <ul>
                    <li>
                        <div class="focus_1_1_13_1"><a href="#">汽车  /</a></div>
                        <div class="focus_1_1_13_2"><a href="#">二手车 /</a></div>
                        <div class="focus_1_1_13_3"><a href="#">用品</a></div>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_14">
                <ul>
                    <li>
                        <div class="focus_1_1_14_1"><a href="#">用品 /</a></div>
                        <div class="focus_1_1_14_2"><a href="#">DIY  /</a></div>
                        <div class="focus_1_1_14_3"><a href="#">五金电子</a></div>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_15">
                <ul>
                    <li>
                        <div class="focus_1_1_15_1"><a href="#">百货  /</a></div>
                        <div class="focus_1_1_15_2"><a href="#">餐厨  /</a></div>
                        <div class="focus_1_1_15_3"><a href="#">家庭保健</a></div>
                    </li>
                </ul>
            </div>
            <div class="focus_1_1_16">
                <ul>
                    <li>
                        <div class="focus_1_1_16_1"><a href="#">学习  /</a></div>
                        <div class="focus_1_1_16_2"><a href="#">卡劵  /</a></div>
                        <div class="focus_1_1_16_3"><a href="#">本地服务</a></div>
                    </li>
                </ul>
            </div>

        </div>





        <div class="focus_1_2">广告</div>
        <div class="news">淘宝头条</div>
    </div>

    <div class="focus_2">账户</div>
</div>
<div class="content">
    <div class="column_1">
        <div class="column_1_1">
            <p>有好货</p>
            <div class="column_1_1_1"></div>
            <div class="column_1_1_2"></div>
            <div class="column_1_1_3"></div>
            <div class="column_1_1_4"></div>
            <div class="column_1_1_5"></div>
            <div class="column_1_1_6"></div>
        </div>
        <div class="column_1_2">
            <p>爱逛街</p>
            <div class="column_1_2_1"></div>
            <div class="column_1_2_2"></div>
            <div class="column_1_2_3"></div>
            <div class="column_1_2_4"></div>
            <div class="column_1_2_5"></div>
            <div class="column_1_2_6"></div>
        </div>
    </div>

    <div class="column_2">
        <div class="column_2_1">
            <P>淘抢购</P>
            <div class="column_2_1_1"></div>
            <div class="column_2_1_2"></div>
            <div class="column_2_1_3"></div>
        </div>
        <div class="column_2_2">广告</div>
    </div>


    <div class="column_3">
        <div class="column_3_1">
            <p>每日好店</p>
            <div class="column_3_1_1"></div>
            <div class="column_3_1_2"></div>
            <div class="column_3_1_3"></div>
            <div class="column_3_1_4"></div>
        </div>
        <div class="column_3_2">
            <p>淘宝直播</p>
            <div class="column_3_2_1"></div>
            <div class="column_3_2_2"></div>
            <div class="column_3_2_3"></div>
            <div class="column_3_2_4"></div>
        </div>
    </div>
</div>
<div class="content1">
    <div class="column_4">
        <div class="column_4_1">
            <p>时尚爆料王</p>
            <div class="column_4_1_1"></div>
            <div class="column_4_1_2"></div>
            <div class="column_4_1_3"></div>
        </div>
        <div class="column_4_2">今新品</div>
    </div>
    <div class="column_5">
        <div class="column_5_1">
            <p>品质生活</p>
            <div class="column_55_1">
                <div class="column_5_1_1">一</div>
                <div class="column_5_1_2">二</div>
                <div class="column_5_1_3">三</div>
                <div class="column_5_1_4">四</div>
            </div>
            <div class="column_55_2">
                <div class="column_5_1_5">五</div>
                <div class="column_5_1_6">六</div>
                <div class="column_5_1_7">七</div>
            </div>

        </div>
        <div class="column_5_2">
            <p>特色玩味控</p>

            <div class="column_55_1">
                <div class="column_5_1_1">一</div>
                <div class="column_5_1_2">二</div>
                <div class="column_5_1_3">三</div>
                <div class="column_5_1_4">四</div>
            </div>
            <div class="column_55_2">
                <div class="column_5_1_5">五</div>
                <div class="column_5_1_6">六</div>
                <div class="column_5_1_7">七</div>
            </div>

        </div>
    </div>
    <div class="column_6">
        <p>实惠专业户</p>
        <div class="column_6_1"></div>
        <div class="column_6_2"></div>
        <div class="column_6_3"></div>
        <div class="column_6_4"></div>
        <div class="column_6_5"></div>
    </div>
    <div class="column_7">
        <p>热卖单品</p>
        <div class="column_7_1"></div>
        <div class="column_7_2"></div>
        <div class="column_7_3"></div>
        <div class="column_7_4"></div>
        <div class="column_7_5"></div>
        <div class="column_7_6"></div>
        <div class="column_7_7"></div>
        <div class="column_7_8"></div>
        <div class="column_7_9"></div>
        <div class="column_7_10"></div>
        <div class="column_7_11"></div>
        <div class="column_7_12"></div>
        <div class="column_7_13"></div>
    </div>
</div>

<div class="content2">
    <div class=" column_22_1">
        <p>猜你喜欢</p>
        <div class="column_22_1_1"></div>
        <div class="column_22_1_2"></div>
        <div class="column_22_1_3"></div>
        <div class="column_22_1_4"></div>
        <div class="column_22_1_5"></div>
        <div class="column_22_1_6"></div>
        <div class="column_22_1_7"></div>
        <div class="column_22_1_8"></div>
        <div class="column_22_1_9"></div>
        <div class="column_22_1_10"></div>
        <div class="column_22_1_11"></div>
        <div class="column_22_1_12"></div>
        <div class="column_22_1_13"></div>
        <div class="column_22_1_14"></div>
        <div class="column_22_1_15"></div>
        <div class="column_22_1_16"></div>
        <div class="column_22_1_17"></div>
        <div class="column_22_1_18"></div>
        <div class="column_22_1_19"></div>
        <div class="column_22_1_20"></div>
        <div class="column_22_1_21"></div>
        <div class="column_22_1_22"></div>
        <div class="column_22_1_23"></div>
        <div class="column_22_1_24"></div>
        <div class="column_22_1_25"></div>
        <div class="column_22_1_26"></div>
    </div>
</div>

<div class="footer">页脚</div>
</div>

</body>
</html>

CSS

/**{/
/margin:0;/
/padding: 0;/
/}/
/body{/
/background-color: azure;/
/}/
/.header{/
/margin: 0 auto;/
/width: 100%;/
/height: 40px;/
/background-color: #fafbff;/
/}*/

/!导航第一大块!/
/.header_1{/
/position: relative;/
/margin-left: 50px;/
/float: left;/
/width: 330px;/
/height: 100%;/
/}/

/.header_1 ul {/
/margin: 0 auto;/
/float: left;/
/width: 100%;/
/height: 100%;/
/}/
/.header_1 ul li{/
/margin-left: 10px;/
/float: left;/
/list-style: none;/
/}/

/!导航标题!/
/.header_1 ul li a:link,.header_1 ul li a:visited{/
/display: block;/
/width: 72px;/
/height: 100%;/
/text-align: center;/
/line-height: 40px;/
/text-decoration: none;/
/font-size: 13px;/
/color: #111111;/
/}/
/.header_1 ul li a:hover,.header_1 ul li a:active{/
/background-color: #E9E9E9;/
/}/
/.header_1 ul li ul{/
/display: none;/
/position: absolute;/
/}/
/.header_1 ul li:hover ul{/
/display: block;/

/}/
/!导航下面的滚动条!/
/.header_1 ul li ul li{/
/float: none;/
/margin-left: 0px;/
/width: 160px;/
/height: 29px;/
/background-color: white;/
/}/
/.header_2{/
/position: relative;/
/margin-right: 45px;/
/float: right;/
/width: 607px;/
/height: 100%;/
/}/
/.header_2 ul{/
/margin: 0 auto;/
/float: left;/
/width: 100%;/
/height: 100%;/
/}/
/.header_2 ul li{/
/float: left;/
/list-style: none;/
/}/
/.header_2 ul li a:link,.header_2 ul li a:visited{/
/display: block;/
/height: 100%;/
/text-align: center;/
/line-height: 40px;/
/text-decoration: none;/
/font-size: 13px;/
/color: #111111;/
/}/
/.header_2 ul li a:hover,.header_2 ul li a:active{/
/background-color:#E9E9E9 ;/
/}/
/.header_2 ul li ul{/
/display: none;/
/position: absolute;/
/}/
/.header_2 ul li:hover ul{/
/display: block;/
/}/
/.header_2 ul li ul li{/
/float: none;/
/width: 100px;/
/height: 29px;/
/background-color:white;/
/}/
/.header_2_1_1{/
/float: left;/
/width:79px;/
/}/
/.header_2_1_2{/
/float: left;/
/width:84px;/
/}/
/.header_2_1_3{/
/float: left;/
/width:84px;/
/}/
/.header_2_1_4{/
/float: left;/
/width:67px;/
/}/
/.header_2_1_5{/
/float: left;/
/width:15px;/
/}/
/.header_2_1_6{/
/float: left;/
/width:103px;/
/}/
/.header_2_1_7{/
/float: left;/
/width:79px;/
/}/
/.header_2_1_8{/
/float: left;/
/width: 96px;/

/}/

/.dh{/
/position: absolute;/
/top: 0;/
/left: -1094px;/
/width: 1190px;/
/height: 290px;/
/background: #FFFFFF;/
/}/
/.dh_1{/
/float: left;/
/width: 292px;/
/height: 290px;/
/}/
/.zt_1{/
/position: absolute;/
/top: 29px;/
/left: 96px;/
/}/
/.zt_2{/
/position: absolute;/
/top: 29px;/
/left: 196px;/
/}/
/.zt_3{/
/position: absolute;/
/top: 29px;/
/left: 282px;/
/}/
/.dh_2{/
/float: left;/
/width: 300px;/
/height: 290px;/
/}/
/.zt_4{/
/position: absolute;/
/top: 8px;/
/left: 385px;/
/}/

/.zt_5{/
/position: absolute;/
/top: 29px;/
/left: 485px;/
/}/
/.zt_6{/
/position: absolute;/
/top: 29px;/
/left: 585px;/
/}/
/.dh_3{/
/float: left;/
/width: 300px;/
/height: 290px;/
/}/
/.zt_7{/
/position: absolute;/
/top: 8px;/
/left: 688px;/
/}/
/.zt_8{/
/position: absolute;/
/top: 29px;/
/left: 785px;/
/}/
/.zt_9{/
/position: absolute;/
/top: 29px;/
/left: 885px;/
/}/

/.dh_4{/
/float: left;/
/width: 290px;/
/height: 400px;/
/}/
/.zt_10{/
/position: absolute;/
/top: 8px;/
/left: 989px;/
/}/
/.zt_11{/
/position: absolute;/
/top: 29px;/
/left: 1089px;/
/}/

*{
margin:0;
padding: 0;
}
body{
background-color: azure;
}
.header{
margin: 0 auto;
width: 100%;
height: 40px;
background-color: #fafbff;
}

/导航第一大块/
.header_1{
position: relative;
margin-left: 50px;
float: left;
width: 330px;
height: 100%;
}

.header_1 ul {
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}
.header_1 ul li{
margin-left: 6px;
float: left;
list-style: none;
}

/导航标题/
.header_1 ul li a:link,.header_1 ul li a:visited{
display: block;
width: 72px;
height: 100%;
text-align: center;
line-height: 40px;
text-decoration: none;
font-size: 13px;
color: #111111;
}
.header_1 ul li a:hover,.header_1 ul li a:active{
background-color: #E9E9E9;
}
.header_1 ul li ul{
display: none;
position: absolute;
}
.header_1 ul li:hover ul{
display: block;

}
/导航下面的滚动条/
.header_1 ul li ul li{
float: none;
margin-left: 0px;
width: 160px;
height: 29px;
background-color: white;
}
.header_2{
position: relative;
margin-right: 45px;
float: right;
width: 607px;
height: 100%;
}
.header_2 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}
.header_2 ul li{
float: left;
list-style: none;
}
.header_2 ul li a:link,.header_2 ul li a:visited{
display: block;
height: 100%;
text-align: center;
line-height: 40px;
text-decoration: none;
font-size: 13px;
color: #111111;
}
.header_2 ul li a:hover,.header_2 ul li a:active{
background-color:#E9E9E9 ;
}
.header_2 ul li ul{
display: none;
position: absolute;
}
.header_2 ul li:hover ul{
display: block;
}

.header_2 ul li ul li{
float: none;
width: 80px;
height: 29px;
background-color:white;
}

.header_2_1_1{
float: left;
width:79px;
}
.header_2_1_2{
float: left;
width:84px;
}
.header_2_1_3{
float: left;
width:84px;
}
.header_2_1_4{
float: left;
width:67px;
}
.header_2_1_5{
float: left;
width:15px;
}
.header_2_1_6{
float: left;
width:103px;
}
.header_2_1_7{
float: left;
width:79px;
}
.header_2_1_8{
float: left;
width: 96px;

}

.dh{
position: absolute;
top: 0;
left: -1072px;
width: 1162px;
height: 310px;
background: #FFFFFF;
}
.dh_1{
float: left;
width: 292px;
height: 290px;
}
.zt_1{
position: absolute;
top: 29px;
left: 96px;
}
.zt_2{
position: absolute;
top: 29px;
left: 196px;
}
.zt_3{
position: absolute;
top: 29px;
left: 282px;
}
.dh_2{
float: left;
width: 300px;
height: 290px;
}
.zt_4{
position: absolute;
top: 8px;
left: 385px;
}

.zt_5{
position: absolute;
top: 29px;
left: 485px;
}
.zt_6{
position: absolute;
top: 29px;
left: 585px;
}
.dh_3{
float: left;
width: 300px;
height: 290px;
}
.zt_7{
position: absolute;
top: 8px;
left: 688px;
}
.zt_8{
position: absolute;
top: 29px;
left: 785px;
}
.zt_9{
position: absolute;
top: 29px;
left: 885px;
}

.dh_4{
float: left;
width: 290px;
height: 400px;
}
.zt_10{
position: absolute;
top: 8px;
left: 989px;
}
.zt_11{
position: absolute;
top: 29px;
left: 1089px;
}

.nav{
margin: 0 auto;
width: 1150px;
height: 100px;
background-color: #333333;
}
.nav_1 {
margin: 0 auto;
float: left;
width: 250px;
height: 100%;
background-color: #d3fff5;
}
.logo{
float: left;
width: 250px;
height: 100%;
background-color: #f0ebff;
}

.nav_2{
margin: 0 auto;
width: 900px;
height: 100%;
background-color: #eadfff;
}
.nav_2_1{
width: 1025px;
height: 34px;
background-color: #ffedff;
}
.nav_2_2{
width: 1025px;
height: 34px;
background-color: #f2dfff;
}
.nav_2_3{
width: 1025px;
height: 34px;
background-color: #fdd8ff;
}
.focus_01{
margin: 0 auto;
width: 1150px;
height: 30px;
}

.focus_01_1{
width: 100%;
height: 30px;
background-color: #f5f8ff;
}
.focus_01_1_1{
float: left;
width: 250px;
height: 100%;
text-align: center;
line-height: 30px;
font-size: 16px;
font-family: 微软雅黑;
color: white;
background-color: #efdcff;
}
.focus_01_1_2{
float: left;
width: 219px;
height: 100%;
background-color: #ebd1ff;
}
.focus_01_1_22 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}
.focus_01_1_2 ul li{
float: left;
list-style: none;
}
.focus_01_1_2 ul li a:link, .focus_01_1_2 ul li a:visited {
display: block;
width: 73px;
height: 100%;
text-align: center;
line-height: 30px;
text-decoration: none;
font-size: 16px;
color: #FFFFFF;
}
.focus_01_1_3{
float: left;
width: 354px;
height: 100%;
background-color: #efdcff;
}
.focus_01_1_3 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}
.focus_01_1_3 ul li{
float: left;
list-style: none;
}
.focus_01_1_3 ul li a:link, .focus_01_1_3 ul li a:visited {
display: block;
height: 100%;
text-align: center;
line-height: 30px;
text-decoration: none;
font-size: 16px;
color: #FFFFFF;
}
.focus_01_1_3_1{
margin-left: 7px;
width: 5px;

}
.focus_01_1_3_2{
margin-left: 7px;
width: 53px;
}
.focus_01_1_3_3{
margin-left: 7px;
width: 53px;
}
.focus_01_1_3_4{
margin-left: 7px;
width: 67px;
}
.focus_01_1_3_5{
margin-left: 7px;
width: 67px;
}
.focus_01_1_3_6{
margin-left: 7px;
width: 67px;
}
.focus_01_1_4{
float: left;
width: 326px;
height: 100%;
background-color: #e6d5ff;
}
.focus_01_1_4 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}
.focus_01_1_4 ul li{
float: left;
list-style: none;
}
.focus_01_1_4 ul li a:link, .focus_01_1_4 ul li a:visited {
display: block;
height: 100%;
text-align: center;
line-height: 30px;
text-decoration: none;
font-size: 16px;
color: #FFFFFF;
}
.focus_01_1_4_1{
margin-left: 7px;
width: 5px;
}
.focus_01_1_4_2{
margin-left: 7px;
width: 110px;
}
.focus_01_1_4_3{
margin-left: 7px;
width: 110px;
}
.focus_01_1_4_4{
margin-left: 7px;
width:110px;
}

.focus {
margin: 0 auto;
width: 1150px;
height: 770px;
background-color: white;
}
.focus_1{
float: left;
margin: 0 auto;
width: 850px;
height: 100%;
background-color: white;
}
.focus_1_1{
margin :0 auto;
float: left;
width: 250px;
height: 500px;
background-color: #fae4f9;
}

.focus_1_1_1,.focus_1_1_2,.focus_1_1_3,.focus_1_1_4,.focus_1_1_5,
.focus_1_1_6,.focus_1_1_7,.focus_1_1_8,.focus_1_1_9,.focus_1_1_10,
.focus_1_1_11,.focus_1_1_12,.focus_1_1_13,.focus_1_1_13,.focus_1_1_14,
.focus_1_1_15,.focus_1_1_16{
width: 100%;
height:30px;
}

.focus_1_1_1 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_1 ul:hover,.focus_1_1_1 ul:active{

background-color: #fafbff;

}
.focus_1_1_1 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_1 ul li a:link,.focus_1_1_1 ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_2 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_2 ul:hover,.focus_1_1_2 ul:active{

background-color:  #fafbff;

}
.focus_1_1_2 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_2 ul li a:link,.focus_1_1_2 ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_3 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_3 ul:hover,.focus_1_1_3 ul:active{

background-color:  #fafbff;

}
.focus_1_1_3 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_3 ul li a:link,.focus_1_1_3 ul li a:visited{
display: block;
float: left;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_3_1{
float: left;
width: 80px;
}
.focus_1_1_3_2,.focus_1_1_3_3{
float: left;
width: 45px;
}
.focus_1_1_4 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_4 ul:hover,.focus_1_1_4 ul:active{

background-color:  #fafbff;

}
.focus_1_1_4 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_4 ul li a:link,.focus_1_1_4 ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_5 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_5 ul:hover,.focus_1_1_5 ul:active{

background-color:  #fafbff;

}
.focus_1_1_5 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_5 ul li a:link,.focus_1_1_5 ul li a:visited{
display: block;
float: left;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_5_1,.focus_1_1_5_2{
float: left;
width: 45px;
}
.focus_1_1_5_3{
float: left;
width: 55px;
}
.focus_1_1_6 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_6 ul:hover,.focus_1_1_6 ul:active{

background-color:  #fafbff;

}
.focus_1_1_6 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_6 ul li a:link,.focus_1_1_6ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_7 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_7 ul:hover,.focus_1_1_7 ul:active{

background-color: #fafbff;

}
.focus_1_1_7 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_7 ul li a:link,.focus_1_1_7 ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_8 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_8 ul:hover,.focus_1_1_8 ul:active{

background-color:  #fafbff;

}
.focus_1_1_8 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_8 ul li a:link,.focus_1_1_8 ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_9 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_9 ul:hover,.focus_1_1_9 ul:active{

background-color:  #fafbff;

}
.focus_1_1_9 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_9 ul li a:link,.focus_1_1_9 ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_10 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_10 ul:hover,.focus_1_1_10 ul:active{

background-color: #fafbff;

}
.focus_1_1_10 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_10 ul li a:link,.focus_1_1_10 ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_11 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_11 ul:hover,.focus_1_1_11 ul:active{

background-color:  #fafbff;

}
.focus_1_1_11 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_11 ul li a:link,.focus_1_1_11 ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_12 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_12 ul:hover,.focus_1_1_12 ul:active{

background-color:  #fafbff;

}
.focus_1_1_12 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_12 ul li a:link,.focus_1_1_12ul li a:visited{
display: block;
float: left;
width: 45px;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_13 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_13 ul:hover,.focus_1_1_13 ul:active{

background-color:  #fafbff;

}
.focus_1_1_13 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_13 ul li a:link,.focus_1_1_13 ul li a:visited{
display: block;
float: left;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_13_1,.focus_1_1_13_3 {
float: left;
width: 45px;
}
.focus_1_1_13_2{
float: left;
width: 60px;
}
.focus_1_1_14 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_14 ul:hover,.focus_1_1_14ul:active{

background-color:  #fafbff;

}
.focus_1_1_14 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_14 ul li a:link,.focus_1_1_14 ul li a:visited{
display: block;
float: left;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_14_1,.focus_1_1_14_2{
float: left;
width: 45px;
}
.focus_1_1_14_3{
float: left;
width: 65px;
}
.focus_1_1_15 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_15 ul:hover,.focus_1_1_15 ul:active{

background-color:  #fafbff;

}
.focus_1_1_15 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_15 ul li a:link,.focus_1_1_15 ul li a:visited{
display: block;
float: left;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_15_1,.focus_1_1_15_2{
float: left;
width: 45px;
}
.focus_1_1_15_3{
float: left;
width: 65px;
}
.focus_1_1_16 ul{
margin: 0 auto;
float: left;
width: 100%;
height: 100%;
}

.focus_1_1_16 ul:hover,.focus_1_1_16 ul:active{

background-color: #fafbff;

}
.focus_1_1_16 ul li{
float: left;
margin-left: 20px;
list-style: none;
}
.focus_1_1_16 ul li a:link,.focus_1_1_16 ul li a:visited{
display: block;
float: left;
height: 100%;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #333333;
}
.focus_1_1_16_1,.focus_1_1_16_2{
float: left;
width: 45px;
}
.focus_1_1_16_3{
float: left;
width: 65px;
}

.focus_1_2{
float: left;
margin-top: 10px;
margin-left: 10px;
width: 580px;
height: 490px;
background-color: #f1dcff;
}
.news {
float: left;
margin-top: 10px;
width: 840px;
height: 260px;
background-color: #f4cbff;
}
.focus_2{
float: left;
margin-top: 10px;
width: 300px;
height: 760px;
background-color: #e8bcfa;
}
.content{
margin: 0 auto;
width: 1150px;
height: 1260px;
background-color: white;
}
.column_1{
margin: 0 auto;
width: 100%;
height: 500px;
}
.column_1_1{
float: left;
margin-top: 10px;
width: 570px;
height: 490px;
background-color: white;
}
.column_1_1_1{
float: left;
margin-left: 20px;
margin-top: 20px;
width: 170px;
height: 170px;
background-color: #f7efff;
}
.column_1_1_2{
float: left;
margin-left: 10px;
margin-top: 20px;
width: 170px;
height: 170px;
background-color: #f6e6ff;
}
.column_1_1_3{
float: left;
margin-left: 10px;
margin-top: 20px;
width: 170px;
height: 170px;
background-color: #fae5ff;
}
.column_1_1_4{
float: left;
margin-top: 55px;
margin-left: 20px;
width: 170px;
height: 170px;
background-color: #f1d8ff;
}
.column_1_1_5{
float: left;
margin-left: 10px;
margin-top: 55px;
width: 170px;
height: 170px;
background-color: #fed3ff;
}
.column_1_1_6{
float: left;
margin-left: 10px;
margin-top: 55px;
width: 170px;
height: 170px;
background-color: #fecfff;
}
.column_1_2{
float: left;
margin-top: 10px;
margin-left: 10px;
width: 570px;
height: 490px;
background-color: white;
}
.column_1_2_1{
float: left;
margin-left: 20px;
margin-top: 20px;
width: 170px;
height: 170px;
background-color: #f7efff;
}
.column_1_2_2{
float: left;
margin-left: 10px;
margin-top: 20px;
width: 170px;
height: 170px;
background-color: #f6e6ff;
}
.column_1_2_3{
float: left;
margin-left: 10px;
margin-top: 20px;
width: 170px;
height: 170px;
background-color: #fae5ff;
}
.column_1_2_4{
float: left;
margin-top: 55px;
margin-left: 20px;
width: 170px;
height: 170px;
background-color: #f1d8ff;
}
.column_1_2_5{
float: left;
margin-left: 10px;
margin-top: 55px;
width: 170px;
height: 170px;
background-color:#fed3ff;
}
.column_1_2_6{
float: left;
margin-left: 10px;
margin-top: 55px;
width: 170px;
height: 170px;
background-color: #fecfff;
}
.column_2{
margin: 0 auto;
width: 100%;
height: 250px;
}
.column_2_1{
margin-top: 10px;
width: 100%;
height: 190px;
background-color:white;
}
.column_2_1_1{
float: left;
width:383px;
height: 169px;
background-color: #f6e6ff;
}
.column_2_1_2{
float: left;
width:383px;
height: 169px;
background-color: #f4dbff;
}
.column_2_1_3{
float: left;
width:383px;
height: 169px;
background-color: #ead8ff;
}
.column_2_2{
float: left;
margin-top: 10px;
width: 1150px;
height: 40px;
background-color: white;
}
.column_3{
margin: 0 auto;
width: 100%;
height: 500px;
background-color: white;
}
.column_3_1{
float: left;
margin-top: 10px;
width: 570px;
height: 490px;
background-color: white;
}
.column_3_1_1{
float: left;
margin-top: 25px;
margin-left: 20px;
width: 260px;
height: 200px;
background-color: #f6edff;
}
.column_3_1_2{
float: left;
margin-top: 25px;
margin-left: 10px;
width: 260px;
height: 200px;
background-color: #fee7ff;
}
.column_3_1_3{
float: left;
margin-top: 30px;
margin-left: 20px;
width: 260px;
height: 200px;
background-color: #f4dfff;
}
.column_3_1_4{
float: left;
margin-top: 30px;
margin-left: 10px;
width: 260px;
height: 200px;
background-color: #ffd4ff;
}
.column_3_2{
float: left;
margin-top: 10px;
width: 570px;
height: 490px;
background-color: white;
}
.column_3_2_1{
float: left;
margin-top: 25px;
margin-left: 20px;
width: 260px;
height: 200px;
background-color: #f6edff;
}
.column_3_2_2{
float: left;
margin-top: 25px;
margin-left: 10px;
width: 260px;
height: 200px;
background-color: #fee7ff;
}
.column_3_2_3{
float: left;
margin-top: 30px;
margin-left: 20px;
width: 260px;
height: 200px;
background-color:#f4dfff;
}
.column_3_2_4{
float: left;
margin-top: 30px;
margin-left: 10px;
width: 260px;
height: 200px;
background-color:#ffd4ff;
}
.content1{
margin :0 auto;
width: 1150px;
height: 1600px;
background-color: white;
}
.column_4{
margin: 0 auto;
width: 1150px;
height: 200px;
}
.column_4_1{
float: left;
margin-top: 10px;
width: 740px;
height: 190px;
background-color:white;
}
.column_4_1_1{
float: left;
margin-top: 10px;
width:246px;
height: 160px;
background-color: #f4e6ff;
}
.column_4_1_2{
float: left;
margin-top: 10px;
margin-left: 1px;
width:246px;
height: 160px;
background-color: #fae1ff;
}
.column_4_1_3{
float: left;
margin-top: 10px;
margin-left: 1px;
width:246px;
height: 160px;
background-color: #fce0ff;
}
.column_4_2 {
float: left;
margin-top: 10px;
margin-left: 10px;
width: 400px;
height: 190px;
background-color: #f2d8ff;
}
.column_5{
margin:0 auto;
width: 1150px;
height: 560px;
}
.column_5_1{
float: left;
margin-top: 10px;
width: 570px;
height: 550px;
background-color: white;
}
.column_55_1{
float: left;
width:306px;
height: 530px;
}
.column_5_1_1{
float: left;
margin-top: 10px;
margin-left: 1px;
width: 305px;
height: 280px;
background-color: #fbf0ff;
}
.column_5_1_2 {
float: left;
margin-left: 1px;
margin-top: 1px;
width: 305px;
height: 78px;
background-color: #feebff;
}
.column_5_1_3{
float: left;
margin-left: 1px;
margin-top: 1px;
width: 305px;
height: 78px;
background-color: #eadfff;
}
.column_5_1_4 {
float: left;
margin-left: 1px;
margin-top: 1px;
width: 305px;
height: 78px;
background-color: #ebe1fe;
}
.column_5_1_5{
float: left;
margin-top: 10px;
margin-left: 1px;
width: 260px;
height: 172px;
background-color: #f1d8ff;
}
.column_5_1_6{
float: left;
margin-left: 1px;
margin-top: 1px;
width: 260px;
height: 172px;
background-color: #f2d8ff;
}
.column_5_1_7{
float: left;
margin-left: 1px;
margin-top: 1px;
width: 260px;
height: 172px;
background-color: #edcdff;
}
.column_5_2{
float: left;
margin-top: 10px;
margin-left: 10px;
width: 570px;
height: 550px;
background-color: white;
}
.column_6{
margin-top: 10px;
width: 1150px;
height: 190px;
background-color: white;
}
.column_6_1{
float: left;
margin-top: 10px;
margin-left: 1px;
width:229px; ;
height: 160px;
background-color: #efe6ff;
}
.column_6_2{
float: left;
margin-left: 1px;
margin-top: 10px;
width:229px; ;
height: 160px;
background-color: #f3edff;
}
.column_6_3{
float: left;
margin-left: 1px;
margin-top: 10px;
width:229px; ;
height: 160px;
background-color: #eddfff;
}
.column_6_4{
float: left;
margin-left: 1px;
margin-top: 10px;
width:229px; ;
height: 160px;
background-color: #f4d5ff;
}
.column_6_5{
float: left;
margin-left: 1px;
margin-top: 10px;
width:229px; ;
height: 160px;
background-color: #efd1ff;
}
.column_7{
margin-top: 10px;
width: 1150px;
height: 690px;
background-color:white;
}
.column_7_1{
float: left;
margin-top: 10px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color: #f8f4ff;
}
.column_7_2{
float: left;
margin-top: 10px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color: #f7ecff;
}
.column_7_3{
float: left;
margin-top: 10px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color: #fbe9ff;
}
.column_7_4{
float: left;
margin-top: 10px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color: #fde2ff;
}
.column_7_5{
float: left;
margin-top: 10px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color: #fde0ff;
}
.column_7_6{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color: #f8f4ff;
}
.column_7_7{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color:#f7ecff;
}
.column_7_8{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color:#fbe9ff;
}
.column_7_9{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color: #fde2ff;
}
.column_7_10{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 260px;
background-color: #fde0ff;
}
.column_7_11{
float: left;
margin-left: 10px;
margin-top: 1px;
width:370px; ;
height: 135px;
background-color: #fff7ff;
}
.column_7_12{
float: left;
margin-left: 10px;
margin-top: 1px;
width:370px; ;
height: 135px;
background-color: #fff6fc;
}
.column_7_13{
float: left;
margin-left: 10px;
margin-top: 1px;
width:370px; ;
height: 135px;
background-color: #ffeafd;
}

.content2 {

margin: 0 auto;
width: 1150px;
height: 1125px;

}

.column_22_1{
float: left;
margin-top: 10px;
width: 100%;
height: 100%;
background-color: white;
}
.column_22_1_1{
float: left;
margin-top: 20px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #fffafe;
}
.column_22_1_2{
float: left;
margin-top: 20px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #fff1fa;
}
.column_22_1_3{
float: left;
margin-top: 20px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffebf4;
}
.column_22_1_4{
float: left;
margin-top: 20px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffe6f4;
}
.column_22_1_5{
float: left;
margin-top: 20px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffecf7;
}
.column_22_1_6{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #fffafe;
}
.column_22_1_7{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #fff1fa;
}
.column_22_1_8{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffebf4;
}
.column_22_1_9{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color:#ffe6f4;
}
.column_22_1_10{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffecf7;
}
.column_22_1_11{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #fffafe;
}
.column_22_1_12{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #fff1fa;
}
.column_22_1_13{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffebf4;
}
.column_22_1_14{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color:#ffe6f4;
}
.column_22_1_15{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffecf7;
}
.column_22_1_16{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color:#fffafe;
}
.column_22_1_17{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color:#fff1fa;
}
.column_22_1_18{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffebf4;
}
.column_22_1_19{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffe6f4;
}
.column_22_1_20{
float: left;
margin-top: 1px;
margin-left: 1px;
width: 229px;
height: 270px;
background-color: #ffecf7;
}
.footer{
margin: 0 auto;
width: 1150px;
height: 300px;
background-color:lavenderblush;
}


可能我的理解有限,存在一些问题（仅供个人学习参考，哈哈哈），
如有添加，静待后续，嘿嘿嘿！（小傻猫日常皮）

部分做过修改，但是没有修改完（嘿嘿）

最后

以上就是长情火为你收集整理的HTML+CSS简单的淘宝首页框架布局小练（三）的全部内容，希望文章能够帮你解决HTML+CSS简单的淘宝首页框架布局小练（三）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(47)

相关文章

淘宝爬虫：看看房地产拍卖行情怎么样？附可视化分析前言一、爬虫篇二、分析篇三、后话：定时邮件提醒
淘宝爬虫：看看房地产拍卖行情怎么样？附可视化分析前言一、爬虫篇二、分析篇三、后话：定时邮件提醒
HTML+CSS淘宝 页眉导航栏以及Logo搜索框的实现
HTML+CSS淘宝 页眉导航栏以及Logo搜索框的实现
我知道你在淘宝买过很多东西，但是你买过一所大学吗　　西安华西大学3月将被拍卖　　18人以投资助学为名非法集资近24亿元
我知道你在淘宝买过很多东西，但是你买过一所大学吗　　西安华西大学3月将被拍卖　　18人以投资助学为名非法集资近24亿元
淘宝首页代码
淘宝首页代码
HTML+CSS简单的淘宝首页框架布局小练（三）
HTML+CSS简单的淘宝首页框架布局小练（三）
带有反爬虫机制下进行爬取数据方案，这里以阿里拍卖为例
带有反爬虫机制下进行爬取数据方案，这里以阿里拍卖为例
15个目标检测开源数据集汇总1.火焰和烟雾图像数据集2.DOTA航拍图像数据集3. AITEX数据集4. T-LESS数据集5.H²O 行人交互检测数据集6.SpotGarbage垃圾识别数据集7.NAO自然界对抗样本数据集8.Labelme 图像数据集9.印度车辆数据集10.Seeing 3D chairs椅子检测模型11.SUN09场景理解数据集12.Unsplash图片检索数据集13.HICO-DET人物交互检测数据集14.上海科技大学人群统计数据集15.生活垃圾数据集
15个目标检测开源数据集汇总1.火焰和烟雾图像数据集2.DOTA航拍图像数据集3. AITEX数据集4. T-LESS数据集5.H²O 行人交互检测数据集6.SpotGarbage垃圾识别数据集7.NAO自然界对抗样本数据集8.Labelme 图像数据集9.印度车辆数据集10.Seeing 3D chairs椅子检测模型11.SUN09场景理解数据集12.Unsplash图片检索数据集13.HICO-DET人物交互检测数据集14.上海科技大学人群统计数据集15.生活垃圾数据集
新库上线 | 法拍房数据法拍房数据
新库上线 | 法拍房数据法拍房数据

评论列表共有 0 条评论

立即
投稿
返回
顶部