HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝网-！我喜欢</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/taobao.css">
</head>
<body>
<!-- 导航栏 -->
<div >
<header>
<!-- 登录 注册 -->
<ul>
<li>
<a href="#">亲,请登录</a>
</li>
<li>
<a href="#">免费注册</a>
</li>
<li>
<a href="#">手机逛淘宝</a>
</li>
</ul>
<!-- 我的淘宝 -->
<ul>
<li>
<img src="../img/images/nav-ham.png">
<a href="#">网站导航</a>
<img src="../img/images/nav-icon.png">
</li>
<li>
<a href="#">联系客服</a>
<img src="../img/images/nav-icon.png">
</li>
<li>
<a href="#">卖家中心</a>
<img src="../img/images/nav-icon.png">
</li>
<li >|</li>
<li>
<a href="#">商品分类</a>
</li>
<li>
<img src="../img/images/nav-start.png">
<a href="#">收藏夹</a>
<img src="../img/images/nav-icon.png">
</li>
<li>
<img src="../img/images/nav-cart.png">
<a href="#">购物车 <span > 0 </span></a>
<img src="../img/images/nav-icon.png">
</li>
<li>
<a href="#">我的淘宝</a>
<img src="../img/images/nav-icon.png">
</li>
</ul>
</header>
</div>
<!-- 白底背景 -->
<div >
<!-- 白底区域设置一个1200的宽 -->
<div >
<!-- 上面 -->
<div >
<!-- logo图片-->
<a href="#">
<img src="../img/images/images/01-(233)_03.png" >
</a>
<!-- 搜索框那部分-->
<div >
<!-- 搜索框上面的宝贝、天猫、店铺-->
<div >
<ul>
<li>
<a href="#">宝贝</a>
</li>
<li>
<a href="#">天猫</a>
</li>
<li>
<a href="#">店铺</a>
</li>
</ul>
</div>
<!-- 搜索栏-->
<div >
<form action="#" method="post">
<input type="text"/>
<img src="../img/images/search-input.png">
<img src="../img/images/search-camera.png">
<button>
搜索
</button>
<div>
<a href="#">高级搜索</a>
</div>
<ul>
<li>
<a href="#">新款连衣裙</a>
</li>
<li>
<a href="#">四件套</a>
</li>
<li>
<a href="#">潮流T恤</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="#">更多
<img src="../img/images/nav-icon.png">
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
<!-- 主题市场那部分 -->
<div >
<!-- 主题市场分类 -->
<div >
<h1>主题市场</h1>
<a href="#">
<img src="../img/images/menu-item-ham.png">
</a>
</div>
<!-- 天猫、聚划算 -->
<ul >
<li>
<a href="#">天猫</a>
</li>
<li>
<a href="#">聚划算</a>
</li>
<li>
<a href="#">天猫超市</a>
</li>
<li>|</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>|</li>
<li>
<a href="#">智能生活</a>
</li>
<li>
<a href="#">苏宁易购</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 整体的左边部分 -->
<div >
<!-- 淘宝网下面 -->
<!-- 整体左边 -->
<div >
<div >
<!-- 左 -->
<div >
<ul>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
女装</a>
<span>/</span>
<a href="#">男装</a>
<span>/</span>
<a href="#">内衣</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
鞋靴</a>
<span>/</span>
<a href="#">箱包</a>
<span>/</span>
<a href="#">配件</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
童装玩具</a>
<span>/</span>
<a href="#">孕产</a>
<span>/</span>
<a href="#">用品</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
家电</a>
<span>/</span>
<a href="#">手机</a>
<span>/</span>
<a href="#">数码</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
美妆</a>
<span>/</span>
<a href="#">洗护</a>
<span>/</span>
<a href="#">保健品</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
珠宝</a>
<span>/</span>
<a href="#">眼镜</a>
<span>/</span>
<a href="#">手表</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
运动</a>
<span>/</span>
<a href="#">户外</a>
<span>/</span>
<a href="#">乐器</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
游戏</a>
<span>/</span>
<a href="#">动漫</a>
<span>/</span>
<a href="#">影视</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
美食</a>
<span>/</span>
<a href="#">生鲜</a>
<span>/</span>
<a href="#">零食</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
鲜花</a>
<span>/</span>
<a href="#">宠物</a>
<span>/</span>
<a href="#">农资</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
房产</a>
<span>/</span>
<a href="#">装修</a>
<span>/</span>
<a href="#">建材</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
家具</a>
<span>/</span>
<a href="#">家饰</a>
<span>/</span>
<a href="#">家纺</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
汽车</a>
<span>/</span>
<a href="#">二手车</a>
<span>/</span>
<a href="#">用品</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
办公</a>
<span>/</span>
<a href="#">DIY</a>
<span>/</span>
<a href="#">五金电子</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
百货</a>
<span>/</span>
<a href="#">餐厨</a>
<span>/</span>
<a href="#">家庭保健</a>
<span >></span >
</li>
<li>
<a href="#">
<img src="../img/images/menu-item-icon.png">
学习</a>
<span>/</span>
<a href="#">卡券</a>
<span>/</span>
<a href="#">本地服务</a>
<span >></span >
</li>
<li>
<img src="../img/images/index_01_03_03.png">
</li>
</ul>
</div>
<!-- 中 -->
<div >
<!-- 上 -->
<div >
<!-- 左边 -->
<div >
<img src="../img/images/images/index_01_03.png">
</div>
<!-- 右边 -->
<div >
<img src="../img/images/images/index_01_03_04.png">
<p>今日热卖</p>
</div>
</div>
<!-- 下面 -->
<div >
<!-- 左边 -->
<div >
<img src="../img/images/little-tmall.png">
<span >
天猫必逛
<span>热门品牌，天天上天猫！</span>
</span>
<span >3<span>/6</span>
</span>
<ul>
<li>
<img src="../img/images/images/index_01_032.png">
</li>
<li>
<img src="../img/images/images/index_01_04_03.png">
</li>
<li>
<img src="../img/images/images/index_01_04_031.png">
</li>
<li>
<img src="../img/images/images/index_01-2_03.png">
</li>
</ul>
</div>
<!-- 右边 -->
<div >
<img src="../img/images/images/index_01-3_03.png">
</div>
</div>
</div>
<!-- 下 -->
<ul >
<li>
<div >
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
<li>
<div >
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
<li>
<div >
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
<li>
<div >
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
<li>
<div >
<img src="../img/images/images/index_01-45_03.png">
<div>
<a href="#">
<h1>书呆子</h1>
</a>
<p>书卷气更迷人</p>
<img src="../img/images/images/index_012_06.png">
</div>
</div>
</li>
</ul>
</div>
<!-- 我常逛的 -->
<div >
<!-- 上