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 h 1d80f ref="#">影视</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学习-day03:简单首页布局
- 关于贴友的一个书本页面简单布局（html+css）的实现
- 【记录贴】html+css 超简单的布局
- CSS仿淘宝首页导航条按钮布局效果
- 高仿淘宝首页 - 刚把CSS和JS弄出成了外部，原本写的时候都在HTML一个文件里哈
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
- CSS仿淘宝首页导航条布局效果
- 在html中div+css布局的简单应用（适合初学者了解）
- CSS布局欣赏：淘宝首页布局效果
- CSS仿淘宝首页导航条布局效果
- 关于后盾网yii框架的学习小结(3)--asset，创建布局，在html中加载css
- CSS仿淘宝首页导航条布局效果
- 网页简单布局之结构与表现原则（HTML/CSS）
- html 利用 frameset 进行简单的框架布局
- 一个简单的网页布局HTML+CSS
- 在html中div+css布局的简单应用（适合初学者了解）
- 每日知识总结计划（java、android、react native、web框架、js、css、html、ajax）首页
- CSS仿淘宝首页导航条布局效果