⽤HTML编写淘宝页⾯
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/reset.css"/>
<link rel="stylesheet" href="../css/taobao.css"/>
</head>
<!--导航栏-->
<header>
<nav>
<span>
<a href="">亲，请登录</a>
<a href="">免费注册</a>
<a href="">⼿机逛淘宝</a>
</span>
<span>
<a href="">
我的淘宝
<ol>
<li>淘宝</li>
<li>账户</li>
<li>清单</li>
</ol>
</a>
<a href="">购物车</a>
<a href=""><img src="../images/nav-start.png" alt=""/>收藏夹</a>
<a href="">商品分类</a>
<a href="">卖家中⼼</a>
<a href=""></a>
<a href=""><img src="../images/nav-ham.png" alt=""/>⽹站导航</a>
</span>
</nav>
</header>
<!--淘宝⽹-->
<div class="taobaowang">
<div class="taobaowang-top">
<img src="../images/logo.png" alt=""/>
<div>
<div class="sousuo">
html制作一个网页
<div class="baobei">
<a href="">宝贝</a>
<a href="">天猫</a>
<a href="">店铺</a>
</div>
<div class="shuru">
<form action="#" method="post">
<input type="text" name="username" placeholder=" 家居摆设添欣喜"/><button>搜索</button><span class="gaoji">⾼级搜索</span>                    </form>
</div>
</div>
<div class="xinkuan">
<a href="">新款连⾐裙</a>
<a href="">四件套</a>
<a href="">潮流T桖</a>
<a href="">时尚⼥靴</a>
<a href="">短裤</a>
<a href="">半⾝裙</a>
<a href="">男⼠外套</a>
<a href="">墙纸</a>
<a href="">新款男靴</a>
<a href="">⽿机</a>
<a href="">更多></a>
</div>
</div>
</div>
<div class="taobaowang-bottom">
<div>
<p><strong>主题市场</strong>  <img src="../images/menu-item-ham.png" alt=""/></p>
</div>
<div>
<a href="">天猫</a>
<a href="">聚划算</a>
<a href="">天猫超市</a>
<a href="">淘抢购</a>
<a href="">电器城</a>
<a href="">司法拍卖</a>
<a href="">中国制造</a>
<a class="tese" href="">特⾊中国</a>
<a href="">飞猪旅⾏</a>
<a href="">智能⽣活</a>
<a href="">苏宁易购</a>
</div>
</div>
</div>
<!--主题市场-->
<div class="zhuti">
<div class="zhongjian">
<div class="zhuti-left">
<div>
<div class="nvzhuang">
<ul>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>⼥装 /</span>
<span>男装 /</span>
<span>内⾐  ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>鞋靴 /</span>
<span>箱包 /</span>
<span>配件  ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>童装玩具 /</span>
<span>孕产 /</span>
<span>⽤品 ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>家电 /</span>
<span>数码 /</span>
<span>⼿机   ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>美妆 /</span>
<span>洗护 /</span>
<span>保健品  ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>珠宝 /</span>
<span>眼镜 /</span>
<span>⼿表   ></span>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>运动 /</span>                        <span>户外 /</span>
<span>乐器   ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>游戏 /</span>                        <span>动漫 /</span>
<span>影视   ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>美⾷ /</span>                        <span>⽣鲜 /</
span>
<span>零⾷   ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>鲜花 /</span>                        <span>宠物 /</span>
<span>农资   ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>房产 /</span>                        <span>装修 /</span>
<span>建筑   ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>家居 /</span>                        <span>家饰 /</span>
<span>家纺   ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>汽车 /</span>                        <span>⼆⼿车 /</span>
<span>⽤品   ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>办公 /</span>                        <span>DIY /</span>
<span>五⾦电⼦ ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>百货 /</span>                        <span>餐厨 /</span>
<span>家庭保健 ></span>
</li>
<li>
<span><img src="../images/menu-item-icon.png" alt=""/>学习/</span>                        <span>卡卷/</span>
<span>本地服务></span>
</li>
</ul>
<img src="../images/qietu.png" alt=""/>
</div>
<div class="tianmao">
<img src="../images/qietu01.png" alt=""/>
<img class="yanyuan" src="../images/qietu02.png" alt=""/>
<div>
<img src="../images/little-tmall.png" alt=""/>
<span><strong>天猫必逛</strong></span>
<span>热门品牌，天天上天猫！</span>
</div>
<div class="xinji">
<div>
<p>星级好睡眠</p>
<a href="">
<p>狂欢速抢</p>
</a>
<img src="../images/01-(2)_03.gif" alt=""/>
</div>
<div>
<p>⼩⽶超品⽇</p>
<p>平衡车出游热卖</p>
<a href="">
<p>关注赢⼩⽶6！</p>
</a>
<img src="../images/01-(88)_03.gif" alt=""/>
</div>
<div>
<p>价格直降</p>
<p>冰洗爆款返场</p>
<a href="">
<p>享免息分期</p>
</a>
<img src="../images/01-(66)_03.gif" alt=""/>
</div>
<div>
<p>厨卫⼤牌管</p>
<p>品质放⼼</p>
<a href="">
<p>装修省⼼</p>
</a>
<img src="../images/01-(2)_05.gif" alt=""/>
</div>
</div>
<div class="jinri">
<div>
<a href="">
<p>今⽇热卖</p>
</a>
<img class="yanyuan" src="../images/qietu03.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="shudaizi">
<div>
<img src="../images/qietu04.png" alt=""/>
<div>
<p>书呆⼦</p>
<p>书卷⽓更迷⼈</p>
<i></i> <img src="../images/qietu23.png" alt=""/> <span>⼈⽓248006</span>                </div>
</div>
<div>
<img src="../images/qietu04.png" alt=""/>
<div>
<p>理想家</p>
<p>想要这个家</p>
<img src="../images/qietu23.png" alt=""/> <span>⼈⽓2038770</span>
</div>
</div>
<div>
<img src="../images/qietu04.png" alt=""/>
<div>
<p>⽔中飞鱼</p>
<p>你属鱼的吧</p>
<img src="../images/qietu23.png" alt=""/> <span>⼈⽓285040</span>
</div>
<div>
<img src="../images/qietu04.png" alt=""/>
<div>
<p>韩范⼩妖精</p>
<p>实⼒了欧巴</p>
<img src="../images/qietu23.png" alt=""/> <span>⼈⽓5862134</span>                </div>
</div>
<div>
<img src="../images/qietu04.png" alt=""/>
<div>
<p>家有萌娃</p>
<p>宝贝快长⼤</p>
<img src="../images/qietu23.png" alt=""/> <span>⼈⽓248006</span>                </div>
</div>
</div>
</div>
<div class="zhuti-right">
<div>
<img src="../images/login-header.png" alt=""/>
</div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!--我常逛的-->
<div class="guangwu">
<div class="zuiyoubian">
<div class="diyitiao">
<img src="../images/tkbktbtc.png" alt=""/>
<a href="">更多></a>
<div>
<img src="../images/01-(11112)_03.gif" alt=""/>
<span><strong>⼯作需要放松，享受下午时光</strong></span>
<p>你有吃下午茶的习惯吗？最早关于下午茶的由来，可以最疏导英国17世纪</p>            </div>
</div>
<div>
<img src="../images/ybhkho.png" alt=""/>
<div>
<img src="../images/01-6666_03.gif" alt=""/>
<span><strong>丹麦Mat⼿⼯⽪⾰隔热</strong></span>
<p>⽪⾰质地能隔热，触感细腻独特，造型简约⼤⽅，质感</p>
</div>
</div>
<div>
<img src="../images/01-6666_07.gif" alt=""/>
<span><strong>⼴东特产红⾖饼糕点</strong></span>
<p>⼴东特产红⾖饼糕点，馅⼼低⽽清⽥，饼⽪软饵酥脆，馅料</p>
</div>
<div>
<img src="../images/01-6666_10.gif" alt=""/>
<span><strong>⼴东特产红⾖饼糕点</strong></span>
<p>⼴东特产红⾖饼糕点，馅⼼低⽽清⽥，饼⽪软饵酥脆，馅料</p>
</div>
<div>
<img src="../images/01-6666_12.gif" alt=""/>
<span><strong>⼴东特产红⾖饼糕点</strong></span>
<p>⼴东特产红⾖饼糕点，馅⼼低⽽清⽥，饼⽪软饵酥脆，馅料</p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。